注意：无特殊说明，颤振版本及达特版本如下：> - 颤振版本：1.12.13 + hotfix.5 > - 飞镖版本：2.7.0
堆栈
Stack组件可以将子组件叠加显示，根据子组件的顺利依次向上叠加，用法如下：
Stack(
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Container(
height: 170,
width: 170,
color: Colors.blue,
),
Container(
height: 140，
宽度： 140 ，
颜色：颜色。黄色，）] ，）```
效果如下：
！[]（http://img3.sycdn.imooc.com/5e6245060001a2b707860464.jpg）
堆栈未定位的子组件大小由'配合'参数决定，默认值是` StackFit.loose `，表示子组件自己决定，` StackFit.expand `表示尽可能的大，用法如下：
Stack（
fit：StackFit.expand，
…
）```
堆栈未定位的子组件的默认左上角对齐，通过对准参数控制，用法如下：
Stack(
alignment: Alignment.center,
...
)
效果如下：
有没有注意到fit和alignment参数控制的都是未定位的子组件，那某种的组件叫做定位的子组件？使用定位包装的子组件就是定位的子组件，用法如下：
飞镖堆（ 对齐：对齐。中心， 子代：<小部件> [ 容器（ 高度：200 ， 宽度：200 ， 颜色：颜色。红色，），位置（ 左：10 ， 右：10 ， 底：10 ， 顶部：10
，
孩子： 容器（
颜色：颜色，绿色，），）] ，）`’’
已定位组件可以指定间距堆栈各边的距离，效果如下：
如果子组件超过堆栈边界由溢出控制，默认是裁剪，下面设置总是显示的用法：
飞镖栈（ 溢出：溢出。可见， 孩子：<小部件> [ 容器（ 高度：200 ， 宽度：200 ， 颜色：颜色。红色，），位置（ 左：100 ， 上：100 ， 高度：150 ， 宽度：150
，
孩子： 容器（
颜色：颜色，绿色，），）] ，）`’’
效果如下：
IndexedStack
IndexedStack是Stack的子类，Stack是将所有的子组件重叠显示，而IndexedStack只显示指定的子组件，用法如下：
dart IndexedStack （ 索引： _index ， 子代：< Widget > [ 中心（ 子代：容器（ 高度：300 ， 宽度：300 ， 颜色：颜色。红色， 对齐：对齐。中心， 子代：图标（ 图标。
快餐，
大小： 60 ，
颜色：颜色。蓝色（），），），中心（ 子：容器（ 高度：300 ， 宽度：300 ， 颜色：颜色。绿色， 对齐：对齐。中心， 子：图标
(
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`值，代码如下：
```dart
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用于定位Stack子组件，Positioned必须是Stack的子组件，基本用法如下：
镖镖（儿童：<微件> [定位（左：10，右：10，末端：10，底部：10，子：容器（颜色：颜色红色），），]，）））
效果如下：
相关说明：
- 提供
顶，下，左，右位置定位属性，分别表示距离上下左右的距离.-只能用于小型组件中.-左，右和宽度3个参数只能设置其中2个，因为设置了其中2个，第三个已经确定了，同理顶，底部和高度也只能设置其中2个。
定位提供便捷的构建方式，比如Positioned.fromRect，Positioned.fill等，这些便捷的构建方式万变不离其宗，只不过换了一种方式设置顶，下，左，右局部定位属性。
更多相关阅读：
- [Flutter系列文章总览]（https://blog.csdn.net/mengks1987/article/details/84868953）-[全网最详细的文章Flutter尺寸限制类容器总结]（https：////博客。csdn 。/净/ mengks1987 /文章/详细信息/ 104683649）-[Flutter DataTable看这文章就够了]（https://blog.csdn.net/mengks1987/article/details/104661591）-[Flutter Widgets之PageView] （https：////////blog.csdn.net/mengks1987/article/details/104570500）
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
