跳转到正文
YGJoon
返回

Flutter路由管理进阶

编辑文章

路由拦截

1. 全局路由拦截

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. 自定义路由拦截器

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. 路由前置守卫

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

2. 路由解析守卫

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. 路由状态持久化

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. 路由栈管理

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. 深层链接处理

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. 路由动画定制

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. 错误处理

3. 性能优化

4. 安全考虑

常见问题

1. 路由参数丢失

2. 返回键行为

3. 内存管理

总结

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

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


编辑文章
分享这篇文章:

上一篇
Flutter集成微信SDK - Fluwx详解
下一篇
Kotlin/JS 系列文章索引