Flutter布局篇（1）--水平和垂直布局详解

版权声明：本文首发在公众号Flutter那些事，未经受权，严禁转载。

本文示例代码发布在Github，地址为: https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/README-CN.md

先来看看本文的目录，以下图所示：

在原生Android开发中，咱们常常会用LinearLayout来达到水平或垂直方向的布局，在Flutter中有两个经常使用的组件也可以作到相似的效果，分别是Row和Column组件，Row组件主要功能是处理水平方向的布局，Column组件主要功能是处理垂直方向的布局。下文会具体讲解在Flutter中如何使用Row和Column组件实现LinearLayout效果，以及二者之间的对比，方便你们对比学习。

---

LinearLayout 里面的android:orientation="horizontal”属性至关于Row组件，LinearLayout 里面的 android:orientation="vertical”属性至关于Column组件。

Flutter和LinearLayout的对比图示以下：

Row的使用示例代码以下所示：

Column的使用示例代码以下所示：

Flutter中的Row以及Column使用效果图以下所示：

这里是Android里面的使用（因为Flutter效果和Android的是同样的，后文的安卓效果图就再也不展现了）

---

LinearLayout 里面的android:layout_width="wrap_content"或者 android:layout_height="wrap_content"属性至关于Row/Column组件里面的 MainAxisSize.min 属性。

LinearLayout 里面的android:layout_width="match_parent"或者android:layout_height="match_parent"属性至关于Row/Column组件里面的 MainAxisSize.max 属性。Row/Column组件若是没有设置mainAxisSize属性，默认为max属性值。第二小节中的Row/Column组件咱们并无设置mainAxisSize属性，可是咱们能够看到它的效果是MainAxisSize.max 属性的效果（Row自动填充宽为屏幕的宽，Column自动填充高为屏幕的高）。

Flutter和LinearLayout的对比图示以下：

Flutter使用图解以下：

---

这个是最复杂的，须要重点掌握。gravity属性在Android里面是用于指定控件自己或子孩子控件的对齐属性。在Flutter中咱们可使用 Row/Column组件 的 MainAxisAlignment 以及 CrossAxisAlignment 实现控件的对齐效果。

MainAxisAlignment 是设置主轴方向的对齐方式。若是咱们给 Row 组件设置 MainAxisAlignment 属性，那么它的主轴为水平方向。若是咱们给 Column 组件设置 MainAxisAlignment 属性，那么它的主轴为垂直方向。

MainAxisAlignment 有6个属性值，默认值为start，分别是：

一、MainAxisAlignment.start，将子控件放在主轴的起始位置。
二、MainAxisAlignment.end，将子控件放在主轴末尾。
三、MainAxisAlignment.center，将子控件放在主轴中间位置。
复制代码

下面这三个属性须要特别关注一下：

// 将主轴方向上的空白区域等分，使得子孩子控件之间的空白区域相等，
// 两端的子孩子控件都靠近首尾，没有间隙。
四、MainAxisAlignment.spaceBetween 

// 将主轴方向上的空白区域等分，使得子孩子控件之间的空白区域相等，
// 两端的子孩子控件都靠近首尾，首尾子孩子控件的空白区域为1/2。
五、MainAxisAlignment.spaceAround 

// 将主轴方向上的空白区域等分，使得子孩子控件之间的空白区域相等，包括首尾。
六、MainAxisAlignment.spaceEvenly

复制代码

CrossAxisAlignment是设置交叉轴方向的对齐方式，好比当前给 Row 组件设置 CrossAxisAlignment 属性，那么它的交叉轴为垂直方向。若是咱们给 Column 组件设置 CrossAxisAlignment 属性，那么它的交叉轴为水平方向。

CrossAxisAlignment 有5个属性值，默认值为center，分别是：

CrossAxisAlignment.start, 子孩子控件显示在交叉轴的起始位置。
CrossAxisAlignment.end, 子孩子控件显示在交叉轴的末尾位置。
CrossAxisAlignment.center, 子孩子控件显示在交叉轴的中间位置。
CrossAxisAlignment.stretch, 子孩子控件彻底填充交叉轴方向的空间。
CrossAxisAlignment.baseline, 让子孩子控件的baseline在交叉轴方向对齐。
复制代码

具体的示例以下：

（1）Row的子孩子组件对齐

下面这个是Row的子孩子组件对齐的示例：

示例中设置的主轴的属性值是：MainAxisAlignment.spaceEvenly，交叉轴的属性值是：CrossAxisAlignment.end

使用图示以下图所示：

（2）Column的子孩子组件对齐

下面这个是Column的子孩子组件对齐的示例：

示例中设置的主轴的属性值是：MainAxisAlignment.spaceEvenly，交叉轴的属性值是：CrossAxisAlignment.end

使用图示以下图所示：

---

在Android中 layout_weight 是LinearLayout里面的属性，它是用来给子孩子设置权重的，表示给子孩子按照设置的比例去分配空间。在Flutter中咱们可使用 Expanded 包裹Row或Column组件,使用 Expanded 组件里面的 flex属性 去实现一样的效果。

先来看看Row是会如何给子孩子设置权重的，示例代码以下所示：

上例中我写了一个Row，里面有3个并排的Icon组件，权重分别是一、二、5，为了好区分，我给每一个Icon加了不一样的背景颜色。为了代码更优雅，我封装了一个buildIcon(IconData icon, {int flex = 1, Color color}) 函数，IconData是必须传入的参数; 参数2是权重，默认值为1; 参数3是组件的背景颜色，参数2和参数3是可选参数，能够根据须要进行传入。

咱们看看效果图，如图所示：

同理，咱们只须要把上例中的 new Row替换成new Column就能够实现垂直方向设置权重，如上图右边所示。

---

在Flutter中的Row或Column中关于 direction 有2个须要掌握的属性，分别是：textDirection 以及verticalDirection。其中textDirection属性在Row组件中起到很大做用，verticalDirection属性在Column组件中起到很大做用。

textDirection 的属性值为 TextDirection.ltr，表示全部的子控件都是从左到右顺序排列，这是默认值。若是为TextDirection.rtl 表示从右边开始向左边倒序排列。

verticalDirection 的属性值为 VerticalDirection.down, 表示全部的子控件都是从上到下顺序排列。若是为VerticalDirection.up 从底部开始向上倒序排列。

先来看看Row中是如何使用的，咱们这里使用的 textDirection 属性，是仍是拿本章一开始的那个例子作修改，核心代码以下所示：

再来看看Column是如何使用的，能够看出只须要把 textDirection 属性换成 verticalDirection 就能够了。是否是很简单？

咱们看一下效果图，如图所示：