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. 概述

类名	描述
`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` 之间进行插值的动画。它通常用于动画普通的对齐位置的平滑过渡。

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 表示右侧边缘。

<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(),
)

在 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 动画，通常按照以下步骤操作：

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

Alignment beginAlignment = Alignment.topLeft;
Alignment endAlignment = Alignment.bottomRight;
AlignmentTween alignmentTween = AlignmentTween(begin: beginAlignment, end: endAlignment);

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

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

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

Animation<Alignment> animation = alignmentTween.animate(controller);

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

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

启动动画，例如在按钮点击或初始化时：
```
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),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}