Flutter 多子 Widget 布之Stack、Positioned

逃离我推掉我的手 2023-07-17 14:07 35阅读 0赞

### 文章目录 ###

*   *  层叠 Widget 布局
     *   *  Stack
         *   *  alignment
             *  fit
             *  overflow
         *  Positioned

*  上文 [Flutter 多子 Widget 布局之Flex、Expanded、Wrap、Flow][Flutter _ Widget _Flex_Expanded_Wrap_Flow]，介绍了弹性布局 `Flex、Expanded`和流式布局`Wrap、Flow`
 *  再上文 [Flutter 多子 Widget 布局之线性布局 Row、Column][Flutter _ Widget _ Row_Column]，介绍了线性布局`Row、Column`组件

## 层叠 Widget 布局 ##

> 层叠布局，类似于`Android`中的`FrameLayout`，可以将布局叠加在另一个布局上。  
> `Flutter`中可以通过`Stack`和`Positioned`来实现相同的效果。

### Stack ###

> 将控件叠加在另一个控件的上面，比如在一张图片上放置一段文字。

查看构造函数，看看都支持哪些属性：

Stack({
        Key key,
        this.alignment = AlignmentDirectional.topStart,// 定位方向
        this.textDirection,// 和 Row Column 中一致，用于决定控件的摆放方向
        this.fit = StackFit.loose,// 子控件适应 Stack 的大小模式
        this.overflow = Overflow.clip,// 子控件超出 Stack 的显示空间的显示模式
        List<Widget> children = const <Widget>[],// 子控件集合
      })

接下来，详细看看各个参数支持的值。

#### alignment ####

> `alignment`支持以下值：`center, bottomCenter, bottomEnd, bototmStart, centerEnd, centerStart, topCenter, topStart, topEnd`，各个参数从字面意思也能理解。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
直接上效果图看各参数具体的显示：这里只展示`topStart, topCenter, bottomEnd`，其他参数的显示效果也是类似。  
主要看 **四个颜色（蓝黄绿红）方块层叠的位置！**  
![topStart][]  
![topCenter][]  
![bottomEnd][]  
伪代码如下：

Stack(
      alignment: AlignmentDirectional.bottomEnd,
      children: <Widget>[
        Container(
          width: 350,
          height: 350,
          color: Colors.red,
          alignment: Alignment.topLeft,// 改变文本的显示位置，为了展示效果，这个值需要跟随 stack 的 alignment 改变
          child: Text('bottomEnd',style: TextStyle(color: Colors.white),),
        ),
        Container(
          width: 250,
          height: 250,
          color: Colors.green,
          alignment: Alignment.topLeft,
          child: Text('bottomEnd',style: TextStyle(color: Colors.white),),
        ),
        Container(
          width: 150,
          height: 150,
          color: Colors.yellow,
          alignment: Alignment.topLeft,
          child: Text('bottomEnd',style: TextStyle(color: Colors.white),),
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.blue,
          alignment: Alignment.topLeft,
          child: Text('bottomEnd',style: TextStyle(color: Colors.white),),
        ),
      ],
    )

#### fit ####

> `fit`支持以下值：`expand, loose, passthough`

![在这里插入图片描述][20200322115520300.png]

*  `StackFit.loose`：默认效果，非 `Positioned`子组件可取最小到最大这个区间内的值，如`Stack`添加宽高 `350*600` 的约束，那么子组件宽取值区间为`0-350`，高取值区间为`0-600`。
 *  `StackFit.expand`：子组件取最大尺寸，如`Stack`添加宽高 `350*600` 的约束，那么子组件的宽为`350`，高为`600`。
 *  `StackFit.passthrough`：不改变子组件约束条件。

效果示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]  
`StackFit.expand` 效果伪代码实现：

Stack(
      fit: StackFit.expand,
      children: <Widget>[
        Container(
          width: 350,
          height: 350,
          color: Colors.red,
          alignment: Alignment.topLeft,// 改变文本的显示位置，为了展示效果，这个值需要跟随 stack 的 alignment 改变
          child: Text('expand',style: TextStyle(color: Colors.white),),
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.blue,
          alignment: Alignment.topLeft,
          child: Text('expand',style: TextStyle(color: Colors.white),),
        ),
      ],
    )

`loose, passthrough`字段，暂时没想到示例，就不放效果图了。

#### overflow ####

> `overflow`支持以下值：`expand, loose, passthough`

![在这里插入图片描述][20200322121310708.png]

*  `Overflow.clip`: 默认效果，超出`Stack`部分会被剪裁（隐藏），
 *  `Overflow.visible` 超出`Stack`部分不会被剪裁（隐藏）。

示例效果图：  
原文源码：[在Flutter中，定位的Widget如何在其父Stack区域之外点击？][Flutter_Widget_Stack]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]

### Positioned ###

> `Positioned` 可以设置子 `Widget` 位置

查看构造函数，看看都支持哪些属性：

const Positioned({
        Key key,
        this.left,// 离 Stack 左边的距离
        this.top,// 离 Stack 上边的距离
        this.right,// 离 Stack 右边的距离
        this.bottom,// 离 Stack 底边的距离
        this.width,// child 的宽度
        this.height,// child 的高度
        @required Widget child, // 子控件
      })

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

Stack(
      children: <Widget>[
        Container(color: Colors.yellow, width: 300, height: 300),//黄色容器
        Positioned(
          left: 18.0,
          top: 18.0,
          child: Container(color: Colors.green, width: 50, height: 50),//叠加在黄色容器之上的绿色控件
        ),
        Positioned(
          left: 18.0,
          top:70.0,
          child: Text("距离左边距 18，上边距 70 的文本"),
        ),
        Positioned(
          right: 18.0,
          top:170.0,
          child: Text("距离右边距 18，上边距 170 的文本"),
        )
      ],
    )

完~

[Flutter _ Widget _Flex_Expanded_Wrap_Flow]: https://blog.csdn.net/ITxiaodong/article/details/105002293
[Flutter _ Widget _ Row_Column]: https://blog.csdn.net/ITxiaodong/article/details/104996626
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/9feca08ced0d4300ab6674781d605ba5.png
[topStart]: /images/20230528/f267c463342f4392a07a4b35cd9af58a.png
[topCenter]: /images/20230528/7a56c727b7ad41eea58f56b5a7c27580.png
[bottomEnd]: /images/20230528/7c01a5a2c7cd427195d250306fb1ecbf.png
[20200322115520300.png]: /images/20230528/c6ebdf3d9d1a41449f3351717a9c0d56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/ed20e0b975b24ce793237b2d9cc30b3f.png
[20200322121310708.png]: /images/20230528/5b2b12f672ea446b996ccaa104c99549.png
[Flutter_Widget_Stack]: https://cloud.tencent.com/developer/ask/173425/answer/276160
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230528/e36bcdd2049b440788bc7bc9f13640ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230528/64fa111a781b4d3e87928c91916d3c44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20230528/1f931cbfe11443b4bfef7c30362d9cd1.png