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

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

---

作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263
邮箱 ：[email protected]
本文地址：https://blog.csdn.net/qq_28550263/article/details/133418003

---

---

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抽象类

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.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 转换为坐标系中的点坐标：

点坐标 = (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 表示右侧边缘。



## 4.2 用法解析

`AlignmentDirectional` 可以在需要处理文本方向的情况下使用。例如：

```dart
Align(
  alignment: AlignmentDirectional(0.0, 0.0), // 在文本方向下水平居中和垂直居中
  child: YourWidget(),
)

2. 在 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 {
  @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 抽象类

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});

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