Flutter：你真的会用 Row、Column 组件吗？

最新推荐文章于 2024-04-08 00:55:42 发布

Coder小北

最新推荐文章于 2024-04-08 00:55:42 发布

阅读量491

点赞数 2

分类专栏： Android 文章标签： android flutter widget dart kotlin

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/lishu_/article/details/116243474

版权

Android 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

公众号：一扑克

博客：板栗-一个专注于分享的技术站点

如果你是 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的参考系。