Flutter路由管理插件routemaster的使用

Routemaster 是一个易于使用的Flutter路由管理插件，它基于Navigator 2.0，并提供了简单直观的API。本文将介绍如何使用Routemaster来管理你的Flutter应用中的路由。

主要特性

• 简单的声明式映射从URL到页面
• 易于使用的API：只需 Routemaster.of(context).push('/page')
• 支持嵌套导航（例如标签页）
• 支持多个路由地图（如登录用户和未登录用户的路由）
• 观察者可以轻松监听路由变化

基本示例

以下是一个简单的例子，展示了如何设置带有标签页和推送路由的应用程序：

完整示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:routemaster/routemaster.dart';

void main() => runApp(MyApp());

final routes = RouteMap(
  routes: {
    '/': (_) => CupertinoTabPage(
          child: HomePage(),
          paths: ['/feed', '/settings'],
        ),
    '/feed': (_) => MaterialPage(child: FeedPage()),
    '/feed/profile/:id': (info) => MaterialPage(
          child: ProfilePage(id: info.pathParameters['id']),
        ),
    '/settings': (_) => MaterialPage(child: SettingsPage()),
  },
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (_) => routes),
      routeInformationParser: RoutemasterParser(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final tabState = CupertinoTabPage.of(context);

    return CupertinoTabScaffold(
      controller: tabState.controller,
      tabBuilder: tabState.tabBuilder,
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            label: 'Feed',
            icon: Icon(CupertinoIcons.list_bullet),
          ),
          BottomNavigationBarItem(
            label: 'Settings',
            icon: Icon(CupertinoIcons.search),
          ),
        ],
      ),
    );
  }
}

class FeedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => Routemaster.of(context).push('profile/1'),
          child: Text('Go to Profile Page'),
        ),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  final String id;

  ProfilePage({required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile Page')),
      body: Center(child: Text('Profile ID: $id')),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text('Settings page')));
  }
}

导航方法

在页面中进行导航非常简单，只需要调用 Routemaster.of(context) 方法即可：

Routemaster.of(context).push('/feed/profile/1'); // 推送新页面
Routemaster.of(context).replace('/settings'); // 替换当前页面

路径参数

你可以通过路径参数传递数据到目标页面：

RouteMap(routes: {
  '/products/:id': (route) => MaterialPage(
        child: ProductPage(id: route.pathParameters['id']),
      ),
});

查询参数

你也可以通过查询参数传递数据：

RouteMap(routes: {
  '/search': (route) => MaterialPage(
        child: SearchPage(query: route.queryParameters['query']),
      ),
});

获取当前路径信息

在Widget中获取当前路径信息：

RouteData.of(context).path; // 完整路径: '/product/123?query=param'
RouteData.of(context).pathParameters; // Map: {'id': '123'}
RouteData.of(context).queryParameters; // Map: {'query': 'param'}

标签页支持

Routemaster还支持标签页导航，以下是Cupertino风格的标签页示例：

RouteMap(
  routes: {
    '/': (_) => CupertinoTabPage(
          child: HomePage(),
          paths: ['/feed', '/settings'],
        ),
    '/feed': (_) => MaterialPage(child: FeedPage()),
    '/settings': (_) => MaterialPage(child: SettingsPage()),
  },
);

更多功能

Routemaster还支持许多其他功能，例如：

• 受保护的路由
• 404页面
• 重定向
• 动态切换路由地图
• 导航观察者
• 不依赖上下文的导航
• Hero动画

更多详细信息请参考Routemaster官方文档。

希望这些内容能帮助你更好地理解和使用Routemaster！如果有任何问题或建议，请随时提出。