Flutter中仅配置onTap的InkWell的splash水波纹效果约1秒后自动消失

问题原因 #

你遇到的InkWell水波纹自动消失的问题主要来自两个常见场景：

• Flutter框架默认配置：InkWell继承自InkResponse，水波纹效果的默认持续时长splashDuration预设为1秒，动画执行完成后会自动消失，属于框架默认的交互规范。
• 状态更新触发组件重建：你的PageIcon组件UI依赖selected参数，点击触发onTap回调时如果修改了selected状态，会触发组件重建，已触发的水波纹实例会因为组件重绘被销毁，导致效果提前中断。

解决方案 #

根据你的使用场景可以选择对应方案：

方案1：调整默认水波纹时长

如果只是需要延长水波纹的显示时间，直接给InkWell配置splashDuration参数即可，可按需自定义时长：

InkWell(
  mouseCursor: SystemMouseCursors.click,
  onTap: onTap,
  // 示例设置为3秒后消失，可自行调整时长
  splashDuration: const Duration(seconds: 3),
  child: // 原有子组件代码保持不变
)

方案2：解决状态更新导致的水波纹中断

如果是点击后修改selected状态触发重建导致水波纹提前消失，可以把状态更新逻辑延迟到水波纹动画结束后执行：

InkWell(
  mouseCursor: SystemMouseCursors.click,
  onTap: () {
    // 等水波纹默认动画执行完成后再更新状态
    Future.delayed(const Duration(milliseconds: 1000), () {
      onTap.call();
    });
  },
  splashDuration: const Duration(milliseconds: 1000),
  child: // 原有子组件代码保持不变
)

方案3：实现常驻选中高亮

如果需要点击后一直保持高亮效果直到下一次切换选中态，不建议修改水波纹逻辑，直接根据selected状态叠加固定半透明背景即可，实现更稳定：

Material(
  color: selected ? Colors.blue.withOpacity(0.1) : Colors.transparent,
  child: InkWell(
    // 原有InkWell配置保持不变
  )
)

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