我完全明白你想要的效果——整个页面（顶部的Text('foo')、中间的列表和底部的Text('bar')）作为一个整体滚动，就像你给出的HTML示例那样。之前的写法问题出在让ListView自己占据独立的滚动空间，而不是把所有元素放在同一个滚动容器里。

问题根源 #

你原来用Column + Expanded的方式，是让ListView占满Column的剩余空间，ListView自身会独立滚动，顶部和底部的文本则固定在上下，这就和你要的整体滚动不符。而给Container设置height: double.maxFinite会让ListView试图占据无限高度，自然会触发溢出错误。

正确解决方案 #

我们需要用SingleChildScrollView包裹所有内容，同时调整ListView的属性，让它不再独立滚动，而是作为整体滚动内容的一部分：

• 用SingleChildScrollView包裹住原来的Column，让所有元素都处于同一个滚动容器内
• 给ListView.builder添加两个关键属性：
  • shrinkWrap: true：让ListView根据子项的总高度收缩自身，不再默认占满可用空间
  • physics: const NeverScrollableScrollPhysics()：禁用ListView自身的滚动功能，避免和外层的SingleChildScrollView产生滚动冲突

完整代码示例 #

body: SingleChildScrollView(
  child: Column(
    children: [
      const Text('foo'),
      ListView.builder(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        controller: ..., // 你的控制器可以保留，不过当前场景下可能用不上了
        itemCount: ...,
        itemBuilder: ...,
      ),
      const Text('bar')
    ],
  ),
)

效果说明 #

这样修改后，整个页面的内容（顶部文本、列表、底部文本）会被SingleChildScrollView统一管理，当内容高度超过屏幕时，整个页面会一起滚动，完全匹配你给出的HTML示例的滚动效果。

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