Flutter开发：如何避免Card内列表项背景色超出卡片圆角？

你的问题出在Card自带圆角，但内部子组件不会自动适配这个圆角，导致列表项的背景色从Card的圆角处溢出。下面是两种简单的解决方法：

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

直接给Card设置clipBehavior: Clip.hardEdge，让Card自动裁剪所有超出圆角范围的内部内容，这是最直接的方案：

Card(
  clipBehavior: Clip.hardEdge, // 新增裁剪配置
  child: Container(
    child: ListView.separated(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return Container(
          color: switch (index) {
            0 => const Color(0xfffce269),
            1 => const Color(0xffc1c8d1),
            2 => const Color(0xffe69b4b),
            _ => const Color(0xfff7f2f9),
          },
          padding: EdgeInsets.all(8),
          child: Text("${index + 1}: Placeholder"),
        );
      },
      separatorBuilder: (context, index) {
        return Divider(thickness: 1, height: 1);
      },
      itemCount: 15,
    ),
  ),
)

方法二：给内部Container单独设置裁剪（可选） #

如果不想让Card裁剪所有内容，也可以给包裹ListView的Container添加裁剪，并手动匹配Card的圆角：

Card(
  child: Container(
    clipBehavior: Clip.hardEdge,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12), // 匹配Card默认圆角大小，可按需调整
    ),
    child: ListView.separated(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return Container(
          color: switch (index) {
            0 => const Color(0xfffce269),
            1 => const Color(0xffc1c8d1),
            2 => const Color(0xffe69b4b),
            _ => const Color(0xfff7f2f9),
          },
          padding: EdgeInsets.all(8),
          child: Text("${index + 1}: Placeholder"),
        );
      },
      separatorBuilder: (context, index) {
        return Divider(thickness: 1, height: 1);
      },
      itemCount: 15,
    ),
  ),
)

补充说明 #

• Clip.hardEdge是性能最优的裁剪方式，适合这种简单的圆角场景；如果需要更平滑的边缘，可替换为Clip.antiAlias（性能略低）。
• Card的默认圆角大小是12dp，如果你修改了Card的shape属性，记得同步调整Container的borderRadius。

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