Flutter使用MediaQuery设置容器高度仍出现24像素溢出问题

高度计算遗漏了系统UI占用的安全区空间，导致两个容器总高度超出Scaffold body的实际可用范围：

• MediaQuery.of(context).size.height 获取的是设备全屏幕高度，包含顶部系统状态栏（显示时间、电量的区域，常规高度约24像素，正好对应你遇到的溢出值）、底部全面屏手势条等系统组件的占用高度
• 计算高度时仅扣除了AppBar的高度，没有扣除上述系统安全区的高度，算出的两个容器总高度比body实际可渲染高度多了24像素，自然触发溢出报错
• SingleChildScrollView 会给子组件传递无界高度约束，两个固定高度的容器总高度超过滚动视口高度时就会触发滚动，这种需要占满视口按比例分配高度的场景，不需要使用滚动组件包裹。

优先使用Flutter原生布局能力自适应分配空间，无需手动计算尺寸，多设备适配性更好：

方案1：Expanded按比例分配（推荐） #

Column组件原生支持按比例分配剩余可用空间，给两个容器套Expanded，通过flex参数设置占比即可，框架会自动扣除AppBar、系统安全区的所有占用高度，不会出现计算偏差：

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appbar = AppBar();
    return Scaffold(
      appBar: appbar,
      body: Column(
        children: [
          Expanded(
            flex: 4, // 占剩余空间的40%
            child: Container(
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 6, // 占剩余空间的60%
            child: Container(
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

方案2：LayoutBuilder获取真实可用高度 #

如果需要手动拿到body区域的准确渲染高度，用LayoutBuilder包裹内容即可，其返回的constraints.maxHeight就是Scaffold预留的、扣除所有系统组件占用后的真实可用高度，直接按比例计算高度即可：

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appbar = AppBar();
    return Scaffold(
      appBar: appbar,
      body: LayoutBuilder(
        builder: (context, constraints) {
          return Column(
            children: [
              Container(
                height: constraints.maxHeight * 0.4,
                color: Colors.green,
              ),
              Container(
                height: constraints.maxHeight * 0.6,
                color: Colors.red,
              ),
            ],
          );
        },
      ),
    );
  }
}

手动计算高度的注意事项 #

如果一定要通过MediaQuery计算可用高度，必须额外扣除系统安全区的上下padding，否则不同设备上都会出现高度偏差：

// 真实可用高度 = 屏幕总高度 - 顶部状态栏高度 - 底部安全区高度 - AppBar高度
final availableHeight = MediaQuery.of(context).size.height 
  - MediaQuery.of(context).padding.top 
  - MediaQuery.of(context).padding.bottom 
  - appbar.preferredSize.height;

这种方式维护成本很高：如果后续Scaffold添加了底部导航栏、浮动按钮等固定高度组件，还需要手动扣除对应组件的高度，容易出现计算错误，非必要不使用。

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