Flutter：如何让容器填充AppBar下方剩余屏幕空间？

核心问题分析 #

你遇到的报错大概率是因为Expanded必须嵌套在Column/Row这类Flex布局组件中，或者用MediaQuery计算时没正确扣除AppBar、状态栏及已固定高度组件的总占用空间。

方案一：用Expanded实现（推荐） #

确保所有组件都包裹在Column里，把需要填充剩余空间的容器用Expanded包裹，同时给Column设置mainAxisSize: MainAxisSize.max（默认值，但显式声明更清晰）。

示例代码：

Scaffold(
  appBar: AppBar(title: const Text("Demo")),
  body: Column(
    mainAxisSize: MainAxisSize.max, // 占满屏幕可用高度
    children: [
      Container(
        height: 300,
        color: Colors.blue,
      ),
      const SizedBox(height: 16),
      Expanded(
        child: Container(
          color: Colors.green,
        ),
      ),
    ],
  ),
);

如果之前用Expanded报错，检查：

• 是否把Expanded放在了非Flex容器里（比如直接放在Scaffold的body里，而非Column内部）
• 是否Column的父布局被固定高度组件包裹，导致无法获取可用空间

方案二：用MediaQuery手动计算高度 #

如果必须手动计算，要注意扣除状态栏高度、AppBar高度以及已有的固定高度组件总和：

示例代码：

Scaffold(
  appBar: AppBar(title: const Text("Demo")),
  body: Builder(
    builder: (context) {
      final screenHeight = MediaQuery.of(context).size.height;
      final appBarHeight = AppBar().preferredSize.height;
      final statusBarHeight = MediaQuery.of(context).padding.top;
      // 计算已占用的总高度
      final usedHeight = 300 + 16 + appBarHeight + statusBarHeight;
      final remainingHeight = screenHeight - usedHeight;

      return Column(
        children: [
          Container(height: 300, color: Colors.blue),
          const SizedBox(height: 16),
          Container(
            height: remainingHeight,
            color: Colors.green,
          ),
        ],
      );
    },
  ),
);

这里用Builder是为了在Scaffold内部获取正确的上下文，避免MediaQuery拿到全局上下文导致计算偏差。如果之前计算错误，大概率是没加状态栏高度或AppBar高度。

常见报错排查 #

• 出现RenderFlex children have non-zero flex but incoming height constraints are unbounded：说明Column的父布局没有提供确定的高度限制，确保Column在Scaffold的body里（Scaffold的body会自动填充屏幕），或者给Column外层套ConstrainedBox设置minHeight: double.infinity
• 高度计算后出现溢出：检查是否多扣或少扣了空间，比如状态栏高度是否被正确获取（部分设备无状态栏时，MediaQuery会返回0）

内容的提问来源于stack exchange，提问作者Kamil Żebrowski