如何创建占满屏幕剩余高度的子Container？

直接用Column配合Expanded就能实现你要的布局，之前没显示大概率是没给Column设置明确的全屏高度，或者子组件无实际内容导致看不见。给你写个完整可运行的示例：

SizedBox(
  width: double.infinity,
  height: MediaQuery.of(context).size.height,
  child: Column(
    children: [
      // 顶部文本区域，自适应内容高度
      Container(
        padding: const EdgeInsets.all(16),
        child: const Text("这里是顶部的文本内容"),
      ),
      // 下方占满屏幕剩余高度的Container
      Expanded(
        child: Container(
          color: Colors.lightBlueAccent, // 加背景色方便直观看到效果
          // 这里放置你需要的内部内容
        ),
      ),
    ],
  ),
)

你之前用Column没显示的可能原因： #

• 没有给Column的父组件设置明确的全屏高度，导致Column高度被内容撑开，Expanded无法计算剩余空间
• 下方Container没设置背景色或填充内容，即便占了空间也肉眼不可见
• 如果顶部文本内容过长，可能会导致布局溢出，这时可以给顶部文本区域套个SingleChildScrollView：

SizedBox(
  width: double.infinity,
  height: MediaQuery.of(context).size.height,
  child: Column(
    children: [
      // 顶部可滚动的文本区域
      Container(
        padding: const EdgeInsets.all(16),
        child: SingleChildScrollView(
          child: const Text("这里是很长的顶部文本内容，超出屏幕高度时可以滚动查看..."),
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.lightBlueAccent,
        ),
      ),
    ],
  ),
)

另外你之前用ListView的思路不合适，ListView是用来实现滚动列表的，子组件默认都是包裹内容的，没法让某个子组件占满剩余屏幕高度，所以改用Column+Expanded才是正确方向。

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