Flutter 多子 Widget 布局之线性布局 Row、Column

ゝ一世哀愁。 2023-07-17 09:50 10阅读 0赞

### 文章目录 ###

*   *   *  线性布局 Row、Column
         *   *  Row
             *   *  MainAxisAlignment
                 *  CrossAxisAlignment
                 *  TextDirection
                 *  MainAxisSize
                 *  VerticalDirection
             *  Column
             *   *  MainAxisAlignment
                 *  CrossAxisAlignment

**主要参考：[Flutter 布局（七）- Row、Column详解][Flutter _- Row_Column]**

### 线性布局 Row、Column ###

> `Flutter`中通过`Row`和`Column`来实现线性布局，也就是水平和垂直布局。

#### Row ####

> 水平布局

源码中的字段含义如下：

Row({
        Key key,
        MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//children在主轴方向上的对齐方式
        MainAxisSize mainAxisSize = MainAxisSize.max,// 在主轴方向占有空间的值
        CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//children在交叉轴方向的对齐方式
        TextDirection textDirection,// 水平方向上的文字摆放顺序
        VerticalDirection verticalDirection = VerticalDirection.down,// 竖直方向上 children 摆放顺序
        TextBaseline textBaseline,// 文本基准线
        List<Widget> children = const <Widget>[],// 子 widget 集合
      })

每个字段又有相关的参数可设置，熟悉各个字段值的含义有助于我们快速准确使用字段。

##### MainAxisAlignment #####

`MainAxisAlignment` 的取值有：`start, end, center, spaceBetween, spaceAround, spaceEvenly`  
效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
伪代码如下：

Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Text(" hello "),
        Text(" I am MainAxisAlignment.end "),
      ],
    ),

*  `start`：将`children`从屏幕左侧起点开始排列
 *  `end`：将`children`从屏幕右侧做起点开始排列
 *  `center`：将`children`从屏幕中间做起点开始排列
 *  `spaceBetween`：将主轴方向上的空白区域均分，使得`children`之间的空白区域相等，首尾`child`都靠近首尾，没有间隙；
 *  `spaceAround`：将主轴方向上的空白区域均分，使得 `children`之间的空白区域相等，但是首尾`child`的空白区域为`1/2`；
 *  `spaceEvenly`：将主轴方向上的空白区域均分，使得`children`之间的空白区域相等，包括首尾`child`；

再来细看`spaceBetween,spaceAround,spaceEvenly` 这三个字段效果图对比上面的文字描述：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]  
伪代码如下：

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(" hello "),
        Text(" word "),
        Text(" spaceBetween "),
      ],
    ),

##### CrossAxisAlignment #####

> `CrossAxisAlignment`表示交叉轴，`Row`的主轴是水平方向，交叉轴暂时没想到好的示例，这里就不做图示了。

`CrossAxisAlignment`的取值有：`baseline, center, end, start, stretch`

*  `baseline`：在交叉轴方向，使得`children`的`baseline`对齐
 *  `center`：`children`在交叉轴上居中展示
 *  `end`：`children`在交叉轴上末尾展示
 *  `start`：`children`在交叉轴上起点处展示
 *  `stretch`：让`children`填满交叉轴方向

##### TextDirection #####

> 水平方向上的文字（`child`）摆放顺序，`TextDirection` 的取值有：`rtl, ltr`

*  `rtl`:文本从右向左排列
 *  `ltr`:文本从左向右排列（默认）

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]  
伪代码：

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Text(" hello "),
        Text(" I am MainAxisAlignment.start "),
      ],
    ),

##### MainAxisSize #####

> `MainAxisSize` 的取值有：`min, max`

*  `max`:最大化使用主轴方向的可用空间（默认）
 *  `min`:与max相反，是最小化使用主轴方向的可用空间

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]  
伪代码：

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(" hello "),
        Text(" I am MainAxisAlignment.start "),
      ],
    ),

##### VerticalDirection #####

> 竖直方向上（`child`）摆放顺序，`VerticalDirection` 的取值有：`up, down`

*  `up`: 表示`Row`纵轴（垂直）从上到下进行布局
 *  `down`: 表示Row纵轴（垂直）从下到上进行布局

#### Column ####

> 垂直布局，`Column`参数和`Row`一样，不同的是布局方向为垂直，主轴纵轴方向相反。

##### MainAxisAlignment #####

> `Column`的主轴是垂直方向，交叉轴暂时没想到好的示例，这里先不介绍了。

##### CrossAxisAlignment #####

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]  
伪代码：

Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text(" hello "),
        Text(" I am  CrossAxisAlignment.center "),
      ],
    ),

从效果图上看`stretch、baseline`还是区分不了。所以再来看了效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 5]  
伪代码实现：

Column(
      children: <Widget>[
        SizedBox(
          height: 30,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Text(" hello "),
            Text(" I am  CrossAxisAlignment.stretch "),
          ],
        ),
        SizedBox(
          height: 30,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,
          children: <Widget>[
            Text(" hello "),
            Text(" I am  CrossAxisAlignment.baseline "),
          ],
        ),
      ],
    ));

**分析一波：**  
`baseline`的含义是：在交叉轴方向，使得`children`的`baseline`对齐。  
而现在是`Column`组件，交叉轴默认是水平方向，并且默认的主轴方向是居中开始，  
所以文字是从水平方向居中开始摆列。因此上面的效果图也就很好解释了。

`stretch`的含义是：让`children`填满交叉轴方向，从效果图来看没毛病。

> 剩下的下篇写吧，文章太长，看着容易困！

完~

[Flutter _- Row_Column]: https://github.com/yang7229693/flutter-study/blob/master/post/11.%20Flutter%20%E5%B8%83%E5%B1%80%EF%BC%88%E4%B8%83%EF%BC%89-%20Row%E3%80%81Column%E8%AF%A6%E8%A7%A3.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/5b6e983288424bdca0b14107a5f54798.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/602957039b164606bbd3a2975e2eb7f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230528/b3feabb69b324c51a93bb30b6bbed2aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230528/75c7c801c53945a7af353e51ae4d8343.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20230528/deea3cf9fba6420989203deba4a12098.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 5]: /images/20230528/667c156765534e01905a74dd5c362f0d.png