文章已同步至掘金：https://juejin.cn/post/6844903956368326669
欢迎访问😃，有任何问题都可留言评论哦~

Flutter 中的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,
	List<Widget> children = const <Widget>[],
})

属性解释

textDirection

表示水平方向子组件的布局顺序(是从左往右还是从右往左)，默认从左往右

mainAxisSize

表示Row在主轴(水平)方向占用的空间，
默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间
而MainAxisSize.min表示尽可能少的占用水平空间

mainAxisAlignment

（相当于H5中Flex布局的处理项目的富余空间 — Flex 布局教程）

表示子组件在Row所占用的水平空间内对齐方式(只有当mainAxisSize的值为MainAxisSize.max时，此属性才有意义)

• MainAxisAlignment.start表示文本内容沿textDirection的初始方向对齐，(如textDirection取值为TextDirection.ltr时，则表示左对齐，textDirection取值为TextDirection.rtl时表示从右对齐。)

• MainAxisAlignment.end和MainAxisAlignment.start正好相反；

• MainAxisAlignment.center表示文本内容居中对齐

• MainAxisAlignment.spaceAround表示每个组件两边的富余空间相等

• MainAxisAlignment.spaceBetween表示将富裕空间平分为（内容-1）段

• MainAxisAlignment.spaceEvenly表示将富裕空间平分为（内容+1）段，（经常使用）

代码示例：

child: Column(
  children: <Widget>[
	Row(
	  mainAxisAlignment: MainAxisAlignment.start,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),  //表示一条横线
	Row(
	  mainAxisAlignment: MainAxisAlignment.end,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.center,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceAround,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceBetween,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
  ],
),

运行效果：

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

子组件数组

Column

Column可以在垂直方向排列其子组件。
参数和Row一样，不同的是布局方向为垂直，主轴纵轴正好相反。

构造函数如下：

Column({
	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>[],
})

注：Row和Column都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于他们最大子元素的长度

如果我们想让文本控件在整个手机屏幕中间对齐，那么我们有两种方法：

1. 将Column的宽度指定为屏幕宽度，我们可以通过ConstrainedBox或SizedBox来强制更改宽度限制，

例如：

ConstrainedBox(
  constraints: BoxConstraints(minWidth: double.infinity), 
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("Hello"),
      Text("World"),
    ],
  ),
);

将minWidth设为double.infinity，可以使宽度占用尽可能多的空间。

2. 使用Center Widget；

控件嵌套

如果Row里面嵌套Row，或者Column里面再嵌套Column，

那么只有对最外面的Row或Column会占用尽可能大的空间，里面Row或Column所占用的空间为实际大小，

示例：

Container(
  color: Colors.green,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max, //有效，外层Colum高度为整个屏幕
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Column(
            mainAxisSize: MainAxisSize.max,//无效，内层Colum高度为实际高度  
            children: <Widget>[
              Text("hello world "),
              Text("I am Jack "),
            ],
          ),
        )
      ],
    ),
  ),
);

如果要让里面的Column占满外部Column，可以使用Expanded组件：

Expanded( 
  child: Container(
    color: Colors.red,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中对齐
      children: <Widget>[
        Text("hello world "),
        Text("I am Jack "),
      ],
    ),
  ),
)

关于Expanded的使用，请参考文章：Flutter 布局控件篇–>Flex、Expanded

---

T_T