布局对于移动开发来说,是开发页面的第一步,只有掌握了布局,才能做到心里明白,才能更好、更巧妙的布局。我iOS 一点点的从demo 实践中学习Flutter布局。避免不了从iOS 的布局角度尝试,但是发现Flutter 更iOS 区别很大,Flutter 的布局和安卓、H5的布局非常相似。我只能一点一点的琢磨学习。根据一篇写的不错的文章,加深理解。
Column
1、mainAxisAlignment:主轴布局方式,column主轴方向是垂直的方向
默认值:MainAxisAlignment.start:
-
start ,沿着主轴方向(垂直方向)顶部对齐;
-
end,沿着主轴方向(垂直方向)底部对齐;
-
center,沿着主轴方向(垂直方向)居中对齐;
-
spaceBetween ,沿着主轴方向(垂直方向)平分剩余空间;
-
spaceAround,把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个child的前面,和最后一个child的后面;
-
spaceEvenly,把剩余空间平分n+1份,然后平分所有的空间,请注意和spaceAround的区别;
2、crossAxisAlignment: 交叉轴的布局方式,对于column来说就是水平方向的布局方式
默认值:CrossAxisAlignment.center,默认是水平居中
-
start ,垂直主轴方向(水平方向)左侧对齐;
-
end,垂直主轴方向(水平方向)右侧对齐;
-
center,垂直主轴方向(水平方向)居中对齐;
-
stretch ,垂直主轴方向(水平方向)拉伸子child;
-
baseline,这个要和textBaseline一起使用,;
3、verticalDirection:就是子child的垂直布局方向,向上还是向下
new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
verticalDirection: VerticalDirection.down,
// textDirection:,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Container(
color: Colors.red,
height: 30,
width: 30,
),
Container(
color: Colors.blue,
height: 30,
width: 30,
),
Container(
color: Colors.yellow,
height: 30,
width: 30,
),
],
),
),
默认值:VerticalDirection.down 也就是从上到下的布局
down ,从上向下布局,上图示例我的代码是红、蓝、黄;
up,反过来从下向上布局,反过来就是黄、蓝、红;
认真揣摩它的奥妙,慢慢的就能掌握和iOS 一样的布局了!漫漫Flutter 布局路啊!
编辑参看 作者:liu_520
链接:https://www.jianshu.com/p/1d003ab6c278