Flutter导航管理插件navigation_system的使用

Flutter导航管理插件navigation_system的使用

navigation_system 是一个为 Flutter 应用程序提供路由管理和导航堆栈管理工具的插件。

特性

• 指定路由导航并传递参数。
• 清除所有之前的路由。
• 替换当前路由为指定命名路由。
• 弹出到特定路由为止。
• 返回上一个屏幕并携带数据。
• 更多功能！

使用方法

该插件提供了一个简化导航的实用类 Go<T>，它简化了在 Flutter 应用程序中的导航任务。Go<T> 类提供了多种方法来导航到特定的路由，管理路由堆栈，并在屏幕之间传递数据。

关键方法简介

/// 导航到指定路由并期望接收数据。
Future<T?> toAndExpectData<T>() async {
  // 实现细节...
}

/// 返回上一个屏幕并携带数据。
void backWithData<T>(T data) {
  // 实现细节...
}

/// 导航到指定路由并清空所有其他路由。
void toAndClearAll() {
  // 实现细节...
}

/// 替换当前路由为指定命名路由。
void replaceWithNamedRoute() {
  // 实现细节...
}

/// 弹出路由直到达到指定命名路由。
void popUntilNamedRoute() {
  // 实现细节...
}

这些方法简化了导航任务，提供了管理 Flutter 应用程序中路由导航的简便方式。

入门指南

要在您的 Flutter 应用程序中使用此导航系统：

1. 在 pubspec.yaml 文件中添加 navigation_system 插件。
2. 将插件导入到 Dart 代码中。
3. 创建 Go<T> 类的一个实例，并使用其方法执行导航任务。

平台支持

该插件支持 Android、iOS、MacOS 和 Windows。

完整示例代码

以下是完整的示例代码，展示了如何使用 navigation_system 插件进行导航。

import 'package:flutter/material.dart';
import 'package:navigation_system/go/go.dart';
import 'package:navigation_system/navigation_system.dart';

import 'back_with_data.dart';

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

/// 主应用组件。
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

/// 主应用组件的状态。
class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      /// 主应用组件。
      onGenerateRoute: (RouteSettings routeSettings) =>
          NavigationSystem(
            initialRoute: const Page1(),
            routes: {
              /// 定义应用的路由。
              Page1.routeName: (context, args) => const Page1(),
              Page2.routeName: (context, args) => const Page2(),
              Page3.routeName: (context, args) => const Page3(),
            },
          ).generateRoute(routeSettings),
    );
  }
}

/// 第一页。
class Page1 extends StatelessWidget {
  static const routeName = '/d1';
  const Page1({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
      ),
      body: const Center(
        child: Text('这是第一页的内容。'),
      ),
      floatingActionButton: FloatingActionButton(
          heroTag: 'p1_f',
          onPressed: () {
            /// 点击浮动按钮时，导航到第二页。
            Go(context, routeName: Page2.routeName).to();
          },
          child: const Icon(Icons.arrow_forward_ios_rounded)),
    );
  }
}

/// 第二页。
class Page2 extends StatelessWidget {
  static const routeName = '/d2';
  const Page2({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
      ),
      body: const Center(
        child: Text('这是第二页的内容。'),
      ),
      floatingActionButton: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            heroTag: 'p2_b',
            onPressed: () {
              /// 点击浮动按钮时，返回上一页。
              Go(context).pop();
            },
            child: const Icon(Icons.arrow_back_ios_new_rounded),
          ),
          const SizedBox(
            width: 10,
          ),
          FloatingActionButton(
              heroTag: 'p2_f',
              onPressed: () {
                /// 点击第二个浮动按钮时，导航到第三页。
                Go(context, routeName: Page3.routeName).to();
              },
              child: const Icon(Icons.arrow_forward_ios_rounded)),
        ],
      ),
    );
  }
}

/// 第三页。
class Page3 extends StatelessWidget {
  static const routeName = '/d3';
  const Page3({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 3'),
      ),
      body: const Center(
        child: Text('这是第三页的内容。'),
      ),
      floatingActionButton: FloatingActionButton(
        heroTag: 'p3_b',
        onPressed: () {
          /// 点击浮动按钮时，返回上一页。
          Go(context).pop();
        },
        child: const Icon(Icons.arrow_back_ios_new_rounded),
      ),
    );
  }
}