Align 平时用的最多的恐怕就是居中,居左居右定位这样的功能了,实际上 Align 可以让 child 相对 Align 显示在任意位置。
对于布局组件,我们按布局三板斧来研究。
- 确定 child 的 Constrains
- 确定 自己的 大小
- 摆放 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 的条件下,效果相反。