Flutter Row

1 Row

Row 是一个可以沿水平方向展示它的子组件的组件。

它还可以灵活布局，如果要让某个子组件填充满剩余剩余空间，请使用 Expanded 组件包裹该组件即可。

Row 组件是不可以滚动的，所以在 Row 组件中一般不会放置过多子组件，如果需要滚动的话应该考虑使用 ListView。

如果需要垂直展示，应该考虑 Column 组件。

如果只有一个子组件的话，应该考虑使用使用 Align 或者 Container 组件来定位这个子组件。

说了这么多，对我来说，Row 就是一个 orientation 为 horizontal 的 LinearLayout。

常用属性

crossAxisAlignment子组件沿着 Cross 轴（在 Row 中是纵轴）如何摆放，其实就是子组件对齐方式，可选值有CrossAxisAlignment.start子组件在 Row 中顶部对齐CrossAxisAlignment.end子组件在 Row 中底部对齐CrossAxisAlignment.center子组件在 Row 中居中对齐CrossAxisAlignment.stretch拉伸填充满父布局CrossAxisAlignment.baseline在 Row 组件中会报错mainAxisAlignment子组件沿着 Main 轴（在 Row 中是横轴）如何摆放，其实就是子组件排列方式，可选值有MainAxisAlignment.start靠左排列MainAxisAlignment.end靠右排列MainAxisAlignment.center居中排列MainAxisAlignment.spaceAround每个子组件左右间隔相等，也就是 margin 相等MainAxisAlignment.spaceBetween两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列。MainAxisAlignment.spaceEvenly每个子组件平均分散排列，也就是宽度相等mainAxisSizeMain 轴大小，可选值有MainAxisSize.max相当于 Android 的 match_parentMainAxisSize.min相当于 Android 的 wrap_contentchildren子组件，值是一个 Widget 数组Row Column

Row Column

在Row和Column中有一个非常重要的概念：MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴），简单来说，MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴，比如Row的主轴是水平方向，交叉轴是垂直方向，而Column的主轴是垂直方向，交叉轴是水平方向。

Row和Column是多子控件的容器类控件，Row控件水平布局，Column控件垂直布局。

#主轴对齐方式

Row控件的主轴mainAxisAlignment对齐方式默认值是MainAxisAlignment.start，即子控件从开始处排列，这个开始处不一定是屏幕的左边，是从左到右还是从右到左排列取决于文本方向textDirection属性，比如阿拉伯文本方向是从右到左的。

3个颜色块水平排列，代码如下：

Row( children: <Widget>[ Container( height: 50, width: 100, color: Colors.red, ), Container( height: 50, width: 100, color: Colors.green, ), Container( height: 50, width: 100, color: Colors.blue, ), ], ) 12345678910111213141516171819

黑色边框是Row控件的范围，默认情况下Row铺满父组件。主轴的对齐方式设置代码如下：

Row( mainAxisAlignment: MainAxisAlignment.center, ... ) 1234

spaceAround和spaceEvenly区别是： spaceAround：第一个子控件距开始位置和最后一个子控件距结尾位置是其他子控件间距的一半。 spaceEvenly：所有间距一样。 1234

交叉轴对齐方式

和主轴相对应的就是交叉轴crossAxisAlignment，交叉轴对齐方式默认是居中。Row控件的高度是依赖子控件高度，因此子控件高都一样时，Row的高和子控件高相同，此时是无法体现交叉轴对齐方式，修改3个颜色块高分别为50，100，150，这样Row的高是150，代码如下：

Row( children: <Widget>[ Container( height: 50, width: 100, color: Colors.red, ), Container( height: 100, width: 100, color: Colors.green, ), Container( height: 150, width: 100, color: Colors.blue, ), ], ) 12345678910111213141516171819