添加GoRouter导航后ListTile点击无波纹效果的原因与解决方法

核心原因是context.pushNamed会立即触发页面跳转，当前页面的Widget树被快速销毁，导致波纹动画还没渲染完成就被中断了。以下是几个可行的解决办法：

• 给导航加短暂延迟
  给跳转逻辑加个150ms左右的延迟，刚好覆盖Flutter默认波纹动画的时长，让波纹能完整展示：

  ListTile(
    title: const Text('前往目标页面'),
    onTap: () {
      Future.delayed(const Duration(milliseconds: 150), () {
        context.pushNamed('target_route_name');
      });
    },
  )
  

• 用InkResponse手动控制交互
  取消ListTile自身的onTap，用InkResponse包裹它，再在InkResponse的onTap里加延迟导航，确保波纹的渲染上下文不会被立即销毁：

  Material(
    child: InkResponse(
      splashColor: Theme.of(context).splashColor,
      highlightColor: Theme.of(context).highlightColor,
      onTap: () {
        Future.delayed(const Duration(milliseconds: 120), () {
          context.pushNamed('target_route_name');
        });
      },
      child: const ListTile(
        title: Text('前往目标页面'),
      ),
    ),
  )
  

• 调整动画时长匹配延迟
  如果觉得默认延迟不合适，可以根据自定义的波纹动画时长调整延迟时间，或者通过Theme修改全局的波纹动画参数，让延迟和动画时长完全匹配。

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