Flutter：如何为包含Positioned子组件的Stack包裹Container并居中

问题根因 #

• Flutter中Stack的自身尺寸仅由未被Positioned包裹的非定位子组件决定，所有Positioned子组件不会参与Stack的尺寸计算
• 你代码中Stack唯一的非定位子组件是未设置宽高的空Container，空Container在无约束环境下会尽可能占满可用空间，父级Center组件提供了无上限的宽高约束，最终导致Stack尺寸无限大，外层Container也同步变为无限尺寸。

解决方案 #

方案1：手动设置占位尺寸（推荐，性能最优） #

你只需要在Stack的非定位子组件中添加一个占位组件，尺寸和你所有Positioned组件实际占用的总尺寸保持一致，即可把Stack撑到对应大小，外层Container也会自动适配该尺寸，Center就能正常居中。
你提供的示例中，两个Positioned组件实际占用总宽为100、总高为100，修改后的buildStack代码如下：

Widget buildStack() {
  // 动态场景下可遍历所有Positioned元素计算总宽高：
  // 总宽 = 所有元素的 (left + width) 的最大值
  // 总高 = 所有元素的 (top + height) 的最大值
  final totalWidth = 100.0;
  final totalHeight = 100.0;
  return Stack(
    clipBehavior: Clip.none,
    children: [
      // 非定位占位组件，撑起Stack尺寸
      SizedBox(width: totalWidth, height: totalHeight),
      Positioned(
        top: 0,
        left: 0,
        child: Container(
          height: 50,
          width: 50,
          color: Colors.red,
        ),
      ),
      Positioned(
        top: 50,
        left: 50,
        child: Container(
          height: 50,
          width: 50,
          color: Colors.blue,
        ),
      ),
    ],
  );
}

方案2：使用CustomMultiChildLayout（无需提前计算尺寸） #

如果场景复杂无法提前计算总尺寸，可以用CustomMultiChildLayout替代Stack，它支持测量所有子组件的尺寸后再决定自身大小，同时可以自定义每个子组件的偏移位置：

Widget buildCustomLayout() {
  return CustomMultiChildLayout(
    delegate: _CustomStackDelegate(),
    children: [
      LayoutId(
        id: 1,
        child: Container(
          height: 50,
          width: 50,
          color: Colors.red,
        ),
      ),
      LayoutId(
        id: 2,
        child: Container(
          height: 50,
          width: 50,
          color: Colors.blue,
        ),
      ),
    ],
  );
}

class _CustomStackDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    // 测量所有子组件尺寸
    final size1 = layoutChild(1, BoxConstraints.loose(size));
    final size2 = layoutChild(2, BoxConstraints.loose(size));
    // 设置子组件位置
    positionChild(1, Offset.zero);
    positionChild(2, Offset(size1.width, size1.height));
  }

  @override
  Size getSize(BoxConstraints constraints) {
    // 自定义返回布局总尺寸
    return const Size(100, 100);
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => false;
}

修改后直接把外层Container的child换成buildCustomLayout()即可正常居中。

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