【布局 widget】Flutter Align

Align 平时用的最多的恐怕就是居中，居左居右定位这样的功能了，实际上 Align 可以让 child 相对 Align 显示在任意位置。

对于布局组件，我们按布局三板斧来研究。

1. 确定 child 的 Constrains
2. 确定 自己的 大小
3. 摆放 child

child 的 Constrains

child!.layout(constraints.loosen(), parentUsesSize: true);
复制代码

Align 不会修改 constraints 的值，但会修改 tight 为 loose，这是 Align 的作用之一。

Align 的大小

如果没有 child， Align 会尽量大。

有 child ，但没有 widthFactor 和 heightFactor 参数，Align 会尽量大。

有 child， 有 widthFactor，

width = child!.size.width * ( widthFactor ?? 1.0);
复制代码

有 child， 有 heightFactor，

var height = child!.size.height * (heightFactor ?? 1.0);
复制代码

最后，Align Size 要在 constrains 的允许范围内.

如果 contrains 是 tight，widthFactor，heightFactor 没有效果。

摆放 child

Align 根据自己的尺寸和 child 的尺寸摆放 child。具体负责摆放的是 alongOffset 方法。

Offset alongOffset(Offset other) {
    final double centerX = other.dx / 2.0;
    final double centerY = other.dy / 2.0;
    return Offset(centerX + x * centerX, centerY + y * centerY);
  }
复制代码

参数 other 是要摆放的 child 的尺寸。

dx,dy 是影响 child 摆放位置的变量，代表矩形内的一个点。dx,dy 是哪里来的呢？就是我们传入的 alignment 参数，比如 Alignment.center 就相当于 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) 在矩形坐标体系中代表一个点： point (x * w/2 + w/2, y * h/2 + h/2) ，w 表示宽度，h 代表高度。

center

Center 是 Align 的子类，因为 Align 默认是 Alignment.center ，所以 Center 构造函数中不需要传 alignment 参数就是居中了。

class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ super.key, super.widthFactor, super.heightFactor, super.child });
}
复制代码

用 Cetner 的意义在于语义会更明确。如果你愿意也可以弄一个 TopLeft 出来，只不过，这样会导致类爆炸，而且也没有象 Center 这样常用。

在 Stack 中摆放子组件

Stack(
     alignment: Alignment.center,
     children: [
       Container(
         width: 50,
         height: 50,
         color: Colors.green,
       ),
       Container(
         width: 30,
         height: 30,
         color: Colors.amber,
       ),
       Align(
           alignment: Alignment.topLeft,
           child: Container(
             width: 50,
             height: 50,
             color: Colors.blue,
           ))
     ],
   )
复制代码

Stack  有 alignment 属性可以摆放所有 widget，如果想单独摆放某个 widget ，用 Align。

FractionalOffset

Align 的参数  alignment 的类型是 AlignmentGeometry，只要是 AlignmentGeometry 的子类都可以。Alignment 是AlignmentGeometry 的子类， FractionalOffset 是 Alignment 的子类，所以FractionalOffset 也可以用作 alignment 参数。  FractionalOffset 的特点是以左上角为参考点。比如 FractionalOffset(0.5,0.5)和 Alignment(0,0) 是等价的。

AlignmentDirectional

AlignmentDirectional 是 AlignmentGeometry 的子类，TextDirection.ltr 的条件下，效果上和 Alignment 一样。TextDirection.rtl 的条件下，效果相反。