Flutter 如何让设置了宽高比的Widget正确适配其父容器？

问题原因 #

你原有代码的问题核心有两点：

1. Expanded组件会强制子组件占满Column分配的全部剩余空间，AspectRatio在无对齐约束的情况下会优先适配父容器的最大约束，导致1:1比例失效，黄色方块被拉伸填满父容器。
2. 文本组件外层容器未设置宽度占满，默认会自适应文本宽度，不符合宽度占满父容器的要求。

修正后的代码 #

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      // 整体内容在页面居中
      child: Column(
        mainAxisSize: MainAxisSize.min, // Column仅占用刚好容纳子组件的高度
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Flexible(
            // 允许Widget A在空间不足时自动缩放，避免溢出
            child: Container(
              color: Colors.deepPurple,
              alignment: Alignment.center, // 关键：让AspectRatio在容器内居中，不被拉伸
              child: AspectRatio(
                aspectRatio: 1 / 1,
                child: Container(color: Colors.yellow),
              ),
            ),
          ),
          Container(
            width: double.infinity, // 宽度占满父容器
            color: Colors.green,
            child: Padding(
              // 可自行调整内边距控制文本区域高度
              padding: const EdgeInsets.symmetric(vertical: 16),
              child: Text("TEST", textAlign: TextAlign.center),
            ),
          )
        ],
      ),
    ),
  );
}

适配说明 #

• 竖屏时，Widget A的宽度默认铺满Column宽度，高度等于宽度，保持1:1比例，上下留空居中。
• 横屏时，Widget A会自动缩小到高度适配可用空间，宽度等于高度，保持1:1比例，左右留空居中。
• 文本组件高度随内容/内边距自适应，宽度始终占满父容器。

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