Flutter导航管理插件voyager的使用

Flutter导航管理插件voyager的使用

示例代码

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

/// voyager生成代码
part 'main.voyager.dart';

/// 导航地图，一个yaml文件，可以提供为三重引号字符串
String requirements() {
  return '''
---
'/home' :
  widget: HomeWidget
  title: "This is Home"
'/other/:title' :
  widget: OtherWidget
  title: "This is %{title}"
'/fab' :
  widget: MakeMeFab
  target: /other/thing
  icon: e88f #检查icons.dart中的参考
'/talks' :
  widget: ListWidget
  title: "Voyager Talks"
  items:
    - city: "Berlin"
      event: Droidcon
      date: July 1, 20119
    - city: "London"
      event: FlutterLDN
      date: October 21,  2019
    - city: "Łódź"
      event: Mobilization
      date: October  26,  2019
    - city: "San Francisco"
      event: Droidcon
      date: November  225-26,  2019
'/_object/Talk':
  widget: TalkWidget
'/stay/safe':
  redirect: '/home'
'/:notfound:':
  title: "Not Found"
  widget: PageWidget
  body: "Path /%{notfound} not found. Sorry!"
''';
}

/// 导航路径列表（上面的yaml但解析为对象）
List<VoyagerPath> paths() {
  return loadPathsFromYamlSync(requirements());
}

/// 插件，如requirements中提到
List<VoyagerPlugin> plugins() =&gt; [
  /// 提供在yaml中使用的表达式构建器
  generatedVoyagerWidgetPlugin(),
  generatedVoyagerPagePlugin(),
  const RedirectPlugin(),
];

void main() {
  /// 初始化路由器
  final router = VoyagerRouter.from(paths(), plugins());

  /// 运行应用
  runApp(VoyagerStackApp(
    router: router,
    stack: MyStack.initialValue,
    onBackPressed: () {
      MyStack.pop();
    },
    onInitialPage: (page) {
      if (page is VoyagerPage) {
        if (page.path == '/' || page.path == pathHome) {
          // 如果初始页面是 '/'，我们只会使用默认初始堆栈状态
          MyStack.value = MyStack.initialValue;
        } else {
          // 如果初始页面是其他内容，我们在初始堆栈上添加页面
          MyStack.value = MyStack.initialValue.mutate((items) {
            items.add(page);
          });
        }
      }
    },
    onNewPage: (page) {
      if (page is VoyagerStack) {
        // 堆栈覆盖 - 这发生在例如你处理onInitialPage时
        MyStack.value = page;
      } else if (page is VoyagerPage) {
        // 这发生在某些系统事件中，例如你不处理onInitialPage
        MyStack.add(page);
      }
    },
    createApp: (context, parser, delegate) =&gt; MaterialApp.router(
      title: "Voyager Demo",
      routeInformationParser: parser,
      routerDelegate: delegate,
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.blue,
        canvasColor: Colors.black,
        accentColor: Colors.red,
      ),
    ),
  ));
}

使用说明

1. 添加依赖：

   dependencies:
     voyager: ^latest_release
   

2. 定义导航地图：

   ---
   '/home' :
     widget: HomeWidget
     title: "This is Home"
   '/other/:title' :
     widget: OtherWidget
     title: "This is %{title}"
   '/fab' :
     widget: MakeMeFab
     target: /other/thing
     icon: e88f
   '/talks' :
     widget: ListWidget
     title: "Voyager Talks"
     items:
       - city: "Berlin"
         event: Droidcon
         date: July 1, 2019
       - city: "London"
         event: FlutterLDN
         date: October 21, 2019
       - city: "Łódź"
         event: Mobilization
         date: October 26, 2019
       - city: "San Francisco"
         event: Droidcon
         date: November 25-26, 2019
   '/_object/Talk':
     widget: TalkWidget
   '/stay/safe':
     redirect: '/home'
   '/:notfound:':
     title: "Not Found"
     widget: PageWidget
     body: "Path /%{notfound} not found. Sorry!"
   

3. 初始化路由器：

   final router = VoyagerRouter.from(paths(), plugins());
   

4. 选择API：

   • Voyager Widget：

     VoyagerWidget(path: "/home", router: router);
     

   • Navigator 1.0：

     Provider<VoyagerRouter>.value(
       value: router,
       child: MaterialApp(
         home: VoyagerWidget(path: "/my/fancy/super/path"),
         onGenerateRoute: router.generator()
       )
     );
     

   • Navigator 2.0：

     VoyagerStackApp(
       router: router,
       stack: VoyagerStack[
         VoyagerPage("/my/fancy/super/path"),
       ],
       createApp: (context, parser, delegate) => MaterialApp.router(
         routeInformationParser: parser,
         routerDelegate: delegate,
         theme: themeData(),
       ),
     );
     

5. 使用预定义插件：

   • Widget Plugin：

     WidgetPlugin({
       "HomeWidget": (context) => HomeWidget()
     });
     

   • Page Plugin：

     PagePlugin({
       "slideFromTop": slideFromTop
     });
     

6. 自定义插件：

   class TitlePlugin extends RouterPlugin {
     TitlePlugin() : super("title"); // YAML节点以拦截
   
     @override
     void outputFor(RouterContext context, dynamic config, Voyager voyager) {
       voyager["title"] = config.toString(); // 输出此插件
     }
   }
   

7. 依赖注入：

   final voyager = context.voyager;
   

8. 代码生成：

   flutter packages pub run voyager:codegen --run-once
   

   这将创建 lib/navigation.voyager.dart 文件。

9. Schema 验证：

   - name: Voyager
     source: lib/main.dart
     target: lib/navigation.voyager.dart
     schema:
       icon:
         pluginStub: true # 添加如果要生成一个插件 stub
         output: Icon # 相关的 Dart 类由插件生成
         input: # 写入节点的 JSON Schema (draft-07 布局)
           type: string
           pattern: "^[a-fA-F0-9]{4}$"