Flutter mainAxisAlignment和crossAxisAlignment

• 2019 年 10 月 11 日
• 筆記

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

垂直布局：y轴为主轴，x轴为副轴!

水平布局：x轴为主轴，y轴为副轴!

MainAxisSize.min : 主轴方向，包裹住 childre 即可

MainAxisSize.max主轴方向，铺满 ( Row 或者 Column )的父 Widget 的大小。

在Row中MainAxisAlignment的效果

从上图可以看出，如果没有设置 Main Axis Size 的时候

设置MainAxisAlignment.start和 MainAxisAlignment.end效果一样的

下面我们设置Main Axis Size.max

MainAxisAlignment.start

MainAxisAlignment.end

MainAxisAlignment.center

MainAxisAlignment.spaceEvenly

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

MainAxisAlignment.spaceAround

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

MainAxisAlignment.spaceBetween

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

在Row中crossAxisAlignment的效果

crossAxisAlignment.start

crossAxisAlignment.end

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