如果你是 flutter 的新手，通过本文，你可以完全掌握 Row、Column 组件的用法，解答你心中已久的疑惑，快速上手项目开发。又或者你对 flutter 有一定开发经验，也许本文同样可以给你帮助与启发。
Row 和 Column 用在哪里
在 flutter 中，Row 和 Column 组件都是布局类的组件，他们是用来管理多个子组件的排列方式的。写过 Android 原生的同学都知道，他们和 LinearLayout 非常的相似，通过设置 LinearLayout 的 orientation 属性可以控制子 View 的排列方式是水平还是垂直的。在 flutter 中，Row 用来水平排列子组件，Column 用来垂直排列子组件。
一句话概括就是，Row 水平排列组件，Column 垂直排列组件。
主轴和纵轴
首先介绍两个重要的概念：主轴和纵轴。Row 组件水平排列，所以它的主轴是水平方向，纵轴是垂直方向。Column 组件垂直排列，所以它的主轴是垂直方向，纵轴是水平方向。轴的对齐方式规定了所有子组件在轴上应该如何排列，记住这句话非常的重要！
下面代码中有一个 Row 组件，包含了三个 Container，他们的高度各不相同。
body: Row(
children: [
Container(
width: 50,
height: 100,
color: Colors.grey,
),
Container(
width: 50,
height: 200,
color: Colors.yellow,
),
Container(
width: 50,
height: 300,
color: Colors.red,
),
],
),
可以看到，Row 组件在不指定任何属性的情况下，在主轴（水平方向）所有子组件默认是沿轴从左到右排列的（左对齐），在纵轴（垂直方向）所有子组件默认在纵轴的中间位置。
这和 Row 组件的构造函数是一致的，默认指定主轴对齐方式是从左到右，纵轴的对齐方式是居中。
属性讲解
我以 Row 组件来说明下面这些属性该如何用，并展示其效果。Column 参数和 Row一样，不同的是布局方向为垂直，主轴纵轴正好相反，读者可类比 Row 来理解。
MainAxisAlignment
主轴对齐方式，Row 组件的一个属性，规定了所有子组件在主轴上应该如何排列。在上面代码的基础上，为 Row 指定 MainAxisAlignment 属性，值为 MainAxisAlignment.center。规定所有子组件应该在主轴的中间排列，图1就变成了图2。
mainAxisAlignment: MainAxisAlignment.center,
CrossAxisAlignment
纵轴对齐方式，规定了所有子组件在纵轴上应该如何排列。在上面代码的基础上，增加如下代码，规定所有子组件应该沿纵轴从左到右排列，图2就变成了图3。
crossAxisAlignment: CrossAxisAlignment.start,
TextDirection
在 Row 组件中，表示水平方向子组件的布局顺序(是从左往右还是从右往左)。在上面代码的基础上，增加如下代码，TextDirection.rtl 表示子组件的从右到左布局，图3就变成了图4。
textDirection: TextDirection.rtl,
试试将主轴的对齐方式由居中改为从左到右，即
mainAxisAlignment: MainAxisAlignment.center,
改为
mainAxisAlignment: MainAxisAlignment.start,
奇怪的事情发生了，子组件并没有像我们想的那样沿主轴从左到右排列，结果如下图。如何解释这个现象呢？那就是设置textDirection: TextDirection.rtl会让主轴的方向变为从右到左，所以设置mainAxisAlignment: MainAxisAlignment.start就会让子组件右对齐了。读者也可以这么理解：textDirection是mainAxisAlignment的参考系。
VerticalDirection
和 TextDirection 类似，它是 CrossAxisAlignment 的参考系，这个就不细讲了。
MainAxisSize
表示 Row 在主轴(水平)方向占用的空间，默认是 MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子 widgets 实际占用多少水平空间，Row 的宽度始终等于水平方向的最大宽度。在上面代码的基础上，增加如下代码，图4就变成了图5。
mainAxisSize: MainAxisSize.min,
从上图可以看出，如果 mainAxisSize 值为 MainAxisSize.min，则 mainAxisAlignment 属性就会失效，因为子组件的宽度等于Row的宽度。只有当 mainAxisSize 的值为MainAxisSize.max 时，此属性才有意义。
写在最后
如果你对我感兴趣，请移步到 http://blogss.cn ，进一步了解。
- 如果本文帮助到了你，欢迎点赞和关注 ❤️
- 由于作者水平有限，文中如果有错误，欢迎在评论区指正 ✔️
- 本文首发于简书，未经许可禁止转载 ©️
