一篇带你看懂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四种定位属性。

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

更多相关阅读:

原文地址:https://www.cnblogs.com/mengqd/p/12430708.html

时间: 2024-10-10 10:12:20

一篇带你看懂Flutter叠加组件Stack的相关文章

【 全干货 】5 分钟带你看懂 Docker !

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者丨唐文广:腾讯工程师,负责无线研发部地图测试. 导语:Docker,近两年才流行起来的超轻量级虚拟机,它可以让你轻松完成持续集成.自动交付.自动部署,并且实现开发环境.测试环境.运维环境三方环境的真正同步.本文从Docker定义,作用,技术架构,安装和使用等全方位带你看懂Docker. Docker是啥? 打开翻译君输入Docker 结果显示码头工人,没错!码头工人搬运的是集装箱,那么今天要讲的Docker其操作的也是集装箱,这个集装

三个案例带你看懂LayoutInflater中inflate方法两个参数和三个参数的区别

版权声明:本文为sang原创文章,转载请注明出处. 目录(?)[+] 关于inflate参数问题,我想很多人多多少少都了解一点,网上也有很多关于这方面介绍的文章,但是枯燥的理论或者翻译让很多小伙伴看完之后还是一脸懵逼,so,我今天想通过三个案例来让小伙伴彻底的搞清楚这个东东.本篇博客我们不讲源码,只看使用.源码的解读会在下一篇博文中带来. inflate方法从大范围来看,分两种,三个参数的构造方法和两个参数的构造方法.在这两类中又有细分,OK,那我们就把各种情况都来演示一遍. 1.三个参数的in

精辟:一篇文章带你看懂数据储存!

前言:日益火热的云服务 小米组织架构调整上了热搜,如同阿里巴巴.华为和腾讯一样,小米组织架构调整中也将云平台单独成为一个部门.自2018年以来,各大企业调整组织架构的动作中,其实可以窥见大企业对云平台的重视程度,云服务在很多方面悄悄的改变了人们的生活,不过由于消费端接触不多,大家对云服务内容认识较少. 数据储存是云服务中较为重要的板块,早期百度.腾讯.微博.金山等企业都推出自己的免费云盘,供给用户使用,这也是我们最早接触云储存,随着云计算技术的成熟,云服务更偏重于为企业提供服务,基于云计算,搭建

B树?这篇文章彻底看懂了!

前言 索引,相信大多数人已经相当熟悉了,很多人都知道 MySQL 的索引主要以 B+ 树为主,但是要问到为什么用 B+ 树,恐怕很少有人能把前因后果讲述完整.本文就来从头到尾介绍下数据库的索引. 索引是一种数据结构,用于帮助我们在大量数据中快速定位到我们想要查找的数据. 索引最形象的比喻就是图书的目录了.注意这里的大量,数据量大了索引才显得有意义,如果我想要在 [1,2,3,4] 中找到 4 这个数据,直接对全数据检索也很快,没有必要费力气建索引再去查找. 索引在 MySQL 数据库中分三类:

带你看懂Dictionary的内部实现

了解Dictionary的开发人员都了解,和List相比,字典添加会慢,但是查找会比较快,那么Dictionary是如何实现的呢? Dictionary的构造 下面的代码我看看Dictionary在构造时都做了什么: private void Initialize(int capacity) { int prime = HashHelpers.GetPrime(capacity); this.buckets = new int[prime]; for (int i = 0; i < this.b

十分钟带你看懂比特币的运行原理

有一种货币目前价值成百上千美元 ,但不是由金子.铂金或任何贵重金属制造的,这就是比特币,那么比特币的原理是什么呢? 针对不方便打开视频的小伙伴,CDA字幕组也贴心的整理了文字版本,如下: 假设有一种货币目前价值成百上千美元 ,但不是由金子.铂金或任何贵重金属制造的,实际上这不是你能放在手中或存钱罐中的钱币. 这是数字货币,意味着它只以电子的形式存在. 我说的就是比特币,比特币的原理与大多数货币很不一样. 它不依附于国家或政府,因此它没有中央发行机构或监管机构.这意味着没有组织机构决定:什么时候要

一篇带你读懂TCP之“滑动窗口”协议

前言 你现在的努力,是为了以后有更多的选择. 在上一篇文章通过"表白"方式,让我们快速了解网络七层协议了解了网络七层协议. 接下来我们要把重心放在网络传输的可靠性上面.一起来看TCP协议,它是如何解决网络传输不可靠的问题.这其中有个很关键的部分,就是我们的滑动窗口协议. 从工程学角度上,我们来看一看滑动窗口协议,它到底解决了一个怎样的问题? 滑动窗口协议: TCP协议的使用 维持发送方/接收方缓冲区 缓冲区是 用来解决网络之间数据不可靠的问题,例如丢包,重复包,出错,乱序 在TCP协议

一篇文章带你看懂Cloudflare信息泄露事件

版权声明:本文由贺嘉  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/753847001488039974 来源:腾云阁 https://www.qcloud.com/community 1.问题描述 近期根据Hacker News的报道,以及国际CDN厂商cloudflare的公告,我们注意到了一起敏感信息.API 密钥被Cloudflare泄露给了随机的 requesters请求,同时相关敏感数据也被搜索引擎给收录

带你看懂大数据采集引擎之Flume&amp;采集目录中的日志

欢迎关注大数据和人工智能技术文章发布的微信公众号:清研学堂,在这里你可以学到夜白(作者笔名)精心整理的笔记,让我们每天进步一点点,让优秀成为一种习惯! 一.Flume的介绍: Flume由Cloudera公司开发,是一种提供高可用.高可靠.分布式海量日志采集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于采集数据:同时,flume提供对数据进行简单处理,并写到各种数据接收方的能力,如果能用一句话概括Flume,那么Flume是实时采集日志的数据采集引擎. 二.Flume的体