FlutterのRow布局-入门学习
2021-05-04 本文已影响0人
SteamPY
代码案例
Row(
mainAxisAlignment:MainAxisAlignment.center,
children: <Widget>[
//....
]
),
这里Row作为一个组件,用于横向布局(类似android中LinearLayout中设置horizontal 水平方向,添加子布局,横向排列)
属性
mainAxisAlignment:
主轴布局方式,row主轴方向是水平方向
- start ,沿着主轴方向(水平方向)顶部对齐;
- end,沿着主轴方向(水平方向)底部对齐;
- center,沿着主轴方向(水平方向)居中对齐;
- spaceBetween ,沿着主轴方向(水平方向)平分剩余空间;
- spaceAround,把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个child的前面,和最后一个child的后面
- spaceEvenly,把剩余空间平分n+1份,然后平分所有的空间,请注意和spaceAround的区别
crossAxisAlignment:
交叉轴的布局方式,对于row来说就是垂直方向的布局方式
- start ,垂直主轴方向(垂直方向)顶部对齐;
- end,垂直主轴方向(垂直方向)底部对齐;
- center,垂直主轴方向(垂直方向)居中对齐;
- stretch ,垂直主轴方向(垂直方向)拉伸子child;
- baseline,这个要和textBaseline一起使用,
看了图片,是不是应该不用过多解释了吧,希望对新手有帮助