插件介绍

Navigation and Routing 是一个基于 Flutter Router API 构建的高级导航解决方案，为开发者提供了在鸿蒙平台上实现复杂导航场景的完整参考。该插件展示了现代 Flutter 应用中常见的导航模式和最佳实践，包括路径参数解析、登录验证/守卫、嵌套导航和深度链接支持。

主要功能特性：

• 灵活的路径参数解析：支持类似 /user/:id 的动态路由格式
• 完整的身份验证系统：实现了登录验证和路由守卫功能
• 嵌套导航架构：支持多层级导航结构
• 可重用的路由组件：提供了 RouterDelegate 和 RouteInformationParser 的通用实现
• 深度链接支持：展示了如何在鸿蒙平台上配置和使用深度链接
• 与 Link 组件集成：演示了如何将 package:url_Launcher 的 Link 小部件与 Router API 结合使用
• 页面转场动画：支持自定义页面过渡效果

使用步骤

1. 包的引入

由于这是一个自定义修改版本的 Flutter 包，需要通过 Git 形式引入。在您的鸿蒙 Flutter 项目的 pubspec.yaml 文件中添加以下依赖配置：

dependencies:
  navigation_and_routing:
    git:
      url: "https://atomgit.com/"
      path: "packages/navigation_and_routing/navigation_and_routing"

然后运行以下命令获取依赖：

flutter pub get

2. 初始化应用

在您的应用入口文件中，初始化 Navigation and Routing 应用：

import 'package:flutter/material.dart';
import 'package:navigation_and_routing/main.dart' as routing;

void main() {
  runApp(const MyNavigationApp());
}

class MyNavigationApp extends StatelessWidget {
  const MyNavigationApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const routing.Bookstore();
  }
}

3. 自定义路由配置

如果您需要自定义路由配置，可以按照以下方式实现：

import 'package:flutter/material.dart';
import 'package:navigation_and_routing/src/routing.dart';
import 'package:navigation_and_routing/src/auth.dart';
import 'package:navigation_and_routing/src/screens/navigator.dart';

class CustomNavigationApp extends StatefulWidget {
  const CustomNavigationApp({super.key});

  @override
  State<CustomNavigationApp> createState() => _CustomNavigationAppState();
}

class _CustomNavigationAppState extends State<CustomNavigationApp> {
  final _auth = BookstoreAuth();
  final _navigatorKey = GlobalKey<NavigatorState>();
  late final RouteState _routeState;
  late final SimpleRouterDelegate _routerDelegate;
  late final TemplateRouteParser _routeParser;

  @override
  void initState() {
    // 配置路由解析器
    _routeParser = TemplateRouteParser(
      allowedPaths: [
        '/signin',
        '/home',
        '/profile/:userId',
        '/settings',
        // 自定义路由
      ],
      guard: _guard,
      initialRoute: '/signin',
    );

    _routeState = RouteState(_routeParser);

    _routerDelegate = SimpleRouterDelegate(
      routeState: _routeState,
      navigatorKey: _navigatorKey,
      builder: (context) => BookstoreNavigator(
        navigatorKey: _navigatorKey,
      ),
    );

    super.initState();
  }

  // 路由守卫
  Future<ParsedRoute> _guard(ParsedRoute from) async {
    final signedIn = _auth.signedIn;
    final signInRoute = ParsedRoute('/signin', '/signin', {}, {});

    if (!signedIn && from != signInRoute) {
      return signInRoute;
    } else if (signedIn && from == signInRoute) {
      return ParsedRoute('/home', '/home', {}, {});
    }
    return from;
  }

  @override
  Widget build(BuildContext context) => RouteStateScope(
        notifier: _routeState,
        child: BookstoreAuthScope(
          notifier: _auth,
          child: MaterialApp.router(
            routerDelegate: _routerDelegate,
            routeInformationParser: _routeParser,
            theme: ThemeData(useMaterial3: true),
          ),
        ),
      );

  @override
  void dispose() {
    _routeState.dispose();
    _routerDelegate.dispose();
    super.dispose();
  }
}

API 调用

路由状态管理 API

1. RouteState 基本操作

// 获取 RouteState 实例
final routeState = RouteStateScope.of(context);

// 导航到指定路由
routeState?.go('/books/popular');

// 导航到带参数的路由
routeState?.go('/book/123');

// 获取当前路由参数
final bookId = routeState?.route.pathParameters['bookId'];

2. 使用 Link 组件导航

import 'package:url_launcher/link.dart';

Link(
  uri: Uri.parse('/author/456'),
  builder: (context, followLink) {
    return TextButton(
      child: const Text('查看作者详情'),
      onPressed: followLink,
    );
  },
);

身份验证 API

// 获取身份验证实例
final auth = BookstoreAuthScope.of(context);

// 检查登录状态
final isSignedIn = auth?.signedIn ?? false;

// 登录
auth?.signIn('username', 'password');

// 登出
auth?.signOut();

// 监听身份验证状态变化
auth?.addListener(() {
  setState(() {
    // 更新UI
  });
});

路由解析 API

// 创建路由解析器
final routeParser = TemplateRouteParser(
  allowedPaths: [
    '/signin',
    '/books/:category',
    '/book/:bookId',
  ],
  guard: (route) async {
    // 实现路由守卫逻辑
    return route;
  },
  initialRoute: '/signin',
);

// 解析路由
final parsedRoute = await routeParser.parseRouteInformation(
  RouteInformation(location: '/books/popular'),
);

// 获取路由信息
final path = parsedRoute.path;
final category = parsedRoute.pathParameters['category'];

鸿蒙平台适配要点

1. 深度链接配置：在鸿蒙平台上，需要在 ohos/manifest.json 文件中配置深度链接

2. 路由策略：在鸿蒙 Web 应用中，可以选择哈希路由策略或路径路由策略：

import 'package:url_strategy/url_strategy.dart';

// 使用哈希路由策略 (默认)
setHashUrlStrategy();

// 或使用路径路由策略
// setPathUrlStrategy();

3. 权限处理：确保应用具有网络访问权限，以便加载远程内容

4. 屏幕适配：应用会根据屏幕宽度自动调整导航布局，适配鸿蒙不同尺寸的设备

5. 状态管理：使用 InheritedNotifier 模式管理应用状态，确保在鸿蒙平台上的性能优化

总结

Flutter Navigation and Routing 插件为开发者提供了一个完整的导航解决方案，在鸿蒙平台上可以实现复杂的导航场景和深度链接功能。通过灵活的路由配置、身份验证系统和嵌套导航架构，开发者可以快速构建具有现代导航体验的鸿蒙应用。

该包的核心优势包括：

• 符合 Flutter 最佳实践的路由实现
• 可重用的导航组件和工具
• 完整的身份验证和路由守卫功能
• 与鸿蒙平台的深度集成
• 支持多种导航模式和页面过渡效果

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net