Container内ListView的ListTile悬浮阴影溢出问题求解

直接给你两种可行的解决办法：

方法一：给Container添加裁剪行为 #

在你的Container组件里加上clipBehavior: Clip.hardEdge属性，它会裁剪掉所有超出Container边界的内容，包括ListTile悬浮时产生的阴影。代码示例：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8), // 适配你的圆角设置
    color: Colors.white,
  ),
  clipBehavior: Clip.hardEdge, // 关键属性，裁剪溢出内容
  child: ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text("列表项 $index"),
        onTap: () {},
      );
    },
  ),
)

方法二：用Material组件替代Container #

如果你的Container主要用来设置背景色和圆角，也可以直接用Material组件包裹ListView，它对Material系组件（比如ListTile）的兼容性更好，同样加上clipBehavior属性即可：

Material(
  borderRadius: BorderRadius.circular(8),
  color: Colors.white,
  clipBehavior: Clip.hardEdge,
  child: ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text("列表项 $index"),
        onTap: () {},
      );
    },
  ),
)

原理很直白：ListTile是Material组件，悬浮时会生成阴影（elevation效果），默认父容器不会限制这些阴影的显示范围，加上裁剪属性后，超出父容器边界的部分就会被裁掉，不会溢出。

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