Flutter中如何让Card内的背景图片适配圆角边框？

Card组件默认不会主动裁剪子组件内容，你设置的shape属性仅作用于Card自身的外观定义，子Container的背景图不会被Card的圆角自动裁剪，因此会出现溢出圆角边界的情况。

直接给Card组件添加clipBehavior属性，设置为Clip.antiAlias即可实现子内容跟随Card圆角裁剪，修改后的代码如下：

Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    // 新增这一行开启裁剪
    clipBehavior: Clip.antiAlias,
    color: Colors.white,
    child: Container(
      decoration: BoxDecoration(
        image: DecorationImage(
            fit: BoxFit.fill,
            colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
            image: AssetImage("assets/images/dummy_card.jpg")
        ),
      ),
      child: Column()
    ),
  )

Clip.antiAlias是最常用的圆角裁剪模式，边缘平滑、性能开销适中，完全满足普通卡片圆角场景需求。如果对性能要求极高，可替换为Clip.hardEdge，边缘锯齿会稍明显，但性能更优。

如果不想修改Card的全局裁剪行为，也可以给子Container套一层ClipRRect组件，手动设置和Card一致的圆角即可：

Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    color: Colors.white,
    child: ClipRRect(
      // 圆角数值和Card保持一致即可
      borderRadius: BorderRadius.circular(15.0),
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              fit: BoxFit.fill,
              colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
              image: AssetImage("assets/images/dummy_card.jpg")
          ),
        ),
        child: Column()
      ),
    ),
  )

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