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.mzph.cn/news/93822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

结构型设计模式——外观模式

摘要 本文主要分析设计模式 - 结构型 - 外观(Facade)&#xff0c;它提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口&#xff0c;从而让子系统更容易使用。 一、外观模式的意图 提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口&#xff0c;从而让…

23.2 Bootstrap 卡片

1.卡片 1.1卡片样式 在Bootstrap 5中, .card, card-header, .card-body, .card-footer类是用于创建卡片样式.下面是这些类的简单介绍: * 1. .card: 用于创建一个基本的卡片容器它作为一个包裹元素,通常与其他卡片类一起使用.* 2. .card-header: 用于创建卡片的头部部分.通常在…

【Vue3】Mitt

在 Vue3 中&#xff0c;$on&#xff0c;$off 和 $once 实例方法被移除&#xff0c;EventBus 无法使用了。那么此时&#xff0c;我们可以使用 Mitt 库&#xff08;发布订阅模式的设计&#xff09;。 // 安装 mitt npm install mitt -S// main.ts import { createApp } from vue…

力扣-383.赎金信

Idea 使用一个hashmap 或者一个int数组存储第二次字符串中每一个字符及其出现的次数 遍历第一个字符串&#xff0c;讲出现的重复字符减1&#xff0c;若该字符次数已经为0&#xff0c;则返回false AC Code class Solution { public:bool canConstruct(string ransomNote, strin…

基于matlab创作简易表白代码

一、程序 以下是一个基于MATLAB的简单表白代码&#xff1a; % 表白代码 clc; % 清除命令行窗口 clear; % 清除所有变量 close all; % 关闭所有图形窗口 % 输入被表白者的名字 name input(请输入被表白者的名字&#xff1a;, s); % 显示表白信息 fprintf(\n); fprintf(亲爱的…

Scrapy框架Splash渲染

Scrapy框架是一款强大而灵活的Python网络爬虫框架&#xff0c;用于快速、高效地爬取和提取网页数据。然而&#xff0c;对于一些使用动态渲染技术的网站&#xff0c;Scrapy在处理JavaScript生成的内容上可能会有些困难。为了应对这种情况&#xff0c;Scrapy提供了Splash渲染服务…

Vue中添加旋转动画

// transform: scale(1.2) rotate(-180deg); 放大 旋转 // transform: rotate(-180deg); 旋转 <i class"el-icon-close"></i>i {font-size: 20px;line-height: 24px;transition: transform 0.2s linear;}i:hover {color: red;transform-origin: cen…

vcomp120.dll丢失的详细解决方法,全面分享5个解决方法分享

vcomp120.dll 是 Visual C Redistributable 的一个组件&#xff0c;是许多 Windows 应用程序所必需的动态链接库 (DLL) 之一。如果计算机上缺少 vcomp120.dll 文件&#xff0c;或者该文件已损坏或不正确&#xff0c;可能会导致许多应用程序无法正常运行&#xff0c;出现“无法继…

【算法优选】 滑动窗口专题——壹

文章目录 &#x1f60e;前言&#x1f340;[长度最小的子数组](https://leetcode.cn/problems/minimum-size-subarray-sum/description/)&#x1f6a9;题目描述&#xff1a;&#x1f6a9;算法思路&#xff1a;&#x1f6a9;滑动窗口可以解决问题的原因&#xff1f;&#x1f6a9;…

AJAX--Express速成

一、基本概念 1、AJAX(Asynchronous JavaScript And XML)&#xff0c;即为异步的JavaScript 和 XML。 2、异步的JavaScript 它可以异步地向服务器发送请求&#xff0c;在等待响应的过程中&#xff0c;不会阻塞当前页面。浏览器可以做自己的事情。直到成功获取响应后&#xf…

Pikachu靶场——目录遍历漏洞和敏感信息泄露

文章目录 1. 目录遍历漏洞1.1 源码分析1.2 漏洞防御 2. 敏感信息泄露2.1 漏洞防御 1. 目录遍历漏洞 漏洞描述 目录遍历漏洞发生在应用程序未能正确限制用户输入的情况下。攻击者可以利用这个漏洞&#xff0c;通过在请求中使用特殊的文件路径字符&#xff08;如 …/ 或 %2e%2e…

键盘上F1至F12键的作用

多年来&#xff0c;我们习惯了最上排的12个按键&#xff0c;从F1到F12&#xff0c;它们被称为“快速功能键”&#xff0c;可以让你更轻松地操作电脑&#xff1b;但是&#xff0c;很多人可能从未使用过它们&#xff0c;也从来不知道它们的用途。那么今天&#xff0c;就向大家科普…

2024级199管理类联考之数学基础(上篇)

管理类考试介绍 管理综合200分,时间3小时 数学&#xff1a;75分/25题,是拉开差距的核心模块 问题求解题&#xff1a;15个,5选一条件充分性判断&#xff1a;10个,结合两个条件选择答案 条件一充分,条件二不充分&#xff1a;A条件一不充分,条件二充分&#xff1a;B条件一充分,条…

Java - 基本数据类型和封装类型

基本类型有默认值&#xff0c;而包装类型初始为null。然后再根据这两个特性进行分业务使用&#xff0c;在阿里巴巴的规范里所有的POJO类必须使用包装类型&#xff0c;而在本地变量推荐使用基本类型。 Java语言提供了八种基本类型。六种数字类型&#xff08;四个整数型&#xff…

基本的五大排序算法

目录&#xff1a; 一&#xff0c;直接插入算法 二&#xff0c;希尔排序算法 三&#xff0c;选择排序 四&#xff0c;堆排序 五&#xff0c;冒泡排序算法 简介&#xff1a; 排序算法目前是我们最常用的算法之一&#xff0c;据研究表明&#xff0c;目前排序占用计算机CPU的时…

数据挖掘实验(一)数据规范化【最小-最大规范化、零-均值规范化、小数定标规范化】

一、数据规范化的原理 数据规范化处理是数据挖掘的一项基础工作。不同的属性变量往往具有不同的取值范围&#xff0c;数值间的差别可能很大&#xff0c;不进行处理可能会影响到数据分析的结果。为了消除指标之间由于取值范围带来的差异&#xff0c;需要进行标准化处理。将数据…

Linux性能优化--性能工具:系统内存

3.0.概述 本章概述了系统级的Linux内存性能工具。本章将讨论这些工具可以测量的内存统计信息&#xff0c;以及如何使用各种工具收集这些统计结果。阅读本章后&#xff0c;你将能够&#xff1a; 理解系统级性能的基本指标&#xff0c;包括内存的使用情况。明白哪些工具可以检索…

由于计算机中丢失msvcp110.dll的解决方法与msvcp110.dll丢失修复方法

相信大家在打开电脑软件或许游戏都有遇到过电脑提示找不到msvcp110.dll文件&#xff0c;导致软件游戏打不开&#xff0c;我们应该怎么办&#xff1f;不用着急&#xff0c;今天小编我分享我找了很久成功解决问题的方法给大家&#xff0c;希望可以帮到各位。 1. 使用DLL修复工具&…

大模型微调概览

文章目录 微调 和 高效微调高效微调技术方法概述高效微调方法一:LoRA高效微调方法二: Prefix Tuning高效微调方法三: Prompt Tuning高效微调方法四: P-Tuning v2基于强化学习的进阶微调方法RLHF 训练流程微调 和 高效微调 微调,Fine-Tuning, 一般指全参数的微调(全量微调),…

电子计算机核心发展(继电器-真空管-晶体管)

目录 继电器 最大的机电计算机之一——哈弗Mark1号&#xff0c;IBM1944年 背景 组成 性能 核心——继电器 简介 缺点 速度 齿轮磨损 Bug的由来 真空管诞生 组成 控制开关电流 继电器对比 磨损 速度 缺点 影响 代表 第一个可编程计算机 第一个真正通用&am…