Flutter卡片鼠标悬停时border-radius不生效问题求助

问题原因 #

InkWell的墨水效果（包括hover状态）默认是矩形区域，不会自动继承父级Card的圆角配置，所以悬停时的绿色背景会超出Card的圆角范围，显示直角。

解决方案 #

给InkWell添加borderRadius属性，和Card的圆角保持一致，就能让悬停效果贴合Card的圆角。修改后的卡片代码如下：

Card(
  child: InkWell(
    // 新增：设置和Card一致的圆角
    borderRadius: BorderRadius.circular(15.0),
    onTap: () {},
    child: Padding(
      padding: EdgeInsets.all(10),
      child: Wrap(
        runSpacing: 5,
        children: [
          Icon(Icons.memory),
          RichText(
            text: TextSpan(
                text: 'Title : ',
                style: Theme.of(context).textTheme.titleSmall,
                children: [
                  TextSpan(
                      text: 'Memory',
                      style: Theme.of(context).textTheme.bodyMedium)
                ]),
          ),
          RichText(
            softWrap: true,
            text: TextSpan(
                text: 'Des : ',
                style: Theme.of(context).textTheme.titleSmall,
                children: [
                  TextSpan(
                      text: 'Currently used memory 250 GB remaining is 250 GB ..... !!!!',
                      style: Theme.of(context).textTheme.bodyMedium)
                ]),
          )
        ],
      ),
    ),
  ),
)

如果想通过主题统一配置，避免硬编码圆角数值，也可以直接引用主题中Card的圆角设置：

Card(
  child: InkWell(
    borderRadius: Theme.of(context).cardTheme.shape?.borderRadius ?? BorderRadius.circular(15.0),
    onTap: () {},
    // 其余代码不变
  ),
)

这样修改后，悬停时的绿色背景就会完全贴合Card的圆角，不会再出现直角问题。

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