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

序言

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

介绍

咱们都知道，在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>[],
})
复制代码

由于这两个的构造方法都是同样的，用法也是同样的，只是方向上的不一样，因此咱们分析一个就行了：

一、mainAxisAlignment

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

属性名称	样式
start	内部的子组件将从主轴起始位置开始排列（正向排列）
end	内部的子组件将从主轴末尾位置开始排列（反向排列）
center	内部的子组件将从主轴中间位置开始排列（居中）
spaceBetween	内部的首尾子组件靠近首尾两端，其他子组件居中排列且组件间的间距同样
spaceAround	内部的子组件居中排列，且每一个子组件的左右边距同样大
spaceEvenly	内部的子组件居中显示，每一个空间的左边和右边都有相同的间距

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

二、mainAxisSize

这个属性用来设置 Row/Column 布局的宽高值，有两个值能够设置:

属性名称	样式
max	至关于match_parent
min	至关于wrap_content

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

三、crossAxisAlignment

这个属性用来控制非主轴的对齐方式，好比说当你使用 Row 布局的时候，能够设置竖直方向上的对齐方式，Column 也是同样，它的值有五种：

属性名称	样式
start	内部的子组件将从非主轴起始位置开始排列（正向排列）
end	内部的子组件将从非主轴末尾位置开始排列（反向排列）
center	内部的子组件将从非主轴中间位置开始排列（居中）
stretch	内部的子组件将从非主轴中间位置开始排列，而且彻底填充非主轴方向
baseline	内部的子组件将从baseline的方向对齐，这个须要设置textBaseline属性，否则的话会报错

具体效果看下图：

四、textDirection

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

属性名称	样式
TextDirection.ltr	从左至右排列
TextDirection.rtl	从右至左排列

具体效果以下图所示：

五、verticalDirection

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

属性名称	样式
VerticalDirection.up	从下至上排列
VerticalDirection.down	从上至下排列

具体效果以下图所示：

六、textBaseline

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

属性名称	样式
TextBaseline.ideographic	用于对齐表意字符的水平线
TextBaseline.alphabetic	用于对齐字母字符的水平线

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

代码已上传至Github

公众号

欢迎关注个人我的公众号【IT先森养成记】，专一大前端技术分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技术；在这里你能获得的不止是技术上的提高，还有一些学习经验以及志同道合的朋友，赶快加入咱们，一块儿学习，一块儿进化吧！！！