Flutter中不使用Center组件实现嵌套Container绘制问题

要实现三个嵌套Container的居中显示且不使用Center组件，核心是给父组件添加对齐规则，让子组件能在父容器内居中，同时让最外层容器在Scaffold的body中占据全屏并居中。以下是几种可行方案：

方案1：利用Container的alignment属性 #

Container自身提供alignment参数，可直接控制子组件的对齐方式。给最外层Container设置全屏约束并指定居中对齐，内层Container同样设置alignment: Alignment.center即可：

return Scaffold(
  body: Container(
    // 让最外层容器占满屏幕，并将子组件居中
    alignment: Alignment.center,
    child: Container(
      height: 200,
      width: 200,
      decoration: buildDecoration(Colors.red),
      // 让中间容器在红色容器内居中
      alignment: Alignment.center,
      child: Container(
        height: 100,
        width: 100,
        decoration: buildDecoration(Colors.green),
        // 让蓝色小容器在绿色容器内居中
        alignment: Alignment.center,
        child: Container(
          height: 50,
          width: 50,
          decoration: buildDecoration(Colors.blue),
        ),
      ),
    ),
  ),
);

方案2：使用Align组件替代Center #

Center本质是Alignment.center的Align组件，直接用Align可以实现完全相同的居中效果，且更灵活：

return Scaffold(
  body: Align(
    alignment: Alignment.center,
    child: Container(
      height: 200,
      width: 200,
      decoration: buildDecoration(Colors.red),
      child: Align(
        alignment: Alignment.center,
        child: Container(
          height: 100,
          width: 100,
          decoration: buildDecoration(Colors.green),
          child: Align(
            alignment: Alignment.center,
            child: Container(
              height: 50,
              width: 50,
              decoration: buildDecoration(Colors.blue),
            ),
          ),
        ),
      ),
    ),
  ),
);

方案3：通过Stack+Positioned实现 #

利用Stack占满屏幕，结合Positioned.fill和Align让容器居中：

return Scaffold(
  body: Stack(
    fit: StackFit.expand, // 让Stack占满父组件空间
    children: [
      Positioned.fill(
        child: Align(
          alignment: Alignment.center,
          child: Container(
            height: 200,
            width: 200,
            decoration: buildDecoration(Colors.red),
            child: Align(
              alignment: Alignment.center,
              child: Container(
                height: 100,
                width: 100,
                decoration: buildDecoration(Colors.green),
                child: Align(
                  alignment: Alignment.center,
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: buildDecoration(Colors.blue),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ],
  ),
);

原理说明 #

默认情况下，Container的子组件会左上角对齐，Scaffold的body也会让子组件从左上角开始布局。所以不用Center时，需要明确给父容器设置居中对齐规则，确保每一层嵌套的Container都能在父容器内居中显示，最终实现整体居中的效果。

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