Flutter - Align 对齐与相对定位

只想简单的调整一个子元素在父元素中的位置的话，使用Align组件会更简单一些

Align({
  Key key,
  this.alignment = Alignment.center, // 调整内部子控件的位置
  this.widthFactor,  
  //为null时  尽可能的占最大位置  , 他是一种系数, 
  //通过 widthFactor * zi控件的width 来决定Align 的宽度
  this.heightFactor,//同上
  Widget child,
})

示例1

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

注意 : FractionalOffset(0.5,0.5) 应为这里传的0.5,0.5 所以在中间显示

Align(
  widthFactor: 2,
  heightFactor: 2,
  alignment: FractionalOffset(0.1,0.5),
  child: FlutterLogo(
    size: 60,
  ),
),

没有背景了 ,因为FractionalOffset(0.1,0.5), 这里是0.1 所有靠左一点

Center

//Center继承自Align 
//但没有 alignment 属性, 
//所以只能默认居中显示了 ,
const Center({ super.key, super.widthFactor, super.heightFactor, super.child });

		Center(
          child: Text(""),
        )
// 使用时,因为没有设置 widthFactor ,heightFactor 的值 ,
// 所有内部Text("") 会居中显示

AlignmentGeometry 是一个抽象类，它有两个常用的子类：Alignment和 FractionalOffset

未完待续