故不登高山，不知天之高也；不临深溪，不知地之厚也；
前言
作为6年的OC coder来说，开始在写Flutter布局的时候还是有点不适应。就拿下面简单的页面来说：
图1
如果用原生开发，一般来说三个控件就OK了，左边2个
UILabel，右边是个UIButton，然后设置约束就成了。但是这在
Flutter里面就不能这么整了，Flutter里面要先确定布局方向，是横向的还是纵向的。对于上面的UI，在Flutter里面就是最外层是左右布局，要选用Row，左边2个文本是上下布局要选用Column，最终的结果是，一个Row里面有2个子Widget，一是个Column一个是Button，其中Column里面包含2个Text。
正文
在Flutter中Row和Column是线性布局组件，所谓线性布局，即指沿水平或垂直方向排列子组件。Row和Column都继承自Flex，弹性布局以后再说。
主轴和纵轴
在介绍Row和Column之前，要先提一下主轴和纵轴。如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。在线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐。
Row（水平方向排列）
Row的定义如下：
Row({
Key? key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection? textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
List<Widget> children = const <Widget>[],
})
-
mainAxisSize：表示在水平方向占用的空间，默认是MainAxisSize.max，表示尽可能的占用水平方向的空间，即占用水平方向的最大宽度，和子组件宽度无关。MainAxisSize.min表示尽可能的少占用空间，自身宽度即子组件最大宽。 -
mainAxisAlignment：水平方向对齐方式，如果mainAxisSize的值为MainAxisSize.min，那么此属性没有意义，因为子组件的宽度等于Row的宽度。只有mainAxisSize的值为MainAxisSize.max时，MainAxisAlignment.start（center、end）表示左（中、右）对齐。 -
textDirection：表示文字初始方向，汉字是从左往右的，阿拉伯是从右往左。设置这个会影响主轴对齐方式，比较好理解。 -
verticalDirection：表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down，表示从上到下。 -
crossAxisAlignment：表示子组件在纵轴方向的对齐方式，Row的高度等于子组件中最高的子元素高度，它的取值和MainAxisAlignment一样(包含start、end、 center三个值)，不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection值为VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反； -
children：子组件数组。
举个栗子🌰
如果理解上面属性的介绍，看下面的代码，估计脑海里就有了大致的UI
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(" see you again "),
Text(" I am Twist "),
],
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(" see you again "),
Text(" I am Twist "),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
textDirection: TextDirection.rtl,
children: const <Widget>[
Text(" see you again "),
Text(" I am Twist "),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
verticalDirection: VerticalDirection.up,
children: const <Widget>[
Text(
" see you again ",
style: TextStyle(fontSize: 30.0),
),
Text(" I am Twist "),
],
),
],
);
UI显示如下：
2.png
Column（垂直方向排列）
Column是在垂直方向排列其子组件。参数和Row一样，不同的是布局方向为垂直，主轴纵轴正好相反，读者可类比Row来理解。
举个栗子🌰
class ColumnPage extends StatelessWidget {
const ColumnPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Column'),
),
body: Container(
color: Colors.red,
child: Column(
// 主轴（垂直方向） ，start系统默认值
mainAxisAlignment: MainAxisAlignment.start,
// 与主轴垂直（水平方向），center系统默认值
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
Text("see"),
Text("you"),
Text("again"),
],
),
),
);
}
}
为了方便看效果，我加了一个背景颜色， 效果图如图3：
3.png
Column下默认主轴是最大值，即屏高，宽度没有设置，默认是子组件（again）最大宽。
总结
整体来说还是很好理解的，看到一个页面就先横纵咔咔一分，然后开始横套纵、纵套横，这样一个页面就出来了。
后记
在写UI的时候，有的时候需要设置一个简单的间距，或者是某个组件占用剩下的全部空间，请看下篇文章Expanded。
