Flutter Positioned 组件的 z-index

9 min read

规则

没有 z-index , child Widget 的叠加处理是 List 第一个 child Widget 在最下层,last child Widget 在最上层,位置的顺序非常类似 CSS 中的 z-index

代码

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,
          )
        ),
      ],
    );
  }
}