Flutter组件学习（四）—— 布局组件Row和Column

序言
之前几篇文章介绍了Flutter——Text文字组件，Flutter——Image图片组件，Flutter——TextFiled输入框组件，上面的这些组件可以说是一些直接能“看的到”样式组件，接下来我会带大家一起来学习 Flutter 中的一些“看不到”的布局组件，老规矩，先上图：

介绍
我们都知道，在Android中有几大常用布局，LinearLayout，RelativeLayout，FrameLayout，GridLayout 等等，在 Flutter 中也有类似的一些布局，比如我们今天要讲的 Row/Column 布局；看字面意思我们大概就能知道，这是一个横向布局和一个纵向布局，没错，这两个就对应 LinearLayout 中 orientation 的 horizontal 和 vertical 属性，下面来了解一下这两个布局的用法。

构造方法

 1Row({ 2 Key key, 3 MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, 4 MainAxisSize mainAxisSize = MainAxisSize.max, 5 CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, 6 TextDirection textDirection, 7 VerticalDirection verticalDirection = VerticalDirection.down, 8 TextBaseline textBaseline, 9 List<Widget> children = const <Widget>[], 10})

因为这两个的构造方法都是一样的，用法也是一样的，只是方向上的不同，所以我们分析一个就好了：

1、mainAxisAlignment
这个属性用来设置主轴的对齐方式，何为主轴？如果当前是 Row 组件，那么主轴就是水平的，如果当前是 Row 布局，那么主轴就是水平的，这一点有点类似前端的 flex 布局，也有点类似于 Android 中的 ConstraintLayout 布局，它的值有六种：

可能上面的文字说明有点绕，具体效果可以看一下下面这张图：

2、mainAxisSize
这个属性用来设置 Row/Column 布局的宽高值，有两个值可以设置:

具体效果，看下面这张图就一目了然了：

3、crossAxisAlignment
这个属性用来控制非主轴的对齐方式，比如说当你使用 Row 布局的时候，可以设置竖直方向上的对齐方式，Column 也是一样，它的值有五种：

具体效果看下图：

4、textDirection
这个属性用来控制 Row 布局中内部子组件的摆放顺序，有两种：

具体效果如下图所示：

5、verticalDirection
这个属性用来控制 Column 布局中内部子组件的摆放顺序，有两种：

具体效果如下图所示：

6、textBaseline
这个属性也是用来设置子组件对齐的，只不过对齐的是字符的基线，有两个值：

需要注意的是，上文说到，这个需要配合 crossAxisAlignment 属性来使用，来看一下具体的效果：

原文发布时间为：2018-12-17
本文作者：24K纯帅豆
本文来自云栖社区合作伙伴“ IT先森养成记”，了解相关信息可以关注“cyg_24kshign”微信公众号