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

jcLee952023-10-05 14:56

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. 概述](#1. 概述)
  • [2. AlignmentGeometry抽象类](#2. AlignmentGeometry抽象类)
  • [3. Alignment 组件](#3. Alignment 组件)
    • [3.1 原理解析](#3.1 原理解析)
    • [3.2 用法解析](#3.2 用法解析)
  • [4. AlignmentDirectional组件](#4. AlignmentDirectional组件)
    • [4.1 原理解析](#4.1 原理解析)
  • [5. AlignmentGeometryTween 抽象类](#5. AlignmentGeometryTween 抽象类)
  • [6. AlignmentTween组件（对其补间动画）](#6. AlignmentTween组件（对其补间动画）)

[1. 概述](#1. 概述)

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

[2. AlignmentGeometry抽象类](#2. AlignmentGeometry抽象类)

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

AlignmentGeometry代表了可以用于定位和对齐小部件的不同位置或偏移方式。这个抽象类有两个主要的具体实现类：Alignment 和 AlignmentDirectional，它们分别用于不同的场景，具有不同的坐标系和方向。

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

[3. Alignment 组件](#3. Alignment 组件)

[3.1 原理解析](#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 通过 x 和 y 两个参数来表示对齐位置，其中 x 控制水平位置，y 控制垂直位置。在给定矩形的情况下，可以通过以下公式将 Alignment 转换为坐标系中的点坐标：

c 复制代码 
点坐标 = (x * 矩形宽度 / 2 + 矩形宽度 / 2, y * 矩形高度 / 2 + 矩形高度 / 2)

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

[3.2 用法解析](#3.2 用法解析)

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

dart 复制代码 
Align(
  alignment: Alignment.center,
  child: Text('Centered Text'),
)

再如：

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

又如创建动画效果：

dart 复制代码 
// 创建一个 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组件](#4. AlignmentDirectional组件)

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

[4.1 原理解析](#4.1 原理解析)

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

  1. 在 AnimatedBuilder 中使用 AlignmentDirectional 创建动画：
dart 复制代码 
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(),
    );
  },
)

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

dart 复制代码 
AlignmentDirectional.topStart // 位于文本方向下的左上角
AlignmentDirectional.bottomEnd // 位于文本方向下的右下角

如：

dart 复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  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 抽象类](#5. AlignmentGeometryTween 抽象类)

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

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

[6. AlignmentTween组件（对其补间动画）](#6. AlignmentTween组件（对其补间动画）)

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

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

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

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

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

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

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

    dart 复制代码 
    Alignment beginAlignment = Alignment.topLeft;
Alignment endAlignment = Alignment.bottomRight;
AlignmentTween alignmentTween = AlignmentTween(begin: beginAlignment, end: endAlignment);

  2. 创建一个 AnimationController 以控制动画的执行：

    dart 复制代码 
    AnimationController controller = AnimationController(
  duration: Duration(seconds: 2), // 设置动画持续时间
  vsync: this, // 通常用于 State 对象中
);

  3. 使用 alignmentTween.animate(controller) 来生成动画对象：

    dart 复制代码 
    Animation<Alignment> animation = alignmentTween.animate(controller);

  4. 在需要更新小部件位置的地方使用 AnimatedBuilder 或其他适当的小部件包装，以便在动画过程中更新小部件的位置：

    dart 复制代码 
    AnimatedBuilder(
  animation: animation,
  builder: (context, child) {
    return Align(
      alignment: animation.value,
      child: YourWidget(), // 替换为要执行动画的小部件
    );
  },
)

  5. 启动动画，例如在按钮点击或初始化时：

    dart 复制代码 
    controller.forward(); // 启动动画

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

一个例子：

dart 复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyAnimatedWidget(),
    );
  }
}

class MyAnimatedWidget extends StatefulWidget {
  const MyAnimatedWidget({super.key});

  @override
  State<MyAnimatedWidget> createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Alignment> _animation;

  @override
  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();
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放动画控制器
    super.dispose();
  }

  @override
  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),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
相关推荐
Python私教3 小时前
macOS 中搭建 Flutter 开发环境
flutter·macos
明似水7 小时前
掌握 Flutter 中的 `Overlay` 和 `OverlayEntry`：弹窗管理的艺术
javascript·flutter
Flutter社区17 小时前
使用 Flutter 3.19 更高效地开发
flutter·dart
Forever不止如此20 小时前
【CustomPainter】绘制圆环
flutter·custompainter·圆环
wills77721 小时前
Flutter Error: Type ‘UnmodifiableUint8ListView‘ not found
flutter
AiFlutter2 天前
Flutter之Package教程
flutter
Mingyueyixi2 天前
Flutter Spacer引发的The ParentDataWidget Expanded(flex: 1) 惨案
前端·flutter
crasowas2 天前
Flutter问题记录 - 适配Xcode 16和iOS 18
flutter·ios·xcode
老田低代码3 天前
Dart自从引入null check后写Flutter App总有一种难受的感觉
前端·flutter
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04CCF-CSP认证考试 202406-3 文本分词 100分题解05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07软件工程从理论到实践客观题汇总(头歌第一章至第八章)08yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10实战 | 基于YOLOv9和OpenCV实现车辆跟踪计数（步骤 + 源码）