插件介绍

navigation_and_routing 是一个功能强大的 Flutter 路由管理示例项目，展示了如何使用 Flutter 的 Router API 处理复杂的导航场景。该插件专为需要高级路由控制的中大型应用设计，提供了一套通用的路由解决方案，支持多种导航场景和深度链接配置。

主要功能和特性

• 路径参数解析：支持解析复杂的路径参数（如 /book/:id）
• 路由守卫：实现登录验证和路由访问控制
• 嵌套导航：支持多层级的嵌套导航结构
• 深度链接：演示了 iOS 和 Android 平台的深度链接配置
• 灵活的路由切换：支持通过 RouteState 或 Link widget 改变当前路由
• 可复用的路由实现：提供了 RouterDelegate 和 RouteInformationParser 的通用实现
• 完整的示例应用：包含书店应用的完整路由实现，便于学习和参考

使用步骤

1. 包的引入

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

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

2. 项目配置

在项目的 main.dart 文件中，初始化路由配置：

import 'package:flutter/material.dart';
import 'package:url_strategy/url_strategy.dart';
import 'package:navigation_and_routing/src/app.dart';
import 'package:navigation_and_routing/src/routing.dart';

void main() {
  // 设置 URL 策略
  setHashUrlStrategy();

  runApp(const Bookstore());
}

3. 路由系统初始化

在应用的根组件中，配置路由系统：

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

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

  @override
  Widget build(BuildContext context) {
    // 初始化路由状态
    final routeState = RouteState(TemplateRouteParser(
      allowedPaths: [
        '/',
        '/authors',
        '/author/:id',
        '/books',
        '/book/:id',
        '/settings',
        '/signin',
      ],
      initialRoute: '/',
      guard: (route) async {
        // 实现路由守卫逻辑
        final signedIn = BookstoreAuthScope.of(context)?.isSignedIn ?? false;
        final signInRoute = ParsedRoute('/signin', '/signin', {}, {});

        if (route == signInRoute) {
          return signedIn ? ParsedRoute('/', '/', {}, {}) : route;
        }

        return signedIn ? route : signInRoute;
      },
    ));

    return RouteStateScope(
      notifier: routeState,
      child: LibraryScope(
        notifier: LibraryState(),
        child: BookstoreAuthScope(
          notifier: BookstoreAuth(),
          child: MaterialApp.router(
            routerDelegate: SimpleRouterDelegate(
              routeState: routeState,
              builder: (context) => const BookstoreScaffold(),
              navigatorKey: GlobalKey<NavigatorState>(),
            ),
            routeInformationParser: TemplateRouteParser(
              allowedPaths: [
                '/',
                '/authors',
                '/author/:id',
                '/books',
                '/book/:id',
                '/settings',
                '/signin',
              ],
              initialRoute: '/',
            ),
          ),
        ),
      ),
    );
  }
}

4. 核心 API 调用

路由状态管理

// 获取路由状态
final routeState = RouteStateScope.of(context);

// 导航到新路由
routeState!.go('/book/1');

// 获取当前路由信息
final currentRoute = routeState.route;
print('当前路径: ${currentRoute.path}');
print('路径模板: ${currentRoute.pathTemplate}');
print('路径参数: ${currentRoute.params}');
print('查询参数: ${currentRoute.queryParams}');

使用 Link Widget

import 'package:flutter/material.dart';
import 'package:url_launcher/link.dart';

Link(
  uri: Uri.parse('/book/0'),
  builder: (context, followLink) {
    return TextButton(
      child: const Text('查看书籍详情 (Link)'),
      onPressed: followLink,
    );
  },
),

路由守卫实现

TemplateRouteParser(
  allowedPaths: [
    '/',
    '/protected',
    '/signin',
  ],
  guard: (route) async {
    final isAuthenticated = await checkAuthStatus();

    if (route.pathTemplate == '/protected' && !isAuthenticated) {
      return ParsedRoute('/signin', '/signin', {}, {});
    }

    return route;
  },
)

5. 鸿蒙平台适配注意事项

1. 深度链接配置：在鸿蒙平台上，需要在 module.json5 文件中配置深度链接支持：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "示例应用",
    "mainElement": "EntryAbility",
    "deviceTypes": ["phone", "tablet"],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry"
    },
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "应用入口",
        "icon": "$media:app_icon",
        "label": "NavigationAndRouting",
        "startWindowIcon": "$media:app_icon",
        "startWindowBackground": {
          "color": "#FFFFFF"
        },
        "skills": [
          {
            "entities": ["entity.system.home"],
            "actions": ["action.system.home"]
          },
          {
            "entities": [],
            "actions": ["action.view.data"],
            "uris": [
              {
                "scheme": "https",
                "host": "example.com",
                "path": "/book/*"
              }
            ]
          }
        ]
      }
    ]
  }
}

2. URL 策略设置：在鸿蒙平台上，推荐使用哈希 URL 策略：

setHashUrlStrategy();

总结

navigation_and_routing 是一个功能全面的 Flutter 路由管理示例，展示了如何使用 Flutter 的 Router API 构建复杂的导航系统。它提供了路由解析、路由守卫、嵌套导航等高级功能，非常适合中大型应用使用。

在鸿蒙平台上使用该插件时，需要注意深度链接的配置和 URL 策略的选择。通过以 Git 形式引入依赖，可以方便地使用自定义修改版本的路由管理功能。

该插件的设计遵循了 Flutter 的最佳实践，代码结构清晰，易于理解和扩展，是学习 Flutter 路由管理的优秀资源。

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