布局类Widget Row和Column-优快云博客

本文深入解析Flutter中Row与Column布局组件的使用方法及属性设置，包括子组件的排列方式、对齐策略等，帮助开发者掌握核心布局技巧。

最外侧对组件进行布局的大容器

线形布局Row、Column

Row(
  textDirection:TextDirection.ltr,//子widget排序
  mainAxisSize: MainAxisSize.max,//ROW在主轴方向占用空间
  mainAxisAlignment:MainAxisAlignment.start,
//子widget在ROW所占用水平空间内对齐方式
  verticalDirection:VerticalDirection.down,//ROW纵轴的对齐方式
  crossAxisAlignment:crossAxisAlignment.start,//子widget在纵轴的对齐方式
  children:[],//子widget数组
)

mainAxisSize：MainAxisSize.max(默认，占据主轴最大) || MainAxisSize.min（根据所有子widget宽度确认ROW的宽度）

mainAxisAlignment:MainAxisAlignment.start(end、center)；会根据textDirection取值判定

MainAxisAlignment:
    center:主轴居中对齐
    end:主轴末尾
    spaceAround:空白区域平分，第一个和最后一个是一半
    spaceBetween:首尾没间隙，其他空白区域平分
    spaceEvenly:整体平分
    start:从起点开始

verticalDirection:VerticalDirection.up(down);纵轴上起始位置

crossAxisAlignment:CrossAxisAlignment.start(end、center)；在纵轴上的对齐方式

CrossAxisAlignment:
    baseline:
    center
    end
    stretch
    start

特殊：如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有对最外面的Row或Column会占用尽可能大的空间，里面Row或Column所占用的空间为实际大小

expanded只能放在flex widget中

expanded：child

Container：child

转载于:https://www.cnblogs.com/shui1993/p/11139839.html