Flutter 跨文件引入ListView组件时底部溢出滚动失效问题

该底部溢出、列表滚动失效问题与组件是否抽离到独立外部文件无关联，本质是Column布局嵌套ListView的约束冲突：
Column是垂直方向的非滚动布局，会给子组件传递「无界垂直高度」的约束；而ListView作为可滚动组件，默认会尝试撑满所有可用垂直高度，二者嵌套时如果没有额外约束，ListView会持续计算高度直到超出屏幕可用范围，触发Bottom overflowed报错。
代码写在同一文件时可运行属于热重载缓存导致的临时现象，抽离组件后触发全量代码重建，布局约束问题就会暴露。

优先选择最符合Flutter布局规范的方案：给嵌套在Column内的ExerciseList组件外层包裹Expanded，让ListView自动占用Column的剩余可用高度，在固定高度范围内实现滚动。
修改后的Home页面代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_application_1/Pages/widgets/exercise_list.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: const [
            // 用Expanded包裹列表，分配Column剩余垂直空间
            Expanded(
              child: ExerciseList()
            )
          ],
        ),
      ),
    );
  }
}

其他可选适配方案：

• 如果你不需要列表占满Column剩余高度，可给ExerciseList外层包裹SizedBox设置固定高度，配合现有shrinkWrap: true属性，让列表在固定高度内滚动。
• 如果你需要整个页面（包括列表外的其他Column内容）整体滚动，可给Column外层包裹SingleChildScrollView，同时给内部ListView设置physics: const NeverScrollableScrollPhysics()禁用列表自身滚动，避免多层滚动组件冲突。

注意：你当前ExerciseList中已经配置shrinkWrap: true，该属性只会让ListView适配子组件的总高度，当子组件总高度超过屏幕可用范围时，依然需要外层组件给出明确高度约束才能正常触发滚动，避免溢出。

内容的提问来源于stack exchange，提问作者MûHammad UMar