专栏首页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四种定位属性。

今天的文章对大家是否有帮助?如果有,请在文章底部留言和点赞,以表示对我的支持,你们的留言、点赞和转发关注是我持续更新的动力!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

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

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

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

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

    老孟Flutter
  • 最全的Spring注解详解

    @Configuration : 配置类 == 配置文件,告诉Spring这是一个配置类 @ComponentScan(value="com.atguigu"...

    海仔
  • 纳税服务系统总结

    纳税服务系统总结 纳税服务系统是我第一个做得比较大的项目(不同于javaWeb小项目),该项目系统来源于传智Java32期,十天的视频课程(想要视频的同学关注我...

    Java3y
  • Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)

    当我们在书写 vue 组件的时候,也许可能会用到数据传递;将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件;

    sunseekers
  • 微信小程序自定义组件

    其中,components为组件目录,nodemodules为模块目录,pages为小程序的页面目录,utils为一些基础功能的封装。好比安装的第三方百度统计功...

    mySoul
  • 小程序 组件 Component

    <v-component prop-a="{{dataA}}" prop-b="{{dataB}}">

    用户1197315
  • Element组件引发的Vue中mixins使用,写出高复用组件

    版权声明:本文为原创文章首发于公众号:六小登登 , 你可以随意转载但请务必注明出处!!!关注微信公众...

    六小登登
  • 微信小程序组件化编程和实践(上)

    从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。查看自己使用的小程序基础库版本,可以通过在开发者工具右侧点击详情查看:

    疯狂的小程序

扫码关注云+社区

领取腾讯云代金券