如何在Flutter中实现类似CSS的z-index层级控制效果？

在Flutter的Stack组件里，默认是子组件列表顺序越靠后，层级越高，所以你当前代码里Container在Text后面，自然会把Text挡住。要让Text显示在容器上方，有两种简单可行的方法：

方法1：调整子组件顺序（最常用） #

直接把Text所在的Positioned移到Container后面，利用Stack的默认堆叠规则，让Text堆叠在容器上方：

Stack(
  children: [
    Container(
      margin: const EdgeInsets.symmetric(horizontal: 30, vertical: 50),
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        // 可以添加背景色方便直观看到层级效果
        color: Colors.grey.shade200,
      ),
    ),
    Positioned(
      left: (MediaQuery.of(context).size.width / 3),
      child: Row(
        children: [
          Container(
            margin: const EdgeInsets.only(top: 25),
            child: const Text(
              'Premium',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    ),
  ],
)

方法2：使用zIndex属性（Flutter 3.10+版本支持） #

如果不想调整子组件的排列顺序，可以给需要提升层级的组件设置zIndex属性，数值越大，层级越高：

Stack(
  children: [
    Positioned(
      zIndex: 1, // 设置更高的zIndex值，让Text层级超过容器
      left: (MediaQuery.of(context).size.width / 3),
      child: Row(
        children: [
          Container(
            margin: const EdgeInsets.only(top: 25),
            child: const Text(
              'Premium',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    ),
    Container(
      margin: const EdgeInsets.symmetric(horizontal: 30, vertical: 50),
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: Colors.grey.shade200,
      ),
    ),
  ],
)

两种方法都能实现你要的效果，推荐第一种，符合Flutter的默认堆叠逻辑，代码更直观易懂。

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