flutter中的绝对定位z-index

4,135 阅读1分钟

今天在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中,粉色的块会在蓝色的块上面。