原创
  • 2021-04-29
  • 浏览 (20)
  • 评论 (0)

Flutter:你真的会用 Row、Column 组件吗?

如果你是 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 组件在不指定任何属性的情况下,在主轴(水平方向)所有子组件默认是沿轴从左到右排列的(左对齐),在纵轴(垂直方向)所有子组件默认在纵轴的中间位置。

图1

这和 Row 组件的构造函数是一致的,默认指定主轴对齐方式是从左到右,纵轴的对齐方式是居中。

image.png

属性讲解

我以 Row 组件来说明下面这些属性该如何用,并展示其效果。Column 参数和 Row一样,不同的是布局方向为垂直,主轴纵轴正好相反,读者可类比 Row 来理解。

MainAxisAlignment

主轴对齐方式,Row 组件的一个属性,规定了所有子组件在主轴上应该如何排列。在上面代码的基础上,为 Row 指定 MainAxisAlignment 属性,值为 MainAxisAlignment.center。规定所有子组件应该在主轴的中间排列,图1就变成了图2。

mainAxisAlignment: MainAxisAlignment.center,

图2

CrossAxisAlignment

纵轴对齐方式,规定了所有子组件在纵轴上应该如何排列。在上面代码的基础上,增加如下代码,规定所有子组件应该沿纵轴从左到右排列,图2就变成了图3。

crossAxisAlignment: CrossAxisAlignment.start,

图3

TextDirection

在 Row 组件中,表示水平方向子组件的布局顺序(是从左往右还是从右往左)。在上面代码的基础上,增加如下代码,TextDirection.rtl 表示子组件的从右到左布局,图3就变成了图4。

textDirection: TextDirection.rtl,

图4

试试将主轴的对齐方式由居中改为从左到右,即

mainAxisAlignment: MainAxisAlignment.center,

改为

mainAxisAlignment: MainAxisAlignment.start,

奇怪的事情发生了,子组件并没有像我们想的那样沿主轴从左到右排列,结果如下图。如何解释这个现象呢?那就是设置textDirection: TextDirection.rtl会让主轴的方向变为从右到左,所以设置mainAxisAlignment: MainAxisAlignment.start就会让子组件右对齐了。读者也可以这么理解:textDirection是mainAxisAlignment的参考系。

图5

VerticalDirection

和 TextDirection 类似,它是 CrossAxisAlignment 的参考系,这个就不细讲了。

MainAxisSize

表示 Row 在主轴(水平)方向占用的空间,默认是 MainAxisSize.max,表示尽可能多的占用水平方向的空间,此时无论子 widgets 实际占用多少水平空间,Row 的宽度始终等于水平方向的最大宽度。在上面代码的基础上,增加如下代码,图4就变成了图5。

mainAxisSize: MainAxisSize.min,

图6

从上图可以看出,如果 mainAxisSize 值为 MainAxisSize.min,则 mainAxisAlignment 属性就会失效,因为子组件的宽度等于Row的宽度。只有当 mainAxisSize 的值为MainAxisSize.max 时,此属性才有意义。

全文完,觉得不错,点个赞呗~~~

正文到此结束
该篇文章的评论功能已被站长关闭
本文目录