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

序言

之前几篇文章介绍了
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 children = const [],
})

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

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