Flutter笔记 - 用于描述Align的Alignment、AlignmentDirectional、AlignmentTween类

Flutter笔记
用于描述Align的Alignment、AlignmentDirectional、AlignmentTween类

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/133418003



1. 概述

类名描述
AlignmentAlignment 类表示在矩形中的对齐位置,使用 Alignment 构造函数来创建。它以矩形的中心点为原点,水平方向为-1到1,垂直方向为-1到1的坐标系。例如,Alignment(-1.0, -1.0) 表示矩形的左上角。
AlignmentDirectionalAlignmentDirectional 类类似于 Alignment,但它使用 Start 和 End 而不是 Left 和 Right,适用于从左到右和从右到左的布局。例如,AlignmentDirectional(-1.0, -1.0) 表示矩形的起始位置的左上角。
AlignmentGeometryAlignmentGeometry 类是 AlignmentAlignmentDirectional 的抽象基类,用于支持不同的对齐方式。它允许根据布局方向(LTR或RTL)动态地选择 AlignmentAlignmentDirectional
AlignmentGeometryTweenAlignmentGeometryTween 类用于创建在两个 AlignmentGeometry 之间进行插值的动画。它通常用于动画对齐位置的平滑过渡。
AlignmentTweenAlignmentTween 类是 Alignment 的 Tween,用于创建在两个 Alignment 之间进行插值的动画。它通常用于动画普通的对齐位置的平滑过渡。

2. AlignmentGeometry抽象类

AlignmentGeometry 是一个用于表示偏移位置的抽象类,它的具体实现类 AlignmentAlignmentDirectional 分别用于不同的场景。通过使用这些类,可以轻松地定位和对齐小部件,而无需过多考虑文本方向和坐标系的差异。
AlignmentGeometry代表了可以用于定位和对齐小部件的不同位置或偏移方式。这个抽象类有两个主要的具体实现类:AlignmentAlignmentDirectional,它们分别用于不同的场景,具有不同的坐标系和方向。

  • 由于AlignmentGeometry 是一个抽象基类,不能直接实例化。需要使用具体的子类,如 AlignmentAlignmentDirectional
  • AlignmentGeometry 提供了一个抽象的坐标系统,可以用来表示不同位置或偏移。这个坐标系统以矩形的中心为原点,水平和垂直方向的范围从-1.0到+1.0。
  • Alignment 类用于表示与文本方向无关的偏移位置,而 AlignmentDirectional 用于表示依赖于文本方向的偏移位置。这使得小部件可以根据不同的文本方向正确地对齐和定位。
  • AlignmentGeometry 的具体实现类通常提供了一些常量,表示常见的偏移位置,例如 Alignment.topLeftAlignmentDirectional.bottomEnd
  • 支持动画和过渡AlignmentGeometry 可以用于创建动画或过渡,从一个位置平滑地过渡到另一个位置。

3. Alignment 组件

3.1 原理解析

Alignment 类表示矩形内的一个点,以矩形的中心为原点。它定义了一个坐标系,其中水平方向的范围是从 -1.0 到 1.0,垂直方向的范围也是从 -1.0 到 1.0。这个坐标系的中心点是 Alignment(0.0, 0.0),表示矩形的中心。具体的解释如下:

  • Alignment(0.0, 0.0) 表示矩形的中心。
  • 水平方向从 -1.0 移动到 +1.0 相当于从矩形的一边移动到另一边。因此,水平方向上的距离是矩形宽度的两倍。
  • Alignment(-1.0, -1.0) 表示矩形的左上角。
  • Alignment(1.0, 1.0) 表示矩形的右下角。
  • Alignment(0.0, 3.0) 表示一个点,水平方向居中于矩形,垂直方向下移了矩形高度的距离。
  • Alignment(0.0, -0.5) 表示一个点,水平方向居中于矩形,垂直方向在矩形的顶部边缘和中心之间的中点。

Alignment 通过 xy 两个参数来表示对齐位置,其中 x 控制水平位置,y 控制垂直位置。在给定矩形的情况下,可以通过以下公式将 Alignment 转换为坐标系中的点坐标:

点坐标 = (x * 矩形宽度 / 2 + 矩形宽度 / 2, y * 矩形高度 / 2 + 矩形高度 / 2)

这个坐标系使用视觉坐标,意味着增加 x 会从左向右移动点。为了支持从右到左的布局,可以考虑使用 AlignmentDirectional,它的水平方向取决于文本方向。

3.2 用法解析

Alignment 主要用于在矩形内部的定位,通常与一些组件一起使用,比如 Align。如:

Align(alignment: Alignment.center,child: Text('Centered Text'),
)

再如:

Container(width: 200.0,height: 200.0,child: Align(alignment: Alignment(-0.5, 0.5), // 自定义对齐位置child: Text('Custom Alignment'),),
)

又如创建动画效果:

// 创建一个 AnimationController,用于控制动画。
AnimationController controller;// 创建一个 AlignmentTween,定义动画的起始和结束位置。
// 在此示例中,动画从左上角(Alignment.topLeft)到右下角(Alignment.bottomRight)。
Animation<Alignment> animation = AlignmentTween(begin: Alignment.topLeft,     // 动画的起始位置end: Alignment.bottomRight,   // 动画的结束位置
).animate(controller);          // 使用 AnimationController 创建动画对象// 在动画过程中更新组件位置的组件构建器。
AnimatedBuilder(animation: animation,         // 指定要监听的动画builder: (context, child) {// 使用 Align 组件将组件相对于动画值的位置进行对齐。return Align(alignment: animation.value,  // 使用动画值来控制对齐位置child: YourWidget(),        // 替换 YourWidget() 为你的组件);},
)

4. AlignmentDirectional组件

AlignmentDirectional 是一个用于定位组件相对于矩形的偏移的类,但它的水平位置依赖于文本方向。

4.1 原理解析

AlignmentDirectional 的工作原理与 Alignment 类似,但是它考虑了文本方向。可以在 TextDirection.ltr(从左到右的文本方向)和 TextDirection.rtl(从右到左的文本方向)之间切换,而不需要明确了解当前文本方向。它通过以下两个属性来定义偏移:

  • start:水平方向上的偏移,取值范围从 -1.0(表示左侧或"start"边缘)到 1.0(表示右侧或"end"边缘)。值不限于此范围,小于 -1.0 的值表示在"start"边缘之外,大于 1.0 的值表示在"end"边缘之外。这个值在通过 resolve 方法时会根据文本方向进行规范化。

- `y`:垂直方向上的偏移,取值范围从 -1.0(表示顶部)到 1.0(表示底部)。值不限于此范围,小于 -1.0 的值表示在顶部之上,大于 1.0 的值表示在底部之下。`AlignmentDirectional` 的属性 `start` 的含义与文本方向有关,例如,在 `TextDirection.ltr` 文本方向下,`start` 为 -1.0 表示左侧边缘,而在 `TextDirection.rtl` 文本方向下,`start` 为 -1.0 表示右侧边缘。<div id="4-2"></div>## <a href="#4-2"><font color="#037781">4.2 用法解析</font>`AlignmentDirectional` 可以在需要处理文本方向的情况下使用。例如:```dart
Align(alignment: AlignmentDirectional(0.0, 0.0), // 在文本方向下水平居中和垂直居中child: YourWidget(),
)
  1. AnimatedBuilder 中使用 AlignmentDirectional 创建动画:
AnimationController controller;
Animation<AlignmentDirectional> animation = AlignmentDirectionalTween(begin: AlignmentDirectional(-1.0, -1.0),end: AlignmentDirectional(1.0, 1.0),
).animate(controller);AnimatedBuilder(animation: animation,builder: (context, child) {return Align(alignment: animation.value.resolve(TextDirection.ltr), // 使用文本方向解析偏移child: YourWidget(),);},
)

也可以使用内置的静态常量来表示不同的偏移位置:

AlignmentDirectional.topStart // 位于文本方向下的左上角
AlignmentDirectional.bottomEnd // 位于文本方向下的右下角

如:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('AlignmentDirectional 示例'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Container(width: 100,height: 100,color: Colors.blue,alignment: AlignmentDirectional.topStart, // 位于文本方向下的左上角child: const Text('Top Start'),),const SizedBox(height: 20),Container(width: 100,height: 100,color: Colors.red,alignment: AlignmentDirectional.bottomEnd, // 位于文本方向下的右下角child: const Text('Bottom End'),),],),),),);}
}

在这里插入图片描述

AlignmentDirectional 的使用方式与 Alignment 类似,但它更灵活,可以根据文本方向动态调整水平偏移。这使得它在需要处理国际化和文本方向的应用程序中非常有用。


5. AlignmentGeometryTween 抽象类

AlignmentGeometryTween 是一个抽象基类,它用于表示在两个不同的 AlignmentGeometry 之间创建动画的基本结构。它定义了创建动画所需的方法和属性,但本身无法直接实例化,而是通过其具体的子类来使用。

具体的子类AlignmentTween ,实现了 AlignmentGeometryTween 抽象类,并提供了适用于具体 Alignment 或 AlignmentDirectional 的实现。这些具体的子可以创建特定类型的 Alignment 动画。

6. AlignmentTween组件(对其补间动画)

AlignmentTween 是用于在两个不同的 Alignment 值之间创建动画的类。它是 AlignmentGeometryTween 的一个具体子类,专门用于处理 Alignment 类型的动画效果。AlignmentTween 可以平滑地过渡一个 Alignment 到另一个 Alignment,从而创建流畅的动画效果。

以下是 AlignmentTween 的主要属性和用法:

  • begin:指定动画的起始位置,通常为初始的 Alignment 值。

  • end:指定动画的结束位置,通常为目标的 Alignment 值。

  • lerp 方法:用于在两个不同的 Alignment 值之间插值并创建动画效果。这个方法通常由 Flutter 框架自动调用,无需手动调用。

要创建一个 AlignmentTween 动画,通常按照以下步骤操作:

  1. 创建一个 AlignmentTween 实例,指定起始和结束位置:

    Alignment beginAlignment = Alignment.topLeft;
    Alignment endAlignment = Alignment.bottomRight;
    AlignmentTween alignmentTween = AlignmentTween(begin: beginAlignment, end: endAlignment);
    
  2. 创建一个 AnimationController 以控制动画的执行:

    AnimationController controller = AnimationController(duration: Duration(seconds: 2), // 设置动画持续时间vsync: this, // 通常用于 State 对象中
    );
    
  3. 使用 alignmentTween.animate(controller) 来生成动画对象:

    Animation<Alignment> animation = alignmentTween.animate(controller);
    
  4. 在需要更新小部件位置的地方使用 AnimatedBuilder 或其他适当的小部件包装,以便在动画过程中更新小部件的位置:

    AnimatedBuilder(animation: animation,builder: (context, child) {return Align(alignment: animation.value,child: YourWidget(), // 替换为要执行动画的小部件);},
    )
    
  5. 启动动画,例如在按钮点击或初始化时:

    controller.forward(); // 启动动画
    

这样,就可以使用 AlignmentTween 创建并控制 Alignment 动画,使小部件在不同的对齐位置之间平滑过渡。这对于在 UI 中实现平滑的位置变化效果非常有用。

一个例子:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return const MaterialApp(home: MyAnimatedWidget(),);}
}class MyAnimatedWidget extends StatefulWidget {const MyAnimatedWidget({super.key});State<MyAnimatedWidget> createState() => _MyAnimatedWidgetState();
}class _MyAnimatedWidgetState extends State<MyAnimatedWidget>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<Alignment> _animation;void initState() {super.initState();// 创建动画控制器_controller = AnimationController(duration: const Duration(seconds: 2),vsync: this,);// 创建 AlignmentTween 动画Alignment beginAlignment = Alignment.topLeft;Alignment endAlignment = Alignment.bottomRight;_animation = AlignmentTween(begin: beginAlignment, end: endAlignment).animate(_controller);// 启动动画_controller.forward();}void dispose() {_controller.dispose(); // 释放动画控制器super.dispose();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('AlignmentTween Animation'),),body: Center(child: AnimatedBuilder(animation: _animation,builder: (context, child) {return Align(alignment: _animation.value,child: Container(width: 100.0,height: 100.0,color: Colors.blue,child: const Center(child: Text('Animated',style: TextStyle(color: Colors.white),),),),);},),),);}
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/146877.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

iPhone 15首批体验出炉,掉漆、烫手、进灰,口碑严重崩塌

眼看 iPhone 15 系列已经上架&#xff0c;不知道大伙儿剁手了没有&#xff1f; 哦&#xff0c;原来你们也在等首批用户体验反馈啊&#xff01; 随着 22 号正式开售&#xff0c;到目前不少人陆续上手 iPhone 15 系。 咱们也是翻阅了大量贴吧用户反馈、电商平台评论等&#xff…

C++goto语句

在本文中&#xff0c;您将了解goto语句&#xff0c;它是如何工作的&#xff0c;以及为什么应该避免它。在C 编程中&#xff0c;goto语句用于通过将控制权转移到程序的其他部分来更改程序执行的正常顺序。 goto语句的语法 goto label; ... .. ... ... .. ... ... .. ... label…

Spring5应用之JDK动态代理

作者简介&#xff1a;☕️大家好&#xff0c;我是Aomsir&#xff0c;一个爱折腾的开发者&#xff01; 个人主页&#xff1a;Aomsir_Spring5应用专栏,Netty应用专栏,RPC应用专栏-CSDN博客 当前专栏&#xff1a;Spring5应用专栏_Aomsir的博客-CSDN博客 文章目录 前言JDK动态代理开…

环形链表[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个链表的头节点head&#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪next指针再次到达&#xff0c;则链表中存在环。为了表示给定链表中的环&#xff0c;评测系统内部使用整数pos来表示链…

嵌入式开源库之libmodbus学习笔记

socat 安装sudo apt-get install socat创建终端 socat -d -d pty,b115200 pty,b115200查看终端 ls /dev/pts/ minicom 安装 sudo apt-get install minicom链接虚拟终端 sudo minicom -D /dev/pts/3以十六进制显示 minicom -D /dev/pts/1 -H设置波特率 minicom -D /dev/pts/1…

python操作.xlsx文件

from openpyxl import load_workbook from openpyxl.styles import Font,colors, Alignment from openpyxl.styles import Border, Side #打开已经存在的Excel workbook load_workbook(filenameC:\\Users\\yh\\Documents\\测试.xlsx) #创建表&#xff08;sheet&#xff09;,插…

【机器学习】熵和概率分布,图像生成中的量化评估IS与FID

详解机器学习中的熵、条件熵、相对熵、交叉熵 图像生成中常用的量化评估指标通常有Inception Score (IS)和Frchet Inception Distance (FID) Inception Score (IS) 与 Frchet Inception Distance (FID) GAN的量化评估方法——IS和FID&#xff0c;及其pytorch代码

STM32G070RBT6-MCU温度测量(ADC)

1、借助STM32CubeMX生成系统及外设相关初始化代码。 在以上配置后就可以生成相关初始化代码了。 /* ADC1 init function */ void MX_ADC1_Init(void) {/* USER CODE BEGIN ADC1_Init 0 *//* USER CODE END ADC1_Init 0 */ADC_ChannelConfTypeDef sConfig {0};/* USER COD…

pandas读取文件的时候出现‘OSError: Initializing from file failed’

报错原因&#xff1a; pandas.read_csv() 报错 OSError: Initializing from file failed&#xff0c;一般由两种情况引起&#xff1a;一种是函数参数为路径而非文件名称&#xff0c;另一种是函数参数带有中文。 原代码&#xff1a; data pd.read_csv(csv文件.csv) data导入文…

QT:绘图

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> //绘图事件class Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent 0);~Widget();void paintEvent(QPaintEvent *event); //重写绘图事件void timerEve…

计算机竞赛 深度学习猫狗分类 - python opencv cnn

文章目录 0 前言1 课题背景2 使用CNN进行猫狗分类3 数据集处理4 神经网络的编写5 Tensorflow计算图的构建6 模型的训练和测试7 预测效果8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习猫狗分类 ** 该项目较为新颖&a…

【自定义类型】--- 位段、枚举、联合

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言进阶之路&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅数据结构探索&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…

OCI 发布了容器运行时和镜像规范!

7 月 19 日是开放容器计划Open Container Initiative&#xff08;OCI&#xff09;的一个重要里程碑&#xff0c;OCI 发布了容器运行时和镜像规范的 1.0 版本&#xff0c;而 Docker 在这过去两年中一直充当着推动和引领的核心角色。 我们的目标是为社区、客户以及更广泛的容器行…

问答区混赏金的集合贴

此贴专记录CSDN问答社区里面&#xff0c;一些回答者在临近结题时胡乱回答&#xff0c;只为分取结题赏金的人。 为了截图方便&#xff0c;给回答者点赞和点踩不是对其回答的认可和不认可&#xff0c;只是为了方便截图而已 文章目录 第一位——夜深人静的哝玛 (PS:与本人的头像和…

为什么都说NFS读写性能差,如何进行优化?

使用基于NFS协议存储系统的同学经常遇到的问题是在小文件比较多的情况下性能会比较差。小文件访问性能差本身是可以理解的,但是NFS确实是太差了。不知大家是否深层次分析过,为什么NFS访问小文件性能会这么差? NFS文件系统与本地文件系统的差异在于多了一个网络传输的过程。…

基于or-tools的人员排班问题建模求解(JavaAPI)

使用Java调用or-tools实现了阿里mindopt求解器的案例&#xff08;https://opt.aliyun.com/platform/case&#xff09;人员排班问题。 这里写目录标题 人员排班问题问题描述数学建模编程求解&#xff08;ortoolsJavaAPI&#xff09;求解结果 人员排班问题 随着现在产业的发展&…

OpenGL之光照贴图

我们需要拓展之前的系统,引入漫反射和镜面光贴图(Map)。这允许我们对物体的漫反射分量和镜面光分量有着更精确的控制。 漫反射贴图 我们希望通过某种方式对物体的每个片段单独设置漫反射颜色。我们仅仅是对同样的原理使用了不同的名字:其实都是使用一张覆盖物体的图像,让我…

通讯网关软件013——利用CommGate X2ORACLE实现Modbus RTU数据转储ORACLE

本文介绍利用CommGate X2ORACLE实现从Modbus RTU设备读取数据并转储至ORACLE数据库。CommGate X2ORACLE是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;实现从Modbus RTU设备读取数据并转储至ORACL…

洛谷P5732 【深基5.习7】杨辉三角题解

目录 题目【深基5.习7】杨辉三角题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1传送门 代码解释亲测 题目 【深基5.习7】杨辉三角 题目描述 给出 n ( n ≤ 20 ) n(n\le20) n(n≤20)&#xff0c;输出杨辉三角的前 n n n 行。 如果你不知道什么是杨辉三角&#xf…

Android Jetpack组件架构:ViewModel的原理

Android Jetpack组件架构&#xff1a;ViewModel的原理 导言 本篇文章是关于介绍ViewModel的&#xff0c;由于ViewModel的使用还是挺简单的&#xff0c;这里就不再介绍其的基本应用&#xff0c;我们主要来分析ViewModel的原理。 ViewModel的生命周期 众所周知&#xff0c;一般…