如何结合Column与AspectRatio实现自适应正方形及上下文本布局？

我实现了一个始终保持正方形、填充可用宽高的Widget，现在要在正方形上下添加文本。上方文本显示正常，但正方形和下方文本之间有巨大间距无法消除，且当前代码仅适配部分屏幕尺寸，需要适配所有屏幕。

当前效果：

预期效果：

原代码示例：

class LandingGame extends StatefulWidget {
  const LandingGame({super.key});

  @override
  State<LandingGame> createState() => _LandingGameState();
}

class _LandingGameState extends State<LandingGame> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Expanded(
            child: Container(
              color: Colors.green,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text("10:00"),
                  Expanded(
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: Row(
                        children: [
                          Expanded(child: _chessBoard()),
                        ],
                      ),
                    ),
                  ),
                  Text("10:00"),
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.red,
              child: Center(
                child: Text(
                  "Game Stats",
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _chessBoard() {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: 1,
          child: Container(
            color: Colors.white,
            child: Center(
              child: Text("Chess Board"),
            ),
          ),
        ),
      ],
    );
  }
}

代码存在两处冗余嵌套导致空间浪费：

1. _chessBoard 用 Column 包裹 AspectRatio，多余的Column会默认占据额外空白空间；
2. 外层给正方形嵌套了 Expanded + AspectRatio + Row 的多层结构，当屏幕高度大于宽度时，Expanded 会强制拉伸区域，让正方形上下出现不必要的空白。

修复后代码 #

class LandingGame extends StatefulWidget {
  const LandingGame({super.key});

  @override
  State<LandingGame> createState() => _LandingGameState();
}

class _LandingGameState extends State<LandingGame> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Expanded(
            child: Container(
              color: Colors.green,
              child: LayoutBuilder(
                builder: (context, constraints) {
                  // 计算正方形最大可用尺寸：取容器宽度、(容器高度 - 上下文本预估高度)的最小值
                  // 可根据实际字体大小调整文本预估高度（此处为40）
                  final maxSquareSize = min(
                    constraints.maxWidth,
                    constraints.maxHeight - 40,
                  );
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text("10:00"),
                      SizedBox(
                        width: maxSquareSize,
                        height: maxSquareSize,
                        child: _chessBoard(),
                      ),
                      const Text("10:00"),
                    ],
                  );
                },
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.red,
              child: const Center(
                child: Text("Game Stats"),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _chessBoard() {
    // 移除多余的Column嵌套，直接返回正方形容器
    return Container(
      color: Colors.white,
      child: const Center(
        child: Text("Chess Board"),
      ),
    );
  }
}

关键改动说明 #

1. 用LayoutBuilder精准获取约束：通过LayoutBuilder拿到绿色容器的宽高限制，计算正方形的最大可用尺寸，确保它既不会挤压上下文本，也不会超出屏幕范围；
2. 简化嵌套结构：去掉_chessBoard里的冗余Column，以及外层的多层嵌套，直接用SizedBox固定正方形宽高；
3. 调整对齐方式：将Column的mainAxisAlignment设为MainAxisAlignment.center，让文本和正方形整体居中，彻底消除不必要的间距。

如果需要更精准的文本高度计算，可以用TextPainter预计算文本实际高度，替换代码中的预估高度值，进一步提升适配精度。

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