flutter中的Row和Column对齐布局

本文详细介绍了Flutter中Row和Column组件的构造方法,包括MainAxisAlignment和CrossAxisAlignment属性的用法,以及它们如何影响子控件的排列和对齐。通过对这些属性的理解,开发者可以更好地布局和组织UI元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Column和Row使用的方法一样,这里就写一个

Row的构造方法

  Row({
    Key key,  // key
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,  // 子控件放置方式
    MainAxisSize mainAxisSize = MainAxisSize.max,  // 子控件应该如何沿着主轴放置
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 子控件对齐方式
    TextDirection textDirection, // 从左到右,还是从右到左排序
    VerticalDirection verticalDirection = VerticalDirection.down,  // 垂直排序
    TextBaseline textBaseline, // 对齐文本的水平线
    List<Widget> children = const <Widget>[], // 子控件
  })

MainAxisAlignment
这个是跟空间中的主轴等有关,而不能使多个子控件对齐

MainAxisAlignment.start,  // 尽可能靠近主轴的起点
MainAxisAlignment.end, // 尽可能靠近主轴末端的地方
MainAxisAlignment.center, // 尽可能近主轴中间的地方
MainAxisAlignment.spaceBetween, // 在子控件中间均匀地放置自由空间,第一个前和最后一个后无空间
MainAxisAlignment.spaceAround,  // 在子控件中间均匀地放置自由空间,同时也放置一半空间在第一个前和最后一个控件后。
MainAxisAlignment.spaceEvenly,  // 在第一个控件和最后一个控件之前和之后均匀地放置自由空间

crossAxisAlignment
子控件对齐方式,当子控件高度不一样时,如何被放置在中心轴,而MainAxisAlignment 决定了子控件间的间隔

CrossAxisAlignment.start,  // 子控件都父控件的项部
CrossAxisAlignment.end, // 子控件都在父控件的底部
CrossAxisAlignment.center, // 子控件居父控件的中部
CrossAxisAlignment.stretch, // 子控件填满横轴,( 使用此值时,子控件一定要设置width)

比如:
crossAxisAlignment 没设置之前
在这里插入图片描述
设置之后:
在这里插入图片描述
MainAxisAlignment设置之前
在这里插入图片描述
设置之后:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值