如何在Flutter的GoRouter+StatefulShell中区分路由退出触发源

核心思路：通过导航参数标记来源 #

GoRouter没有直接提供区分两种导航触发方式的API，但可以通过给编程式导航添加自定义标记参数，在onExit或redirect中检查该参数来判断触发源。

具体实现步骤 #

1. 修改编程式导航代码，添加标记

在HomePage的onDestinationSelected方法中，调用context.go时通过extra参数传入自定义标记：

onDestinationSelected: (int index) {
  setState(() {
    _selectedIndex = index;
  });
  // 添加extra标记，区分编程式导航
  if (index == 0) {
    context.go('/', extra: {'navSource': 'programmatic'});
  } else if (index == 1) {
    context.go('/settings', extra: {'navSource': 'programmatic'});
  }
},

2. 在onExit中检测来源

修改路由的onExit回调，通过state.extra判断导航触发源：

GoRoute(
  path: '/',
  onExit: (context, state) {
    // 检查是否存在编程式导航标记
    final isProgrammatic = state.extra != null && 
        (state.extra as Map<String, dynamic>)['navSource'] == 'programmatic';
    
    if (isProgrammatic) {
      log('路由退出来自编程式导航（导航栏切换）');
      // 这里添加编程式导航的处理逻辑
    } else {
      log('路由退出来自浏览器返回按钮');
      // 这里添加浏览器返回的处理逻辑
    }
    return true;
  },
  // ... 其他配置
),

3. 在redirect中检测来源（可选）

如果需要在redirect中区分，同样可以检查state.extra：

redirect: (context, state) {
  final isProgrammatic = state.extra != null && 
      (state.extra as Map<String, dynamic>)['navSource'] == 'programmatic';
  
  if (isProgrammatic) {
    log('重定向触发自编程式导航');
  } else {
    log('重定向触发自浏览器返回');
  }
  return null;
},

优化建议：封装自定义导航方法 #

为了避免遗漏标记，可以封装一个全局的自定义导航方法，统一处理编程式导航的标记：

void appGo(BuildContext context, String location) {
  context.go(location, extra: {'navSource': 'programmatic'});
}

之后所有编程式导航都调用appGo(context, '/xxx')，确保标记不会遗漏。

原理说明 #

• 浏览器返回按钮触发的导航，state.extra会是null，因为这是浏览器历史栈的原生操作，不会携带自定义参数。
• 编程式导航通过extra传入的参数会被GoRouter保留，在onExit和redirect中可以直接读取。

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