Flutter中如何让ListView填充其下方剩余屏幕空间？

你的核心需求是让ListView自动填充屏幕剩余空间并适配不同尺寸，当前代码中用固定比例的SizedBox设置高度，会导致不同屏幕下布局适配性差。正确做法是使用Expanded组件替代固定高度容器，以下是具体修改方案：

修改步骤 #

• 移除包裹ListView的SizedBox，改用Expanded组件，它会自动占据Column中未被其他组件占用的剩余空间
• 将ListView的shrinkWrap设为false（Expanded已提供明确尺寸约束，无需让ListView根据内容收缩）
• 保留ScrollController和滚动逻辑，确保列表可正常滚动

修改后的关键代码 #

Widget editAndViewMode(BuildContext context) {
  final ScrollController scrollController = ScrollController();

  void scrollDown() {
    scrollController.animateTo(
      scrollController.position.maxScrollExtent,
      duration: const Duration(seconds: 1),
      curve: Curves.fastOutSlowIn,
    );
  }

  if (context.watch<GpaProvider>().editMode) {
    return Column(
      children: [
        // 上方其他组件代码（保持不变）

        // 替换原SizedBox为Expanded
        Expanded(
          child: ListView.builder(
            shrinkWrap: false, // 修改为false
            itemCount: context.watch<GpaProvider>().courseValues.length,
            physics: const AlwaysScrollableScrollPhysics(),
            scrollDirection: Axis.vertical,
            controller: scrollController,
            itemBuilder: (context, index) {
              // 列表项构建代码（保持不变）
            },
          ),
        ),

        // 下方其他组件代码（保持不变）
      ],
    );
  } else {
    return Column(
      children: [
        // 上方其他组件代码（保持不变）

        Expanded(
          child: ListView.builder(
            shrinkWrap: false,
            itemCount: context.watch<GpaProvider>().courseValues.length,
            physics: const AlwaysScrollableScrollPhysics(),
            scrollDirection: Axis.vertical,
            itemBuilder: (context, index) {
              // 列表项构建代码（保持不变）
            },
          ),
        ),

        // 下方其他组件代码（保持不变）
      ],
    );
  }
}

此前用Flexible出错的原因 #

Flexible默认fit: FlexFit.loose，不会强制子组件填充剩余空间，若未手动设置fit: FlexFit.tight，ListView无法获得足够布局约束，从而引发错误。而Expanded是Flexible的子类，默认fit: FlexFit.tight，更适合这类需要填充剩余空间的场景。

内容的提问来源于stack exchange，提问作者Sunken In Time