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

未完待续

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值