Flutter：调整Stack内组件渲染顺序，让勾选框显示在前景

在Flutter的Stack组件中，子组件的渲染顺序是后添加的组件会覆盖先添加的，你当前的问题是tileComplete()（半透明白色遮罩）在tileActive()（含勾选框）之后渲染，导致遮罩盖住了勾选框。要让勾选框显示在遮罩前方，以下几种实现方式都可行：

方式一：拆分组件，将勾选框独立放在Stack最上层 #

把tileActive拆分为tile主体和勾选框两部分，调整Stack子组件顺序，让勾选框在遮罩之后渲染：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.only(bottom: 4.0),
    child: Stack(
      children: [
        // 激活态tile的主体（不含勾选框）
        tileActiveBody(),
        // 完成态半透明白色遮罩
        tileComplete(),
        // 勾选框单独放在最上层，不受遮罩遮挡
        tileActiveCheckmark(),
      ],
    ),
  );
}

方式二：限制遮罩范围，避开勾选框区域 #

如果不想拆分组件，可通过Positioned或内边距限制遮罩的覆盖范围，让它避开勾选框所在区域：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.only(bottom: 4.0),
    child: Stack(
      children: [
        tileActive(), // 含勾选框的完整激活态tile
        // 用Positioned限定遮罩只覆盖tile主体，避开勾选框位置
        Positioned.fill(
          left: 40, // 根据实际勾选框宽度调整数值
          child: tileComplete(),
        ),
      ],
    ),
  );
}

方式三：直接调整Stack子组件顺序（适用于勾选框可独立提取的情况） #

若tileActive中的勾选框是独立Widget，可直接将其从tileActive中抽出，放在tileComplete之后：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.only(bottom: 4.0),
    child: Stack(
      children: [
        // 激活态tile主体（不含勾选框）
        const SizedBox(
          height: 60,
          width: double.infinity,
          child: Card(child: Padding(padding: EdgeInsets.all(16))),
        ),
        tileComplete(),
        // 勾选框放在最后，渲染层级最高
        const Positioned(
          left: 16,
          top: 16,
          child: Icon(Icons.check_circle, color: Colors.green),
        ),
      ],
    ),
  );
}

其中方式一结构最清晰，能彻底保证勾选框在遮罩之上，不受后续布局变化影响，是最推荐的实现方案。

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