Flutter实现嵌套Widget响应式适配 解决父容器缩放子组件溢出问题

原问题错误效果演示：

核心适配思路 #

无需为每个子组件单独调用MediaQuery计算全局屏幕尺寸，使用Flutter原生相对父级尺寸适配组件即可实现父子容器联动缩放，避免渲染溢出。

方案1：FractionallySizedBox + Flexible 按比例分配空间 #

通过FractionallySizedBox的widthFactor、heightFactor参数定义子组件相对父容器的尺寸比例，外层包裹Flexible适配Column的布局约束：

Scaffold(
  body: Container(
    height: size.height * 0.3, //size = MediaQuery.of(context).size
    width: size.width * 0.3,
    color: Colors.pinkAccent,
    child: Column(
      children: [
        // 第一个子容器：高度占父容器50%，宽度占父容器100%
        Flexible(
          child: FractionallySizedBox(
            widthFactor: 1,
            heightFactor: 1,
            child: Container(
              color: Colors.greenAccent,
            ),
          ),
        ),
        // 第二个子容器：高度占父容器50%，宽度占父容器100%
        Flexible(
          child: FractionallySizedBox(
            widthFactor: 1,
            heightFactor: 1,
            child: Container(
              color: Colors.orangeAccent,
            ),
          ),
        ),
      ],
    ),
  ),
);

如果需要调整两个子容器的高度占比，修改Flexible的flex参数即可，比如设置第一个子容器占2/3高度、第二个占1/3，只需分别给两个Flexible设置flex: 2和flex: 1。

方案2：AspectRatio 固定宽高比适配 #

如果需要子容器保持固定宽高比（比如始终为正方形），可以使用AspectRatio组件：

Scaffold(
  body: Container(
    height: size.height * 0.3,
    width: size.width * 0.3,
    color: Colors.pinkAccent,
    child: Column(
      children: [
        Flexible(
          child: AspectRatio(
            aspectRatio: 1, // 宽高比1:1，始终为正方形
            child: Container(color: Colors.greenAccent),
          ),
        ),
        Flexible(
          child: AspectRatio(
            aspectRatio: 1,
            child: Container(color: Colors.orangeAccent),
          ),
        ),
      ],
    ),
  ),
);

以上两种方案都可以实现子容器跟随父容器自动缩放，完全不需要硬编码固定像素尺寸，也不会出现渲染溢出问题。

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