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 下載