Flutter计算器多分辨率布局求助：三区域自适应实现

嘿，我完全理解你现在的困扰——这种带比例约束的响应式布局确实容易踩坑，尤其是用Expanded的时候很容易跑偏。咱们先拆解下你的需求核心，再看看原代码的问题，最后给你一个能精准实现需求的方案。

原代码的问题 #

你用了三个Expanded包裹每个区域，而Expanded的默认逻辑是按flex比例平分剩余空间（这里三个flex都是1，所以各占1/3），这完全不符合你要的「显示区和键盘区优先用maxHeight，剩余空间全给历史区」的逻辑，所以肯定达不到预期效果。

正确的实现思路 #

要实现你描述的布局规则，我们需要手动计算每个区域的高度，而不是依赖Expanded的自动分配。核心是用LayoutBuilder获取当前可用的屏幕高度，然后分两种场景计算：

• 屏幕高度足够时：显示区和键盘区用各自的maxHeight，剩下的所有空间给历史区（只要历史区高度不低于它的minHeight）
• 屏幕高度不足时：先把历史区压到它的minHeight，剩下的空间按比例分配给显示区和键盘区，直到它们各自达到minHeight

完整代码实现 #

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  // 定义各个区域的约束参数，方便后续调整
  final double _historyMinHeight = 20;
  final double _displayMinHeight = 50;
  final double _displayMaxHeight = 100;
  final double _keyboardMinHeight = 300;
  final double _keyboardMaxHeight = 400;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final double availableHeight = constraints.maxHeight;
        double historyHeight;
        double displayHeight;
        double keyboardHeight;

        // 先计算显示区+键盘区用最大高度的总占用
        final double maxDisplayKeyboardTotal = _displayMaxHeight + _keyboardMaxHeight;
        // 剩余给历史区的空间
        final double remainingForHistory = availableHeight - maxDisplayKeyboardTotal;

        if (remainingForHistory >= _historyMinHeight) {
          // 场景1：屏幕高度充足，历史区占剩余所有空间，显示/键盘用max
          historyHeight = remainingForHistory;
          displayHeight = _displayMaxHeight;
          keyboardHeight = _keyboardMaxHeight;
        } else {
          // 场景2：屏幕高度不足，先把历史区压到minHeight
          historyHeight = _historyMinHeight;
          // 剩下的空间分配给显示区和键盘区
          final double remainingForDisplayKeyboard = availableHeight - historyHeight;

          // 计算两个区域总共可以压缩的空间
          final double totalCompressibleSpace = 
              (_displayMaxHeight - _displayMinHeight) + (_keyboardMaxHeight - _keyboardMinHeight);
          // 需要压缩的总量：原本的max总和减去当前剩余可用空间
          final double needCompressAmount = maxDisplayKeyboardTotal - remainingForDisplayKeyboard;

          if (needCompressAmount <= 0) {
            // 兜底：理论上不会走到这里，避免异常
            displayHeight = _displayMaxHeight;
            keyboardHeight = _keyboardMaxHeight;
          } else {
            // 按比例计算每个区域需要压缩的高度
            final double displayCompressRatio = 
                (_displayMaxHeight - _displayMinHeight) / totalCompressibleSpace;
            final double keyboardCompressRatio = 
                (_keyboardMaxHeight - _keyboardMinHeight) / totalCompressibleSpace;

            displayHeight = _displayMaxHeight - (needCompressAmount * displayCompressRatio);
            keyboardHeight = _keyboardMaxHeight - (needCompressAmount * keyboardCompressRatio);

            // 确保不会低于各自的最小高度
            displayHeight = max(displayHeight, _displayMinHeight);
            keyboardHeight = max(keyboardHeight, _keyboardMinHeight);
          }
        }

        return Column(
          children: [
            // 运算历史区
            Container(
              height: historyHeight,
              color: Colors.red,
              alignment: Alignment.center,
              child: const Text('运算历史'),
            ),
            // 计算器显示区
            Container(
              height: displayHeight,
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('当前计算显示'),
            ),
            // 键盘区
            Container(
              height: keyboardHeight,
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('键盘'),
            ),
          ],
        );
      },
    );
  }
}

代码说明 #

• LayoutBuilder：用来获取父容器的可用高度，这是实现动态计算的核心
• 场景判断：先判断屏幕是否能容纳显示区和键盘区的maxHeight，再决定历史区的高度
• 比例压缩：当需要压缩时，按两个区域的可压缩空间比例来分配压缩量，保证它们同时缩小到各自的minHeight
• 边界保护：用max()确保每个区域不会低于设定的minHeight

你可以调整代码里的参数值来适配你的实际设计需求，测试不同屏幕尺寸时的效果，应该就能完全符合你的预期了。

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