Flutter中InkWell水波纹效果在GridView下不生效如何解决

InkWell的水波纹默认绘制在组件树里离它最近的上层Material组件表面，你写的代码里水波纹被完全挡住了，根本显示不出来：

• 你给InkWell子节点里的Container设置了不透明橙色背景，这个背景的绘制层级比水波纹高，直接把水波纹盖得严严实实
• 最外层套的透明Material完全是多余的，里面的Card本身就是Material的子类，两层Material嵌套会打乱水波纹的渲染层级。

把背景色从子节点Container上挪到承载水波纹的Material（也就是这里的Card）上，删掉多余的外层透明Material，保证水波纹画在背景层上面、内容层下面就行。
修复后的CategoryItem组件代码：

@override
Widget build(BuildContext context) {
  return Card(
    margin: EdgeInsets.all(0),
    // 原来Container上的橙色背景挪到这里，作为Material的底色
    color: Colors.orange[100 * (index! % 12 + 1)],
    child: InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(30),
      highlightColor: Colors.blue.withOpacity(0.4),
      splashColor: Colors.green.withOpacity(0.5),
      child: Container(
        // 删掉Container的color属性，不要在这里设置不透明背景
        alignment: Alignment.center,
        child: Text(
          "test",
          style: TextStyle(fontSize: 16),
        ),
      ),
    ),
  );
}

• 所有需要放在水波纹下层的装饰（纯色背景、渐变、背景图），都不要在InkWell的子节点里设置，要放到InkWell对应的父级Material组件上
• 如果组件有圆角，要保证InkWell设置的borderRadius和父组件的裁剪圆角一致，避免水波纹溢出圆角边界。

内容的提问来源于stack exchange，提问作者Cyrus the Great