Flutter卡片顶部圆角边框不显示问题修复咨询

你的问题是Card的顶部圆角被内部的Image组件遮挡了——Image铺满Card顶部区域且未设置圆角，导致Card的圆角被覆盖。以下两种方案可在不改动现有布局的前提下解决：

方案一：给Image添加顶部圆角 #

用ClipRRect包裹Image，设置和Card一致的顶部圆角，让Image裁剪后适配Card的圆角：

ClipRRect(
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(10),
    topRight: Radius.circular(10),
  ),
  child: Image.asset(
    'images/1_1.png',
    height: 20.w,
    width: 20.w,
    fit: BoxFit.cover,
  ),
),

方案二：开启Card的裁剪行为 #

在Card组件中添加clipBehavior: Clip.hardEdge，让Card自动裁剪超出圆角范围的子组件，无需修改Image：

Card(
  elevation: 2,
  borderOnForeground: true,
  clipBehavior: Clip.hardEdge, // 添加该行
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10)),
  child: SizedBox(
    width: 20.w,
    height: 25.w,
    child: Center(
      // ... 原有子组件代码不变
    ),
  ),
),

补充说明：borderOnForeground属性控制的是Card的边框（需配合border参数使用）是否渲染在内容上方，你的场景里没有设置Card的border，且问题是内容超出圆角遮挡，所以这个属性对当前问题没有作用。

内容的提问来源于stack exchange，提问作者Fabio Apolinário