Flutter中如何使用Positioned的z-index属性让被遮挡UI顶层显示

Positioned 组件必须作为 Stack 的子组件使用，Stack 默认的图层渲染规则为先写的子组件在下层，后写的子组件在上层，你遇到的遮挡问题通常可以通过以下几种方式解决：

• 调整Stack子组件书写顺序
  直接把需要显示在最上层的Positioned组件移动到Stack子组件列表的最后一位，即可让它获得当前Stack内的最高层级，不会被其他子组件遮挡。
• 用zIndex属性主动指定层级
  如果你不方便调整组件的书写顺序，在Flutter 3.10及以上版本中，可以给Stack的子组件设置zIndex属性，数值越大对应的层级越高，示例代码：

  Stack(
    children: [
      // 要置顶的组件设置更高的zIndex
      Positioned(
        zIndex: 2,
        top: 10,
        left: 10,
        child: Container(width: 100, height: 100, color: Colors.red),
      ),
      // 普通下层组件zIndex更低
      Positioned(
        zIndex: 1,
        top: 20,
        left: 20,
        child: Container(width: 100, height: 100, color: Colors.blue),
      ),
    ],
  )
  

• 跨组件层级场景用Overlay实现全局置顶
  如果被遮挡的Positioned和遮挡它的组件不在同一个Stack下，你可以使用Flutter提供的Overlay全局悬浮层能力，把需要置顶的UI插入到Overlay实例中，即可覆盖页面内所有普通路由层的组件显示。

内容的提问来源于stack exchange，提问作者a programer