Flutter GoRouter 如何实现 SingleTop

有些页面需要保持单例，比如：历史 -> 详情 -> 历史-> 详情，在返回的时候需要多次返回历史页面和详情页面,期望的场景是历史页面和详情页面都是单例，假如一个用户的路径是：

  1. 主页 -> 历史 -> 详情 -> 历史，那么路由栈应该是 主页 -> 历史。
  2. 主页 -> 历史 -> 详情 -> 历史 -> 详情，那么路由栈应该是 主页 -> 历史 -> 详情

替换 Router 实现，比如 AutoRoute 不太现实，有太多页面了，测试工作量很大。

GoRouter 本身只支持push, pushReplacement, go, replace, pop。

  RouteMatchList _updateRouteMatchList(
    RouteMatchList newMatchList, {
    required RouteMatchList? baseRouteMatchList,
    required Completer<Object?>? completer,
    required NavigatingType type,
  }) {
    switch (type) {
      case NavigatingType.push:
        return baseRouteMatchList!.push(
          ImperativeRouteMatch(
            pageKey: _getUniqueValueKey(),
            completer: completer!,
            matches: newMatchList,
          ),
        );
      case NavigatingType.pushReplacement:
        final RouteMatch routeMatch = baseRouteMatchList!.last;
        return baseRouteMatchList.remove(routeMatch).push(
              ImperativeRouteMatch(
                pageKey: _getUniqueValueKey(),
                completer: completer!,
                matches: newMatchList,
              ),
            );
      case NavigatingType.replace:
        final RouteMatch routeMatch = baseRouteMatchList!.last;
        return baseRouteMatchList.remove(routeMatch).push(
              ImperativeRouteMatch(
                pageKey: routeMatch.pageKey,
                completer: completer!,
                matches: newMatchList,
              ),
            );
      case NavigatingType.go:
        return newMatchList;
      case NavigatingType.restore:
        // Still need to consider redirection.
        return baseRouteMatchList!.uri.toString() != newMatchList.uri.toString()
            ? newMatchList
            : baseRouteMatchList;
    }
  }

Flutter GoRouter 如何实现 SingleTop

更多关于Flutter GoRouter 如何实现 SingleTop的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GoRouter 如何实现 SingleTop的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，GoRouter 是一个功能强大的路由管理工具，它允许你定义复杂的导航逻辑。要实现类似于 Android 中 SingleTop 的行为，即当目标路由已经在栈顶时，不会创建新的实例，你可以使用 GoRouter 提供的 stackBehavior 配置选项。

SingleTop 的行为通常意味着如果目标路由已经在路由栈的顶部，那么应该直接复用该路由实例而不是在栈上再推送一个新的实例。虽然 GoRouter 没有直接命名为 SingleTop 的配置，但你可以通过配置 stackBehavior 为 replace 或 replaceCurrentAndPush 来间接实现类似效果。

如果你希望在目标路由已经在栈顶时不再推送新实例，可以直接在目标路由的配置中使用 stackBehavior: NavigationStackBehavior.replace。这样，当导航到该路由时，如果它已经在栈顶，GoRouter 将会替换当前实例（实际上因为没有新实例被推入，所以效果类似 SingleTop）。

示例代码：

GoRouter.builder()
  .routes([
    GoRoute(
      path: '/target',
      builder: (context, state) => TargetScreen(),
      stackBehavior: NavigationStackBehavior.replace, // 关键点
    ),
    // 其他路由配置
  ])
  .build();

通过这种方式，你可以模拟 SingleTop 的行为，确保在目标路由已经在栈顶时不会重复创建实例。注意，根据你的具体需求，可能需要调整 stackBehavior 的配置来适应不同的导航场景。

回到顶部