Flutter使用go_router如何避免重复推页并保留水波纹效果

方法一：用防抖函数限制重复触发 #

写一个简单的防抖工具函数，确保150ms内只会执行一次跳转逻辑，刚好匹配水波纹的延迟时长，双击操作也只会触发一次跳转。

先定义防抖函数：

Function debounce(Function func, Duration delay) {
  Timer? timer;
  return () {
    if (timer != null) timer!.cancel();
    timer = Timer(delay, () => func());
  };
}

在页面中初始化防抖后的跳转方法：

final navigateToSample = debounce(() {
  context.push("/SampleNextPage");
}, const Duration(milliseconds: 150));

修改按钮的onTap逻辑：

onTap: () {
  // 水波纹效果立即触发，防抖后的跳转只会执行一次
  navigateToSample();
},

方法二：跳转前检查当前路由路径 #

在延迟执行跳转前，先判断当前页面是否已经是目标页面，避免重复推入栈。

修改onTap逻辑：

onTap: () {
  Future.delayed(const Duration(milliseconds: 150), () {
    final currentPath = GoRouter.of(context).location;
    // 当前路径不是目标页面时才跳转
    if (currentPath != "/SampleNextPage") {
      context.push("/SampleNextPage");
    }
  });
},

方法三：用状态变量控制按钮可点击状态 #

给页面添加一个状态变量标记是否正在导航，点击时先判断状态，防止重复触发。

如果是StatefulWidget，代码如下：

bool _isNavigating = false;

// 修改按钮的onTap
onTap: () {
  if (_isNavigating) return;
  _isNavigating = true;
  
  Future.delayed(const Duration(milliseconds: 150), () {
    context.push("/SampleNextPage").then((_) {
      // 页面返回后恢复按钮可点击状态
      _isNavigating = false;
    });
  });
},

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