Flutter中ListView滚动时超出Container范围的问题排查

你遇到的核心问题是给ListView设置了shrinkWrap: true，这个属性会让ListView根据自身内容的总高度调整尺寸，而非继承父容器（固定高度的Container）的高度。即便使用了ClipRect，也无法阻止ListView滚动时暴露超出父容器的内容。

解决方案 #

1. 移除ListView的shrinkWrap: true，让它自动继承父Container的固定高度
2. 将physics设置为AlwaysScrollableScrollPhysics()（或直接删除该属性使用默认值，默认物理效果已支持滚动）
3. 若SettingButton存在超出父容器的margin/padding，需同步调整这些属性避免内容本身溢出

修改后的核心代码片段 #

Container(
  height: 265,
  width: double.infinity,
  color: Colors.amber,
  padding: const EdgeInsets.symmetric(horizontal: 16),
  // 移除外层ClipRect（移除shrinkWrap后不再需要）
  child: ListView.separated(
    // 删掉shrinkWrap: true
    physics: AlwaysScrollableScrollPhysics(),
    padding: const EdgeInsets.all(0),
    itemCount: meditationMusicList.length,
    separatorBuilder: (context, index) => SizedBox(height: 10),
    itemBuilder: (context, index) {
      return SettingButton(
        buttonTitle: meditationMusicList[index],
        iconPath: Images.playIcon,
        onTap: () {
          print('${meditationMusicList[index]} oynatılıyor...');
        },
        hasArrow: false,
      );
    },
  ),
)

额外检查点 #

外层Column使用了mainAxisSize: MainAxisSize.min同时包含Spacer，这会让Column尽可能占据空间，虽不是溢出直接原因，但如果后续布局出现异常，可考虑调整mainAxisSize或移除Spacer。

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