今天在flutter中的开发遇到了一个问题,关于怎么使用z-index,使用绝对定位,两个元素重合在一起的时候就会出现这个问题。 后来发现使用Stack布局的时候有这么一个说明:
如果是 positioned 的 child Widget 它的布局行为会根据设置的 top bottom right left 来确定
如果是 non-positioned 的 child Widget 它的布局行为会根据 Stack 的aligment 对齐方式来处理
对于 child Widget 的叠加处理是 List 第一个 child Widget 在最下层,last child Widget 在最上层,位置的顺序非常类似 CSS 中的 z-index
实现一个demo如下:
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
left: 10,
top: 10,
child: Container(
color: Colors.blue,
height: 200,
width: 300,
)
),
Positioned(
left: 20,
top: 20,
child: Container(
color: Colors.pink,
height: 100,
width: 100,
)
),
],
);
}
}
在这个demo中,粉色的块会在蓝色的块上面。