Flutter路由管理插件hi_router的使用

什么是hi_router

系统自带的导航页面管理和路由管理并不统一，而hi_router将两者统一起来，并通过路由管理整个应用程序界面。

特性

• 统一路由和导航管理。
• 支持动态路由注册。
• 提供路由守卫功能。
• 支持404页面配置。

安装

在pubspec.yaml文件中添加以下依赖：

$ flutter pub add hi_router

通过路由管理页面

使用示例

以下是一个完整的示例代码，展示了如何使用hi_router来管理页面路由。

import 'package:flutter/material.dart';
import 'package:hi_router/hi_router.dart';
import 'package:hi_router/route/route_abstract.dart';

void main() {
  runApp(App());
}

// 定义主应用
class App extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => _AppState();
}

// 主页
class HomePage extends Page {
  [@override](/user/override)
  Route createRoute(BuildContext context) {
    return MaterialPageRoute(
      settings: this,
      builder: (BuildContext context) {
        return _HomePageState();
      },
    );
  }
}

// 主页状态
class _HomePageState extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Column(
            children: [
              // 跳转到登录页按钮
              MaterialButton(
                onPressed: () {
                  print("Jump to login page.");
                  RoutePath.getAppPathInstance().push('/login');
                },
                child: Text("login page"),
              ),
            ],
          ),
        ));
  }
}

// 登录页
class LoginPage extends Page {
  [@override](/user/override)
  Route createRoute(BuildContext context) {
    return MaterialPageRoute(
      settings: this,
      builder: (BuildContext context) {
        return _LoginPageState();
      },
    );
  }
}

// 登录页状态
class _LoginPageState extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Column(
        children: [
          const Text("Login page."),
          // 跳转到未知页面
          TextButton(
              onPressed: () {
                RoutePath.getAppPathInstance().push('/34343');
              },
              child: Text("404"))
        ],
      )),
    );
  }
}

// 未知页面
class UnknownPage extends Page {
  [@override](/user/override)
  Route createRoute(BuildContext context) {
    return MaterialPageRoute(
      settings: this,
      builder: (BuildContext context) {
        return const UnknownPageRender();
      },
    );
  }
}

// 未知页面渲染
class UnknownPageRender extends StatefulWidget {
  const UnknownPageRender({Key? key}) : super(key: key);

  [@override](/user/override)
  State<UnknownPageRender> createState() => _UnknownPageRenderState();
}

class _UnknownPageRenderState extends State<UnknownPageRender> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: const Center(
          child: Text('Unknown page.'),
        ));
  }
}

// 路由路径管理
class RoutePath {
  static HiRouter? _appRoutePathInstance;

  static HiRouter getAppPathInstance() {
    _appRoutePathInstance ??= HiRouter({
      '/': () => HomePage(),   // 主页路由
      '/login': () => LoginPage(), // 登录页路由
    });

    // 声明未匹配到的路由时展示的页面
    _appRoutePathInstance!.registerUnknownPage = 
        RoutePageInfo('/404', () => UnknownPage());

    // 路由守卫
    _appRoutePathInstance!.before = (RoutePageInfo pageInfo) async {
      return pageInfo;
    };

    return _appRoutePathInstance!;
  }
}

// 主应用状态
class _AppState extends State<App> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return RoutePath.getAppPathInstance().build(context, 'App title.');
  }
}