从名字上看,这个容器就是堆。
效果是能让自己内部的子组件重叠放置,严格意义上来说,我认为他可以算是一个布局容器,就像Row,Column一样。
下面是网上找的例子(主要我懒的现写了)
class CustomStack extends StatelessWidget {
@override
Widget build(BuildContext context) {
var yellowBox = Container(
color: Colors.yellow,
height: 100,
width: 100,
);
var redBox = Container(
color: Colors.red,
height: 90,
width: 90,
);
var greenBox = Container(
color: Colors.green,
height: 80,
width: 80,
);
return Container(
width: 200,
height: 120,
color: Colors.grey.withAlpha(33),
child: Stack(
textDirection: TextDirection.rtl,
fit: StackFit.loose,
alignment: Alignment.topRight,
children: <Widget>[yellowBox, redBox, greenBox],
),
);
}
}
实际效果就是三块颜色跌在一起,像下面这样。
它有下面这些常用属性
● Alignment
● Positioned 这个好像算是组件,目前我还没用过
● clipBehavior 如果设置为None,可以不剪切超过边界的部分
● Align 和上面的Alignment看起来功能重复,但看人家的示例好像有不一样的地方
当然我不是为了抄人家的说明,而是要记录我的用法。
目标:实现点击不同的选项,切换不同的页面来显示。
我采用了IndexedStack来做, 这样在点了按钮之后,就会修改_index, 然后重画不同的page
List<Widget> _UserManageChildPages = [
UserPage(),
IdentityPage(),
AuthorityPage(),
];
child: IndexedStack(
index: _index,
children: _UserManageChildPages,
),
child: ElevatedButton(
onPressed: () {
setState(() {
_index = 1;
});
},
child: Text('Identity')
),
今天还看到了一种做法,直接使用Stack
int rightMenu = 1;
Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
rightMenu==1?UserPage():rightMenu==2?IdentityPage():rightMenu==3?AuthorityPage(),
)
看起来一样可以达到效果。
不过不知道是不是因为我自己找的方法,个人更倾向用前面这种。