Flutter Row

最新推荐文章于 2024-05-12 22:17:26 发布

jiahua123_dongzhou

最新推荐文章于 2024-05-12 22:17:26 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

分类专栏： fflutter组件

本文链接：https://blog.csdn.net/jiahua123_dongzhou/article/details/108390260

fflutter组件专栏收录该内容

31 篇文章

订阅专栏

本文介绍了Flutter中的Row组件，包括其作为水平布局容器的功能，如何使用Expanded填充剩余空间，以及Row的主轴对齐方式（MainAxisAlignment）和交叉轴对齐方式（CrossAxisAlignment）。通过示例代码展示了不同对齐方式的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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	每个子组件平均分散排列，也就是宽度相等
mainAxisSize	Main 轴大小，可选值有
MainAxisSize.max	相当于 Android 的 match_parent
MainAxisSize.min	相当于 Android 的 wrap_content
children	子组件，值是一个 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