专栏首页Flutter一篇带你看懂Flutter叠加组件Stack

一篇带你看懂Flutter叠加组件Stack

一枚

有态度

的程序员

注意:无特殊说明,Flutter版本及Dart版本如下:

  • Flutter版本:1.12.13+hotfix.5
  • Dart版本:2.7.0

Stack

Stack组件可以将子组件叠加显示,根据子组件的顺利依次向上叠加,用法如下:

Stack(
  children: <Widget>[
    Container(
      height: 200,
      width: 200,
      color: Colors.red,
    ),
    Container(
      height: 170,
      width: 170,
      color: Colors.blue,
    ),
    Container(
      height: 140,
      width: 140,
      color: Colors.yellow,
    )
  ],
)

效果如下:

Stack未定位的子组件大小由fit参数决定,默认值是StackFit.loose,表示子组件自己决定,StackFit.expand表示尽可能的大,用法如下:

Stack(
  fit: StackFit.expand,
  ...
)

Stack未定位的子组件的默认左上角对齐,通过alignment参数控制,用法如下:

Stack(
  alignment: Alignment.center,
  ...
)

效果如下:

有没有注意到fitalignment参数控制的都是未定位的子组件,那什么样的组件叫做定位的子组件?使用Positioned包裹的子组件就是定位的子组件,用法如下:

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(
      height: 200,
      width: 200,
      color: Colors.red,
    ),
    Positioned(
      left: 10,
      right: 10,
      bottom: 10,
      top: 10,
      child: Container(
        color: Colors.green,
      ),
    )
  ],
)

Positioned组件可以指定距Stack各边的距离,效果如下:

如果子组件超过Stack边界由overflow控制,默认是裁剪,下面设置总是显示的用法:

Stack(
  overflow: Overflow.visible,
  children: <Widget>[
    Container(
      height: 200,
      width: 200,
      color: Colors.red,
    ),
    Positioned(
      left: 100,
      top: 100,
      height: 150,
      width: 150,
      child: Container(
        color: Colors.green,
      ),
    )
  ],
)

效果如下:

IndexedStack

IndexedStack是Stack的子类,Stack是将所有的子组件叠加显示,而IndexedStack只显示指定的子组件,用法如下:

IndexedStack(
      index: _index,
      children: <Widget>[
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.red,
            alignment: Alignment.center,
            child: Icon(
              Icons.fastfood,
              size: 60,
              color: Colors.blue,
            ),
          ),
        ),
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.green,
            alignment: Alignment.center,
            child: Icon(
              Icons.cake,
              size: 60,
              color: Colors.blue,
            ),
          ),
        ),
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
            alignment: Alignment.center,
            child: Icon(
              Icons.local_cafe,
              size: 60,
              color: Colors.blue,
            ),
          ),
        ),
      ],
    )

通过点击按钮更新_index值,代码如下:

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.fastfood),
              onPressed: () {
                setState(() {
                  _index = 0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.cake),
              onPressed: () {
                setState(() {
                  _index = 1;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.local_cafe),
              onPressed: () {
                setState(() {
                  _index = 2;
                });
              },
            ),
          ],
        )

效果如下:

Positioned

Positioned用于定位Stack子组件,Positioned必须是Stack的子组件,基本用法如下:

Stack(
  children: <Widget>[
    Positioned(
      left: 10,
      right: 10,
      top: 10,
      bottom: 10,
      child: Container(color: Colors.red),
    ),
  ],
)

效果如下:

相关说明:

  • 提供topbottomleftright四种定位属性,分别表示距离上下左右的距离。
  • 只能用于Stack组件中。
  • leftrightwidth3个参数只能设置其中2个,因为设置了其中2个,第三个已经确定了,同理topbottomheight也只能设置其中2个。

Positioned提供便捷的构建方式,比如Positioned.fromRectPositioned.fill等,这些便捷的构建方式万变不离其宗,只不过换了一种方式设置topbottomleftright四种定位属性。

本文分享自微信公众号 - 老孟Flutter(lao_meng_qd),作者:老孟

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一篇带你看懂Flutter叠加组件Stack

    Stack未定位的子组件大小由fit参数决定,默认值是StackFit.loose,表示子组件自己决定,StackFit.expand表示尽可能的大,用法如下:

    老孟Flutter
  • 说一句最好的Flutter开源项目也不过分

    老孟导读:首先声明此项目不是我完成的,是大神`张风捷特烈`呕心沥血之作,对初学者有极大对帮助,当然我获得了大神`张风捷特烈`的授权,所以我不是盗版哦。

    老孟Flutter
  • 【Flutter实战】Flutter 中那么多组件,难道要都学一遍?

    通古斯因陨星坠落发生大爆炸,1908年6月30日上午7时,在中西伯利亚上空,一个雪亮的火球从东南向西北掠空而过。一个几十万吨重的大流星落在通古斯河以北。从叶尼塞...

    老孟Flutter
  • 微信小程序中自定义组件solt的使用

    我们会发现,在自定义模板中有一对<code><slot></slot></code>,这里是干什么用的呢?在组件模板中可以提供一个 <slot> 节点,用于承载...

    天天_哥
  • 《快学BigData》--Hadoop总结(C)(36)

    Hadoop总结 - - - - - - - - - - - - - - - - - - - - - - - - - - - - 210

    小徐
  • [PySimpleGUI界面学习](十)列表的使用及一个简易计算器例子

    <!--more--> # 回顾 在上一篇文章中,我们编写了一个简单的音乐播放器界面和一个脚本执行程序,展示了 `PySimpleGUI` 强大的功能,在这一...

    王荣胜
  • 搞定混合云的套路,从此不再扎心......

    港湾人儿
  • 微信小程序实战开发五:使用自定义组件配置一个通用的图片轮播组件。

    在开发中有很多时候为了节约代码,方便使用各种功能,我们需要创建很多类、方法、过程。小程序也是一样,小程序所有的方法、过程、类都封装成了一个叫组件的东西,包括微信...

    睿儿网络郝刚
  • django 模板语言

    在内置的方法满足不了我们的需求的时候,就需要自己定义属于自己的方法了,自定义方法分别分为filter和simple_tag

    以谁为师
  • 说出3个获取用户需求的方法并简述其应用的局限性。

    (1)用户反馈:其局限性在于需要从普通用户较为模糊的表达中,判断用户的典型性及需求的合理性,洞察用户的真实意图。通过用户反馈获取用户需求,缺少统计学支撑,需要较...

    葆宁

扫码关注云+社区

领取腾讯云代金券