0%

Flutter Widget之Row、Column

Row和Column分别在横向和纵向对子Widget进行布局。

  • 对于Row来讲,横向是主轴,纵向是交叉轴。
  • 对于Column来讲,横向是交叉轴,纵向是主轴。

针对主轴和交叉轴,不同大小的子Widget该如何对齐呢?Flutter提供了下列属性:

MainAxisAlignment:主轴对齐方式

属性值 解释 图示
start 靠近主轴的开始
end 靠近主轴的末尾
center 靠近主轴中间
spaceBetween 剩余空间在孩子中间平分
spaceAround 剩余空间围绕孩子平分
spaceEvenly 剩余空间在孩子之间均等分配

CrossAxisAlignment:交叉轴对齐方式

属性值 解释 图示
start 左对齐(Column)或上对齐(Row)
end 右对齐(Column)或下对齐(Row)
center 中间对齐
stretch 拉伸
baseline 基线对齐,需要配合textBaseline属性使用
赏你一杯咖啡