Flutter页面路由管理插件pages_route_manager的使用

Flutter页面路由管理插件pages_route_manager的使用

在Flutter应用开发中，页面路由管理是一个重要的组成部分。pages_route_manager 插件提供了多种方法来管理和导航到不同的页面。本文将详细介绍如何使用 pages_route_manager 来管理页面路由。

页面路由管理插件 pages_route_manager 的使用

添加属性到 BuildContext

BuildContext 中包含了一些常用的属性，这些属性有助于页面路由管理和导航：

// 媒体查询相关的属性
mediaQuery
mediaQuerySize

// 平台相关的属性
platform

// 导航器相关的属性
navigator

// 模态路由相关的属性
modalRoute

// 获取参数
getArgument

// 焦点范围节点
focusScopeNode

// 默认文本样式
defaultTextStyle

// 图标主题
iconTheme

组件和对象

pages_route_manager 包含多个组件和对象，用于管理和导航页面路由：

// 路由管理器
RouteManager => 包含了必要的方法和属性来管理路由

// 路由导航器
RouteNavigator => 包含了抽象的 Navigator 对象函数，用于路由导航

// 屏幕路由构建器
ScreenRouteBuilder => 用于导航到一个页面，创建一个 PageRoute 对象

// 路由观察者提供者
RouteObserverProvider => 用于创建一个 RouteObserver 对象

// 路由过渡
PageRouteTransition => 返回一个 Rote 对象，用于在页面之间导航

// 过渡类型
TransitionType => 包含所有路由过渡动画及其变体

// 主题平台页面过渡生成器
PlatformPageTransitionsBuilder => 用于定义应用主题中的路由过渡动画

// 创建页面路由
CreatePageRoute => 用于创建页面路由

小部件

pages_route_manager 提供了几个小部件，用于页面路由管理：

// 绑定页面构建器
BindPageBuilder => 用于将一个对象实例绑定到子 Widget（页面），作为依赖（控制器）

// 未知路由构建器
UnKnowRouteBuilder => 用于在未命名的路由不存在时显示一个页面

// 无状态参数
StatelessArgument => 用于创建页面并加载已经转换（cast）的参数

// 小部件过渡动画
WidgetTransitionAnimation => 包含所有路由过渡动画的小部件

导航到页面的方式

使用 pages_route_manager 可以通过多种方式导航到页面：

// 使用标准的 Flutter 导航器
Navigator.of(context).pushNamed(
    RouteName.anyPage.name, 
    arguments: 'data'
);

// 不使用上下文，直接使用当前页面的导航器
RouteManager.currentNavigator?.pushNamed(
    RouteName.anyPage.name, 
    arguments: 'data'
);

// 不使用上下文，直接使用当前页面的导航器
RouteNavigator.push(
  builder: (_) => const AnyPage(), 
  settings: const RouteSettings(name: 'Page2', arguments: 'argument')
);

// 不使用上下文，直接使用当前页面的导航器
RouteName.anyPage.push();

// 不使用上下文，直接使用当前页面的导航器
RouteNavigator.pushNamed(
  routeName: RouteName.anyPage.name,
  arguments: 'argument'
);

// 自定义页面过渡动画
context.navigator.push(
    PageRouteTransition.customized(
        builder: (_) => const AnyPage(),
        transitionDuration: const Duration(milliseconds: 400),
        transitionType: TransitionType.fade
    )
);

// 使用 Flutter 默认的页面过渡动画
context.navigator.push(
    PageRouteTransition.flutterDefault(
        builder: (_) => const AnyPage(),
    )
);

动画类型

pages_route_manager 支持七种类型的动画及其变体，可以通过 Alignment, Offset, 和 Duration 属性进行配置：

// 示例：
TransitionType.slideWithScaleRightToLeft

简单的使用示例

以下是一个简单的使用示例，展示了如何配置和使用 pages_route_manager：

import 'package:flutter/material.dart';
import 'package:pages_route_manager/pages_route_manager.dart';

void main() => runApp(const StartApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '测试路由管理器',
      theme: ThemeData(
        primaryColor: Colors.blue,
        pageTransitionsTheme: const PageTransitionsTheme(
          builders: {
            TargetPlatform.android: PlatformPageTransitionsBuilder(
              transitionType: TransitionType.slideWithScaleRightToLeft,
            ),
            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
            TargetPlatform.linux: PlatformPageTransitionsBuilder(
              transitionType: TransitionType.slideWithScaleRightToLeft,
            ),
            TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
            TargetPlatform.windows: PlatformPageTransitionsBuilder(
              transitionType: TransitionType.slideWithScaleRightToLeft,
            ),
          }
        ),
      ),
      initialRoute: RouteName.homePage.name,
      navigatorObservers: [RouteManager.routeManagerWatcher],
      onGenerateRoute: CreatePageRoute.onGenerateRoute,
      onUnknownRoute: RouteManager.onUnknownRoute,
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('主页'),
      ),
      body: Center(
        child: ColoredBox(
          color: Theme.of(context).primaryColor.withOpacity(0.7),
          child: TextButton(
            onPressed: () {
              RouteName.anyPage.push();
            },
            child: const Text(
              '跳转到任何页面',
              style: TextStyle(
                fontSize: 25,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('任何页面'),
        backgroundColor: Colors.amberAccent,
      ),
      body: Center(
        child: Text(context.getArgument<String>() ?? '参数未定义'),
      ),
    );
  }
}

abstract class RouteName {
  static final CreatePageRoute homePage = CreatePageRoute('/', (_) => const HomePage());

  static final CreatePageRoute anyPage = CreatePageRoute('/anyPage', (_) => const AnyPage());
}