对齐

Align

Align 组件可以调整子组件的位置,并且可以根据子组件的宽高来确定自身的的宽高,定义如下:

Align({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})

参数

alignment

对齐方式, 参考 Alignment

widthFactor 和 heightFactor

用于确定 Align 组件本身宽高的属性;它们是两个缩放因子,会分别乘以子元素的宽、高,最终的结果就是 Align 组件的宽高。如果值为 null,则组件的宽高将会占用尽可能多的空间。

Alignment

Alignment 继承自 AlignmentGeometry,表示矩形内的一个点,他有两个属性 x、y,分别表示在水平和垂直方向的偏移

0 为中, -1 为 start(上、左), 1 为 end(下、右), 可以大于 1 或小于 0, 这样则离开边界向外延伸

  • Alignment(x, y) 确定 x,y 轴位置
  • Alignment.topLeft = Alignment(-1.0, -1.0)
  • Alignment.topCenter = Alignment(0.0, -1.0)
  • Alignment.topRight = Alignment(1.0, -1.0)
  • Alignment.centerLeft = Alignment(-1.0, 0.0)
  • Alignment.center = Alignment(0.0, 0.0)
  • Alignment.centerRight = Alignment(1.0, 0.0)
  • Alignment.bottomLeft = Alignment(-1.0, 1.0)
  • Alignment.bottomCenter = Alignment(0.0, 1.0)
  • Alignment.bottomRight = Alignment(1.0, 1.0)

FractionalOffset

FractionalOffset 继承自 Alignment,它和 Alignment 唯一的区别就是坐标原点不同!FractionalOffset 的坐标原点为矩形的左侧顶点,这和布局系统的一致,所以理解起来会比较容易。FractionalOffset 的坐标转换公式为:

实际偏移 = (FractionalOffse.x * childWidth, FractionalOffse.y * childHeight)

示例:

Container(
  height: 120.0,
  width: 120.0,
  color: Colors.blue[50],
  child: Align(
    alignment: FractionalOffset(0.2, 0.6),
    child: FlutterLogo(
      size: 60,
    ),
  ),
)

Center

Center 继承自 Align, 可将元素直接居中对齐

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress