Flutter mainAxisAlignment和crossAxisAlignment

MainAxisAlignment(主轴)和CrossAxisAlignment(交叉轴)常用于Row和Column控件中,主要是用来控制子控件排列的位置,并可以配合textDirection和verticalDirection属性来控制子控件排列的方向及改变MainAxisAlignment和CrossAxisAlignment的起始位置。

垂直布局:y轴为主轴,x轴为副轴!


Flutter mainAxisAlignment和crossAxisAlignment_第1张图片
image.png

水平布局:x轴为主轴,y轴为副轴!


Flutter mainAxisAlignment和crossAxisAlignment_第2张图片
image.png
MainAxisSize.min : 主轴方向,包裹住 childre 即可
MainAxisSize.max主轴方向,铺满 ( Row 或者 Column )的父 Widget 的大小。
在Row中MainAxisAlignment的效果
Flutter mainAxisAlignment和crossAxisAlignment_第3张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.41.30.png

Flutter mainAxisAlignment和crossAxisAlignment_第4张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.41.33.png

从上图可以看出,如果没有设置 Main Axis Size 的时候 设置MainAxisAlignment.start和 MainAxisAlignment.end效果一样的
下面我们设置Main Axis Size.max

MainAxisAlignment.start
Flutter mainAxisAlignment和crossAxisAlignment_第5张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.44.12.png
MainAxisAlignment.end
Flutter mainAxisAlignment和crossAxisAlignment_第6张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.44.14.png
MainAxisAlignment.center
Flutter mainAxisAlignment和crossAxisAlignment_第7张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.45.58.png
MainAxisAlignment.spaceEvenly

将主轴空白区域均分,使各个子控件间距相等


Flutter mainAxisAlignment和crossAxisAlignment_第8张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.47.10.png
MainAxisAlignment.spaceAround

将主轴空白区域均分,使中间各个子控件间距相等,首尾子控件距边缘间距为中间子控件间距的一半


Flutter mainAxisAlignment和crossAxisAlignment_第9张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.47.47.png
MainAxisAlignment.spaceBetween

将主轴空白位置进行均分,排列子元素,首尾子控件距边缘没有间隙


Flutter mainAxisAlignment和crossAxisAlignment_第10张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.48.45.png
在Row中crossAxisAlignment的效果
crossAxisAlignment.start
Flutter mainAxisAlignment和crossAxisAlignment_第11张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.51.10.png
crossAxisAlignment.end
Flutter mainAxisAlignment和crossAxisAlignment_第12张图片
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.51.34.png

其实的就不一一演示了 可以下载demo来看看
Demo 下载

你可能感兴趣的:(Flutter mainAxisAlignment和crossAxisAlignment)