公告

👇欢迎大家关注公众号&私信交流👇

Skip to content

Flutter路由管理进阶

路由拦截

1. 全局路由拦截

dart
class GlobalRouteObserver extends NavigatorObserver {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    // 路由被压入栈时的处理
    print('新路由: ${route.settings.name}')
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    // 路由被弹出栈时的处理
    print('返回到: ${previousRoute?.settings.name}')
  }
}

2. 自定义路由拦截器

dart
class RouteInterceptor {
  static bool handleRoute(String routeName) {
    // 登录拦截
    if (_needLogin(routeName) && !isLoggedIn) {
      Navigator.pushNamed(context, '/login');
      return false;
    }
    return true;
  }

  static bool _needLogin(String routeName) {
    // 需要登录的路由列表
    return ['/profile', '/settings'].contains(routeName);
  }
}

路由守卫

1. 路由前置守卫

dart
class RouteGuard {
  static Future<bool> canActivate(String routeName) async {
    // 权限检查
    if (!await checkPermission(routeName)) {
      showPermissionDeniedDialog();
      return false;
    }
    
    // 其他条件检查
    if (!meetOtherConditions(routeName)) {
      return false;
    }
    
    return true;
  }
}

2. 路由解析守卫

dart
class RouteResolver extends RouteInformationParser<RouteState> {
  @override
  Future<RouteState> parseRouteInformation(
    RouteInformation routeInformation
  ) async {
    final uri = Uri.parse(routeInformation.location!);
    
    // 路由参数验证
    if (!validateParams(uri.queryParameters)) {
      return RouteState.error();
    }
    
    return RouteState.fromUri(uri);
  }
}

路由状态管理

1. 路由状态持久化

dart
class RouteStateManager {
  // 保存路由历史
  static Future<void> saveRouteHistory(String routeName) async {
    final prefs = await SharedPreferences.getInstance();
    final history = prefs.getStringList('route_history') ?? [];
    history.add(routeName);
    await prefs.setStringList('route_history', history);
  }

  // 恢复路由状态
  static Future<void> restoreRouteState() async {
    final prefs = await SharedPreferences.getInstance();
    final lastRoute = prefs.getString('last_route');
    if (lastRoute != null) {
      Navigator.pushNamed(context, lastRoute);
    }
  }
}

2. 路由栈管理

dart
class RouteStackManager {
  static final List<String> _routeStack = [];

  // 压入路由
  static void push(String routeName) {
    _routeStack.add(routeName);
    _updateRouteState();
  }

  // 弹出路由
  static String? pop() {
    if (_routeStack.isNotEmpty) {
      final route = _routeStack.removeLast();
      _updateRouteState();
      return route;
    }
    return null;
  }

  // 更新路由状态
  static void _updateRouteState() {
    // 处理路由状态变化
  }
}

高级特性

1. 深层链接处理

dart
class DeepLinkHandler {
  static Future<void> handleDeepLink(String link) async {
    final uri = Uri.parse(link);
    
    // 解析深层链接
    final route = parseDeepLink(uri);
    if (route != null) {
      // 处理路由跳转
      await Navigator.pushNamed(context, route);
    }
  }

  static String? parseDeepLink(Uri uri) {
    // 实现深层链接解析逻辑
    return null;
  }
}

2. 路由动画定制

dart
class CustomPageRoute extends PageRouteBuilder {
  final Widget page;

  CustomPageRoute({required this.page})
    : super(
        pageBuilder: (context, animation, secondaryAnimation) => page,
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          return FadeTransition(
            opacity: animation,
            child: child,
          );
        },
      );
}

最佳实践

1. 路由命名规范

  • 使用常量定义路由名称
  • 采用层级化的命名方式
  • 保持命名的一致性

2. 错误处理

  • 实现404页面
  • 优雅处理路由错误
  • 提供用户友好的提示

3. 性能优化

  • 路由预加载
  • 路由缓存管理
  • 减少不必要的路由跳转

4. 安全考虑

  • 敏感页面的访问控制
  • 参数验证和清理
  • 防止路由劫持

常见问题

1. 路由参数丢失

  • 使用路由参数持久化
  • 正确处理页面重建
  • 实现参数恢复机制

2. 返回键行为

  • 自定义返回逻辑
  • 处理多级返回
  • 防止意外退出

3. 内存管理

  • 及时释放资源
  • 控制路由栈深度
  • 避免循环引用

总结

高级路由管理是Flutter应用开发中的重要环节,通过合理使用:

  • 路由拦截和守卫
  • 状态管理
  • 深层链接
  • 自定义动画

可以构建出更加健壮和用户友好的应用。掌握这些进阶特性,能够帮助开发者处理更复杂的导航场景,提供更好的用户体验。