Flutter高级导航管理插件advanced_navigator的使用

Flutter高级导航管理插件advanced_navigator的使用

Advanced Navigator

此包旨在将强大的功能引入任何Flutter应用的导航管理。其目标是保持简单且易于使用,同时为复杂的导航逻辑提供低级自定义能力。

pub package license

破坏性变更:v0.2.1 → v1.0.0

路径生成函数现在接受一个PathArguments对象作为输入,而不是一个字符串映射。这允许传递任意对象作为参数。现在可以通过PathArguments.path属性访问通过路径名传递的参数。

AdvancedNavigator(
  paths: {
    '/user/{userId}': (args) => [
-      CupertinoPage(key: ..., child: Profile(args['userId'])),
+      CupertinoPage(key: ..., child: Profile(args.path['userId'])),
    ],
  },
),

快速开始

首先,创建一个MaterialAppCupertinoApp并返回一个AdvancedNavigator实例:

MaterialApp(
  builder: (context, _) => AdvancedNavigator(
    ...
  ),
);

接下来,创建一个包含你应用所需URIs的映射:

AdvancedNavigator(
  paths: {
    '/': (_) => [
      MaterialPage(key: ValueKey('home'), child: ViewHome()),
    ],
    '/followers': (_) => [
      MaterialPage(key: ValueKey('home'), child: ViewHome()),
      MaterialPage(key: ValueKey('followers'), child: ViewFollowers()),
    ],
    '/followers/{userId}': (args) => [
      MaterialPage(key: ValueKey('home'), child: ViewHome()),
      MaterialPage(key: ValueKey('followers'), child: ViewFollowers()),
      MaterialPage(key: ValueKey('profile${args.path['userId']}'), child: ViewProfile(args.path['userId'])),
    ],
  },
),

现在,你可以从应用的任何地方使用AdvancedNavigator.openNamed(context, <uri>)打开这些路径。(见Paths)

同样,你可以定义命名的pages,这些页面可以通过AdvancedNavigator.pushNamed(context, <page name>)推入和通过AdvancedNavigator.pop(context)弹出栈顶。 (见Pages)

示例

URL同步

在这个例子中,导航器的页面堆栈会始终保持与浏览器URL同步。

URL同步

以下代码片段是实现上述导航逻辑所需的全部内容:

AdvancedNavigator(
  paths: {
    '/': (_) => [
      CupertinoPage(key: ValueKey('home'), child: ViewHome()),
    ],
    '/items': (_) => [
      CupertinoPage(key: ValueKey('home'), child: ViewHome()),
    ],
    '/items/{itemId}': (args) => [
      CupertinoPage(key: ValueKey('home'), child: ViewHome()),
      CupertinoPage(key: ValueKey('item${args.path['itemId']}'), child: ViewItem(int.parse(args.path['itemId']))),
    ],
  },
);

这是从列表项执行导航的方式:

ListTile(
  ...
  onPressed: () => AdvancedNavigator.openNamed(context, '/items/$itemId');
),

更多关于Flutter高级导航管理插件advanced_navigator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter高级导航管理插件advanced_navigator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用advanced_navigator插件进行高级导航管理的代码示例。advanced_navigator插件提供了强大的导航管理功能,允许开发者以声明式的方式定义导航栈和路由。

首先,确保你已经在pubspec.yaml文件中添加了advanced_navigator依赖:

dependencies:
  flutter:
    sdk: flutter
  advanced_navigator: ^x.y.z  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来,让我们看一个基本的实现示例:

1. 设置导航图(Navigation Graph)

首先,我们需要定义一个导航图,这个图描述了应用中的页面和它们之间的关系。

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

// 定义路由配置
class MyRoutes {
  static const String home = '/';
  static const String detail = '/detail';
}

// 定义页面
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到详情页
            Navigator.of(context).pushNamed(MyRoutes.detail);
          },
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(
        child: Text('This is the detail page'),
      ),
    );
  }
}

// 定义导航图
class MyNavigationGraph extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NavigationGraph(
      routes: {
        MyRoutes.home: (context) => HomePage(),
        MyRoutes.detail: (context) => DetailPage(),
      },
      initialRoute: MyRoutes.home,
    );
  }
}

2. 使用导航图

现在,我们需要在应用的主入口文件中使用这个导航图。

import 'package:flutter/material.dart';
import 'my_navigation_graph.dart'; // 导入我们定义的导航图

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 使用我们定义的导航图
      home: MyNavigationGraph(),
      // 确保导航器知道我们的路由配置
      onGenerateRoute: (settings) {
        final List<String> segments = settings.name!.split('/');
        if (segments.length > 1) {
          return MaterialPageRoute<void>(
            settings: settings,
            builder: (context) {
              switch (segments[1]) {
                case MyRoutes.home:
                  return HomePage();
                case MyRoutes.detail:
                  return DetailPage();
                default:
                  return Scaffold(
                    body: Center(
                      child: Text('Page not found'),
                    ),
                  );
              }
            },
          );
        } else {
          return MaterialPageRoute<void>(
            settings: settings,
            builder: (context) => MyNavigationGraph(),
          );
        }
      },
    );
  }
}

3. 运行应用

现在,你可以运行你的Flutter应用。点击首页的按钮,你应该会导航到详情页。

注意事项

  • 在这个示例中,我们直接使用了MaterialApponGenerateRoute属性来处理路由。在实际项目中,你可能希望使用更复杂的路由逻辑或结合其他插件(如flutter_bloc)来管理状态。
  • advanced_navigator插件提供了更多高级功能,比如嵌套导航、深层链接处理等,你可以参考官方文档来深入了解这些功能。

希望这个示例能帮你快速上手advanced_navigator插件!

回到顶部