Flutter如何根据Stack中第一个容器尺寸动态设置第二个容器大小

情况1：第一个Container尺寸固定 #

如果第一个Container的尺寸是明确指定的（比如宽高均为100），直接基于固定值计算第二个的尺寸即可：

Stack(
  alignment: Alignment.center,
  children: [
    // 第一个尺寸固定的Container
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    // 第二个尺寸为第一个1/4的Container
    Container(
      width: 100 / 4,
      height: 100 / 4,
      color: Colors.red.withOpacity(0.5),
    ),
  ],
)

情况2：第一个Container尺寸自适应 #

如果第一个Container的尺寸是动态的（比如占满父容器宽度、高度随内容调整），需要先获取它的实际渲染尺寸，再计算第二个的尺寸。这里用GlobalKey结合帧回调实现：

class _MyPageState extends State<MyPage> {
  final _firstContainerKey = GlobalKey();
  Size _firstSize = Size.zero;

  @override
  void initState() {
    super.initState();
    // 等待第一帧渲染完成后获取尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final renderBox = _firstContainerKey.currentContext?.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        setState(() {
          _firstSize = renderBox.size;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        // 第一个自适应尺寸的Container
        Container(
          key: _firstContainerKey,
          width: double.infinity,
          height: MediaQuery.of(context).size.height * 0.3, // 示例：占屏幕高度30%
          color: Colors.blue,
        ),
        // 第二个按比例设置尺寸的Container
        if (_firstSize != Size.zero)
          Container(
            width: _firstSize.width / 4,
            height: _firstSize.height / 4,
            color: Colors.red.withOpacity(0.5),
          ),
      ],
    );
  }
}

简洁替代方案：LayoutBuilder结合比例设置 #

如果不需要第一个Container完全自适应，可通过LayoutBuilder获取父容器约束，直接按比例生成两个Container的尺寸：

LayoutBuilder(
  builder: (context, constraints) {
    final firstWidth = constraints.maxWidth;
    final firstHeight = 120; // 或根据约束动态计算
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: firstWidth,
          height: firstHeight,
          color: Colors.blue,
        ),
        Container(
          width: firstWidth / 4,
          height: firstHeight / 4,
          color: Colors.red.withOpacity(0.5),
        ),
      ],
    );
  },
)

注意事项 #

• 使用GlobalKey方案时，首次渲染第二个Container会暂时不显示，直到尺寸获取完成。可给它设置默认尺寸或用AnimatedSize做过渡优化。
• 若第一个Container尺寸会随内容动态变化，可使用Flutter 3.10+支持的ResizeObserver监听尺寸变更，实时更新第二个Container的大小。

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