关于程序员:flutter-getx-nested-navigation-嵌套路由

flutter getx nested navigation 嵌套路由

视频

https://youtu.be/SXER4JVBFps

前言

嵌套路由能够用在如购物确认向导界面切换。

应用 getx 实现嵌套路由，须要如下步骤：

通过 Navigator 组件的 key 属性
用 Get.nestedKey(1) 进行标记
onGenerateRoute 决定去哪个视图界面
initialRoute 初始路由
通过 Get.toNamed 的 id 属性执行嵌套路由

步骤

第一步：筹备工作

请用猫哥的 getx 插件初始环境

https://marketplace.visualstudio.com/items?itemName=ducafecat...

筹备好 main、step1、step2、step3 4个界面

第二步：创立 Navigator 组件

lib/pages/main/view.dart

          child: Navigator(            key: Get.nestedKey(1),            initialRoute: '/step1',            onGenerateRoute: controller.onGenerateRoute,          ),

通过 Get.nestedKey(1) 指定须要嵌套路由的地位标记。

initialRoute 初始路由

onGenerateRoute 解析路由申请

第三步：onGenerateRoute 解析路由

lib/pages/main/controller.dart

  Route? onGenerateRoute(RouteSettings settings) {    if (settings.name == '/step1') {      return GetPageRoute(        settings: settings,        page: () => const Step1Page(),        transition: Transition.topLevel,      );    } else if (settings.name == '/step2') {      return GetPageRoute(        settings: settings,        page: () => const Step2Page(),        transition: Transition.rightToLeftWithFade,      );    } else if (settings.name == '/step3') {      return GetPageRoute(        settings: settings,        page: () => const Step3Page(),        transition: Transition.fadeIn,      );    }    return null;  }

通过 onGenerateRoute 决定去哪个视图界面。

留神返回值是 Route 类型。

第三步：Get.toName 界面切换

        Get.toNamed(          RouteNames.step2,          id: 1,        );

通过 toName 办法的 id 属性决定去哪个嵌套导航地位。

第四步：导航栏

再加导航按钮栏来进行操作测试。

lib/pages/main/view.dart

        Container(          height: 100,          color: Colors.yellow,          child: Row(            mainAxisAlignment: MainAxisAlignment.spaceAround,            children: [              ElevatedButton(                onPressed: () {                  Get.toNamed(                    RouteNames.step1,                    id: 1,                  );                },                child: const Text('step1 page'),              ),              ElevatedButton(                onPressed: () {                  Get.toNamed(                    RouteNames.step2,                    id: 1,                  );                },                child: const Text('step2 page'),              ),              ElevatedButton(                onPressed: () {                  Get.toNamed(                    RouteNames.step3,                    id: 1,                  );                },                child: const Text('step3 page'),              ),            ],          ),        ),

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_nested_navigation

小结

在嵌套Navigator中应用不同的路由表来治理页面导航，除了用在我方才说的购物生产向导外，还能用在有些治理后盾，比方一侧菜单固定，只刷新内容区域。

感激浏览本文

如果我有什么错？请在评论中让我晓得。我很乐意改良。

end

本文由mdnice多平台公布