本篇内容介绍了“怎么使用Flutter叠加组件Stack”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、网站设计、大丰网络推广、成都小程序开发、大丰网络营销、大丰企业策划、大丰品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供大丰建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com
注意：无特殊说明，Flutter版本及Dart版本如下：
Flutter版本： 1.12.13+hotfix.5
Dart版本： 2.7.0
Stack组件可以将子组件叠加显示，根据子组件的顺利依次向上叠加，用法如下：
Stack( children:[ 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, ... )
效果如下：
有没有注意到fit和alignment参数控制的都是未定位的子组件，那什么样的组件叫做定位的子组件？使用Positioned包裹的子组件就是定位的子组件，用法如下：
Stack( alignment: Alignment.center, children:[ 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:[ Container( height: 200, width: 200, color: Colors.red, ), Positioned( left: 100, top: 100, height: 150, width: 150, child: Container( color: Colors.green, ), ) ], )
效果如下：
IndexedStack是Stack的子类，Stack是将所有的子组件叠加显示，而IndexedStack只显示指定的子组件，用法如下：
IndexedStack( index: _index, children:[ 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:[ 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用于定位Stack子组件，Positioned必须是Stack的子组件，基本用法如下：
Stack( children:[ Positioned( left: 10, right: 10, top: 10, bottom: 10, child: Container(color: Colors.red), ), ], )
效果如下：
“怎么使用Flutter叠加组件Stack”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
