Flutter桌面端Widget无法跟随窗口宽度自适应调整尺寸如何解决

• 垂直方向缩放正常的原因：布局外层Column内的Expanded会自动占用除AppBar之外的所有可视高度，给内部的Row传递固定的高度约束。Row的子AspectRatio组件拿到固定高度后，会按照1:1的比例算出自身宽度，高度始终跟随父级的高度约束，所以垂直缩放时不会溢出。
• 水平方向溢出的原因：Row默认不会对子组件的主轴（水平轴）尺寸做强制约束，当三个1:1的AspectRatio组件计算出的总宽度超过当前窗口的可用宽度时，Row不会自动压缩子组件的宽度，也默认没有滚动能力，就会出现内容溢出可视区域的情况。

根据你的业务需求可选两种常用方案：

• 方案1：三个方块始终平分水平空间，保持1:1比例不溢出，给每个AspectRatio外层套Expanded即可：

Expanded(
  child: Row(
    children: [
      Expanded(
        child: AspectRatio(
          aspectRatio: 1.0,
          child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.red)),
        ),
      ),
      Expanded(
        child: AspectRatio(
          aspectRatio: 1.0,
          child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.red)),
        ),
      ),
      Expanded(
        child: AspectRatio(
          aspectRatio: 1.0,
          child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.red)),
        ),
      )
    ]
  )
)

• 方案2：保持方块固定1:1最小尺寸，超出后允许横向滚动，给Row外层套SingleChildScrollView：

Expanded(
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: [
        AspectRatio(
          aspectRatio: 1.0,
          child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.red)),
        ),
        AspectRatio(
          aspectRatio: 1.0,
          child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.red)),
        ),
        AspectRatio(
          aspectRatio: 1.0,
          child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.red)),
        )
      ]
    ),
  )
)

内容的提问来源于stack exchange，提问作者Marc Van Daele