注意:无特殊说明,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叠加组件Stack的更多相关文章

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

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者丨唐文广:腾讯工程师,负责无线研发部地图测试. 导语:Docker,近两年才流行起来的超轻量级虚拟机,它可以让你轻松完成持续集成.自动交付 ...

  2. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  3. 从源码带你看懂functools的partial方法

    1.what? partial是什么, partial也叫偏函数.源码的描述是: 部分应用给定参数和关键字的新函数. New function with partial application of ...

  4. 一篇文章看懂angularjs component组件

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中详细介绍了directive基本用法与完整属性介绍.directive是个很神奇的存在,你可以不设置templa ...

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

    关于inflate参数问题,我想很多人多多少少都了解一点,网上也有很多关于这方面介绍的文章,但是枯燥的理论或者翻译让很多小伙伴看完之后还是一脸懵逼,so,我今天想通过三个案例来让小伙伴彻底的搞清楚这个 ...

  6. 从基础到实践,一文带你看懂HashMap

    摘要:HashMap是一个用于存储Key-Value键值对的集合,它是面试中经常问到的一个知识点. HashMap是面试中经常问到的一个知识点,也是判断一个候选人基础是否扎实的标准之一,因为通过Has ...

  7. 一文带你看懂Java中的Lock锁底层AQS到底是如何实现的

    前言 相信大家对Java中的Lock锁应该不会陌生,比如ReentrantLock,锁主要是用来解决解决多线程运行访问共享资源时的线程安全问题.那你是不是很好奇,这些Lock锁api是如何实现的呢?本 ...

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

    关于inflate参数问题,我想很多人多多少少都了解一点,网上也有很多关于这方面介绍的文章,但是枯燥的理论或者翻译让很多小伙伴看完之后还是一脸懵逼,so,我今天想通过三个案例来让小伙伴彻底的搞清楚这个 ...

  9. 一篇教你看懂spring bean工厂和aop

    这篇文章为spring回顾总结的第二篇,本篇主要分为两个部分,分别是spring的bean工厂的实现.spring的aop实现原理,这两部分也是面试当中问的比较多的. spring的bean工厂的实现 ...

随机推荐

  1. 金山wps的面试经历

    故事从两个月前开始说起吧. 前段时间突然想跳槽,原因也没啥,就是想折腾下,看看外面的世界?有一部分原因是想离家近一些稳定下来,博主上份工作坐标厦门,风景好的简直随便拍照就是大片. 不废话了,机缘巧合, ...

  2. vue点击复制文本粘贴

    <template>  <ul>      <li> <input type="text" class="inpNone&quo ...

  3. python爬虫和数据分析、数据挖掘

    一.python爬虫脑图: 二.python爬虫流程: 三.python数据分析简介 四.python数据预处理方法 五.python数据挖掘 六.数据探索基础

  4. Select(快速选择顺序统计量)原理及C++代码实现

    SELECT算法利用快排中的partition思想来进行无序数组的快速选择. 寻找第i个顺序统计量可以简单理解为寻找第i小的元素. 该算法通过为partition选择一个好的主元,来保证Partiti ...

  5. IDEA+selenium3+火狐/谷歌驱动 JAVA初步环境搭建 笔记

    0 环境 系统环境:win7 selenium驱动 谷歌浏览器以及驱动 火狐浏览器以及驱动 1 驱动地址的下载 1.1 selenium jar包 https://www.seleniumhq.org ...

  6. Struts配置文件以Spring的方式实现自定义加载

    在使用struts时,我们需要在web.xml中配置过滤器,同时我们需要配置struts的配置文件路径来加载项目中struts的相关配置信息.如果我们不配置路径的话,Struts会有一些默认的加载路径 ...

  7. verilog求倒数-ROM实现方法

    采用线性逼近法结合32段线性查找表的方式来实现1/z的计算. 首先将1/32-1/64的定点化数据存放到ROM中,ROM中存放的是扩大了2^20 次方的数字四舍五入后的整数部分.n值越大,精度越大,误 ...

  8. [LC] 74. Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  9. [LC] 8. String to Integer (atoi)

    Implement atoi which converts a string to an integer. The function first discards as many whitespace ...

  10. 操作的系统的PV操作

    转自:https://blog.csdn.net/sunlovefly2012/article/details/9396201 在操作系统中,进程之间经常会存在互斥(都需要共享独占性资源时) 和同步( ...