ListView内的ListTile滚动时覆盖其他Widget如何解决？

直接解决方案 #

• 删掉ListView的shrinkWrap: true：你已经给外层SizedBox设了固定高度300，shrinkWrap会让ListView无视这个限制，根据子项高度自适应，导致布局计算混乱，滚动时子项溢出到其他区域。
• 给ListView加clipBehavior: Clip.hardEdge：强制裁剪超出ListView范围的内容，防止ListTile滚动时覆盖下方组件。
• （可选）调整ListTile的contentPadding：如果ListTile默认内边距导致布局拥挤，可手动设置合适的内边距优化显示。

修改后的完整代码 #

Column(children: [
    const ChatHeader(),
    Padding(
        padding: const EdgeInsets.all(8),
        child: SizedBox(
            height: 300,
            child: ListView.builder(
                padding: const EdgeInsets.only(left: 8, right: 8),
                scrollDirection: Axis.vertical,
                itemCount: myCollection.length, // 原代码此处写错，需改为集合长度
                physics: const BouncingScrollPhysics(),
                clipBehavior: Clip.hardEdge, // 添加裁剪配置
                itemBuilder: (BuildContext context, int index) {
                  var item = myCollection[index];
                  return Column(children: [
                    Row(
                      children: [
                        Container(
                            decoration: boxDecoration(
                                radius: 20, bgColor: d_colorPrimary)),
                        text("${item.value1}", fontSize: textSizeMedium)
                      ],
                    ),
                    ListTile(
                        dense: true,
                        contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4), // 可选：自定义内边距
                        shape: const RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(8))),
                        tileColor: quiz_light_gray,
                        title: SizedBox(
                            child: text(item.name,
                                fontSize: textSizeMedium,
                                textColor: d_textColorPrimary,
                                isLongText: true,
                                maxLine: 10)))
                  ]);
                }))),
    const SizedBox(height: 16), // 替换扩展方法为标准组件写法
    Container(color: greenColor, child: const Text("text input here"))
  ]);

问题原因说明 #

1. shrinkWrap冲突：当父容器（SizedBox）已经指定固定高度时，shrinkWrap: true会让ListView放弃父容器的高度约束，尝试根据子项总高调整自身高度，这会导致ListView实际高度超出SizedBox范围，滚动时子项自然会覆盖下方组件。
2. 裁剪缺失：默认情况下ListView的clipBehavior是Clip.none，超出边界的内容不会被裁剪，所以ListTile滚动时会“跑”到ListView外面的区域。加上Clip.hardEdge就能把超出部分裁掉，保证布局边界正确。
3. 额外错误修正：原代码中itemCount: myCollection是类型错误，必须改为myCollection.length，否则无法正常运行。

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