Flutter路由管理插件router_management的使用

路由管理

一个为Flutter开发者封装了Navigator 2.0并提供语法糖的插件。

开始使用

通过Flutter CLI安装插件

$ flutter pub add router_management

手动安装插件

打开pubspec.yaml文件，在dependencies:下添加以下内容：

dependencies:
   router_management: ^3.1.0
   ...

使用说明

1. 创建一个继承自NavigationWidgetMixin的NavigationWidget，用于构建一个Router

class App extends StatelessWidget with NavigationWidgetMixin {
  App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: routeInformationParser,
      routerDelegate: routerDelegate,
      title: 'Router Management Example',
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
    );
  }
}

或者

class App extends StatefulWidget with NavigationWidgetMixin {
  App({Key? key}) : super(key: key);

  [@override](/user/override)
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: widget.routeInformationParser,
      routerDelegate: widget.routerDelegate,
      title: 'Router Management Example',
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
    );
  }
}

2. 创建一个代表页面的Widget

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  // 声明路径
  static const path = '/home/:name';

  // 声明名称
  static const name = 'Home';

  [@override](/user/override)
  Widget build(BuildContext context) {
    final arguments = context.arguments; // 获取页面参数

    return Scaffold(
      body: Center(
        child: Text(
          'Welcome ${arguments.params['name']}',
          style: const TextStyle(fontSize: 32, color: Colors.black),
        ),
      ),
    );
  }
}

3. 在main()方法中实现NavigationRouter

void main() {
  runApp(NavigationRouter(
    child: App(), // 继承自NavigationWidgetMixin的Widget
    pages: [
      NavigationPage(
        path: SplashScreen.path,
        builder: () => const SplashScreen(),
        name: SplashScreen.name,
      ),
      NavigationPage(
        path: HomeScreen.path,
        builder: () => const HomeScreen(),
        name: HomeScreen.name,
      ),
    ], // 页面列表
    initialPage: SplashScreen.path,  // 初始页面路径，默认为"/"
    unknownPage: NavigationPage(
      path: NotFound.path,
      builder: () => const NotFound(),
      name: NotFound.name,
    ), // 当传递未知路径时构建的页面
  ));
}

4. 使用Navigation实例来控制Navigator 2.0

// 使用NavigationService.instance控制Navigator 2.0
NavigatorService.instance.pushReplacement('/home/John Doe');

// 或者使用Router Management扩展在BuildContext上
context.navigator.pushReplacement('/home/John Doe');

5. 使用BuildContext上的扩展来获取路径参数

[@override](/user/override)
Widget build(BuildContext context) {
  final arguments = context.arguments;
  ...
}

6. 持续编码 :)

API

Router Management 提供了许多API来确保可以处理Navigator 2.0。

NavigationRouter

这是实现Navigator 2.0的核心Widget。

Props

Static Methods

NavigationRouterGuard

用于验证页面，如果页面不能激活，则将重定向到另一个页面。

Props

NavigationPage

用于在NavigationRouter中创建一个页面。

Props

NavigationService

用于获取实际的Navigation实例的核心类。

Static Methods

Navigation

用于控制Navigator 2.0的核心导航接口。

Methods

Getters

PageArguments

用于获取当前页面的参数。

Props

扩展

Router Management 提供了两个扩展以保持代码整洁。

NavigationExtension

用于在BuildContext上获取当前Navigation实例。

Getters

PageArgumentsExtension

用于在BuildContext上获取当前PageArguments。

Getters

完整示例Demo

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:router_management/router_management.dart';

import 'ui/home_screen.dart';
import 'ui/not_found.dart';
import 'ui/profile_screen.dart';
import 'ui/splash_screen.dart';

void main() {
  runApp(
    NavigationRouter(
      child: App(), // The NavigationWidgetMixin that builds a Router
      pages: [
        NavigationPage(
          path: SplashScreen.path,
          builder: () => const SplashScreen(),
          name: SplashScreen.name,
        ),
        NavigationPage(
          path: HomeScreen.path,
          builder: () => const HomeScreen(),
          name: HomeScreen.name,
        ),
        NavigationPage(
          path: ProfileScreen.path,
          builder: () => NavigationRouterGuard(
            child: const ProfileScreen(),
            validation: (args) async {
              if (args.query['name'] == null) return false;

              return true;
            },
          ),
          name: ProfileScreen.name,
        ),
      ], // The pages
      // The initial page's path. Defaults to "/"
      initialPage: SplashScreen.path,
      unknownPage: NavigationPage(
        path: NotFound.path,
        builder: () => const NotFound(),
        name: NotFound.name,
      ), // A page that is built when an unknown path is passed
    ),
  );
}

class App extends StatelessWidget with NavigationWidgetMixin {
  App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: routeInformationParser,
      routerDelegate: routerDelegate,
      title: 'Router Management Example',
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
    );
  }
}