序言
之前几篇文章介绍了Flutter——Text文字组件，Flutter——Image图片组件，Flutter——TextFiled输入框组件，上面的这些组件可以说是一些直接能“看的到”样式组件，接下来我会带大家一起来学习 Flutter 中的一些“看不到”的布局组件，老规矩，先上图：
image
介绍
我们都知道，在Android中有几大常用布局，LinearLayout，RelativeLayout，FrameLayout，GridLayout 等等，在 Flutter 中也有类似的一些布局，比如我们今天要讲的 Row/Column 布局；看字面意思我们大概就能知道，这是一个横向布局和一个纵向布局，没错，这两个就对应 LinearLayout 中 orientation 的 horizontal 和 vertical 属性，下面来了解一下这两个布局的用法。
构造方法
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
因为这两个的构造方法都是一样的，用法也是一样的，只是方向上的不同，所以我们分析一个就好了：
1、mainAxisAlignment
这个属性用来设置主轴的对齐方式，何为主轴？如果当前是 Row 组件，那么主轴就是水平的，如果当前是 Row 布局，那么主轴就是水平的，这一点有点类似前端的 flex 布局，也有点类似于 Android 中的 ConstraintLayout 布局，它的值有六种：
| 属性名称 | 样式 |
|---|---|
| start | 内部的子组件将从主轴起始位置开始排列（正向排列） |
| end | 内部的子组件将从主轴末尾位置开始排列（反向排列） |
| center | 内部的子组件将从主轴中间位置开始排列（居中） |
| spaceBetween | 内部的首尾子组件靠近首尾两端，其余子组件居中排列且组件间的间距一样 |
| spaceAround | 内部的子组件居中排列，且每个子组件的左右边距一样大 |
| spaceEvenly | 内部的子组件居中显示，每个空间的左边和右边都有相同的间距 |
可能上面的文字说明有点绕，具体效果可以看一下下面这张图：
image
2、mainAxisSize
这个属性用来设置 Row/Column 布局的宽高值，有两个值可以设置:
| 属性名称 | 样式 |
|---|---|
| max | 相当于match_parent |
| min | 相当于wrap_content |
具体效果，看下面这张图就一目了然了：
image
3、crossAxisAlignment
这个属性用来控制非主轴的对齐方式，比如说当你使用 Row 布局的时候，可以设置竖直方向上的对齐方式，Column 也是一样，它的值有五种：
| 属性名称 | 样式 |
|---|---|
| start | 内部的子组件将从非主轴起始位置开始排列（正向排列） |
| end | 内部的子组件将从非主轴末尾位置开始排列（反向排列） |
| center | 内部的子组件将从非主轴中间位置开始排列（居中） |
| stretch | 内部的子组件将从非主轴中间位置开始排列，并且完全填充非主轴方向 |
| baseline | 内部的子组件将从baseline的方向对齐，这个需要设置textBaseline属性，不然的话会报错 |
具体效果看下图：
image
4、textDirection
这个属性用来控制 Row 布局中内部子组件的摆放顺序，有两种：
| 属性名称 | 样式 |
|---|---|
| TextDirection.ltr | 从左至右排列 |
| TextDirection.rtl | 从右至左排列 |
具体效果如下图所示：
image
5、verticalDirection
这个属性用来控制 Column 布局中内部子组件的摆放顺序，有两种：
| 属性名称 | 样式 |
|---|---|
| VerticalDirection.up | 从下至上排列 |
| VerticalDirection.down | 从上至下排列 |
具体效果如下图所示：
image
6、textBaseline
这个属性也是用来设置子组件对齐的，只不过对齐的是字符的基线，有两个值：
| 属性名称 | 样式 |
|---|---|
| TextBaseline.ideographic | 用于对齐表意字符的水平线 |
| TextBaseline.alphabetic | 用于对齐字母字符的水平线 |
需要注意的是，上文说到，这个需要配合 crossAxisAlignment 属性来使用，来看一下具体的效果：
image
代码已上传至Github
公众号
欢迎关注我的个人公众号【IT先森养成记】，专注大前端技术分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技术；在这里你能得到的不止是技术上的提升，还有一些学习经验以及志同道合的朋友，赶快加入我们，一起学习，一起进化吧！！！
公众号：IT先森养成记
