MainAxisAlignment(主轴)和CrossAxisAlignment(交叉轴)常用于Row和Column控件中,主要是用来控制子控件排列的位置,并可以配合textDirection和verticalDirection属性来控制子控件排列的方向及改变MainAxisAlignment和CrossAxisAlignment的起始位置。
垂直布局:y轴为主轴,x轴为副轴!
image.png
水平布局:x轴为主轴,y轴为副轴!
image.png
MainAxisSize.min : 主轴方向,包裹住 childre 即可
MainAxisSize.max主轴方向,铺满 ( Row 或者 Column )的父 Widget 的大小。
在Row中MainAxisAlignment的效果
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.41.30.png
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
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.44.12.png
MainAxisAlignment.end
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.44.14.png
MainAxisAlignment.center
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.45.58.png
MainAxisAlignment.spaceEvenly
将主轴空白区域均分,使各个子控件间距相等
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.47.10.png
MainAxisAlignment.spaceAround
将主轴空白区域均分,使中间各个子控件间距相等,首尾子控件距边缘间距为中间子控件间距的一半
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.47.47.png
MainAxisAlignment.spaceBetween
将主轴空白位置进行均分,排列子元素,首尾子控件距边缘没有间隙
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.48.45.png
在Row中crossAxisAlignment的效果
crossAxisAlignment.start
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.51.10.png
crossAxisAlignment.end
Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-27 at 17.51.34.png
其实的就不一一演示了 可以下载demo来看看
Demo 下载