【Flutter】 Getx动态路由管理方案

news/2025/3/4 7:34:57/文章来源:https://www.cnblogs.com/TobuTobu/p/18746035

根组件配置

应用入口配置:

使用 GetMaterialApp 作为应用的根组件,它是 MaterialApp 的增强版本,提供了路由管理等额外功能。

初始路由设置:

通过 initialRoute 参数指定了应用启动时加载的初始页面为 Routes.homePage,这通常是一个字符串常量,定义在 routes.dart 文件中。

路由表配置:

getPages 参数接收一个包含所有页面路由映射的列表 Routes.routePages,用于支持命名路由和按需加载页面。

完整代码

void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return GetMaterialApp( // 使用GetMaterialApp作为根组件initialRoute: Routes.homePage, // 初始路由设置getPages: Routes.routePages,  // 路由表设置title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true),home: HomePage(),);}
}

路由树结构

这次展示的路由树结构,主页和文章列表主页同级,文章详情则作为文章列表主页的子路由

演示

路由配置

单路由名:

单页面路由自身的路由名,其中不能有父路由或子路由,采用私有变量设置,防止暴露给外部使用。外部跳转时将使用父路由或子路由复合组成的路由名。

  static const String _homePage = "/home_page";static const String _articlesPage = "/articles_page";static const String _detailPage = "/detail_page";

路由页面配置:

每一个GetPage代表一个单页面,需要参数namepage,如果非初始路由,需要加上binding参数,page和binding参数在你创建完一个Getx页面后就会有,可以使用“Getx”插件自动生成。

注意:路由页面配置GetPage里面都是单路由名。

      GetPage(name: _detailPage,page: () => DetailPage(),binding: DetailBinding(),)

嵌套路由的子路由则写在**children **里面

    // 文章主页GetPage(name: _articlesPage, page: () => ArticlesPage(), binding: ArticlesBinding(), children: [// 文章详情页GetPage(name: _detailPage,page: () => DetailPage(),binding: DetailBinding(),)]),

组合路由名:

当我们使用Get.to或Get.toName诸如此类跳转路由方法时必须要填一个路由名,如果是同级路由之间跳转,我们就直接填目的路由页的路由名就行。如从home页面去articiles页面,在home页面用下面的方法就能直接跳。

    Get.toNamed('/articles_page');

但如果是嵌套路由跳转,跳转到子路由时,则需要加上父路由的路由名。如从articles页面跳到detail页面

 Get.toNamed('/articles_page/detail_page');

所以我们把单路由名隐藏起来,另外再使用get方法把真正的组合路由名暴露出去。

  /// 路由名// 主页static String get homePage => _homePage;// 文章主页static String get articlesPage => _articlesPage;// 文章主页/详情页static String get detailPage => _articlesPage + _detailPage;

后面我们在业务里使用就可以直接这样用

Get.toNamed(Routes.detailPage);

完整代码

abstract class Routes {/// 单路由名static const String _homePage = "/home_page";static const String _articlesPage = "/articles_page";static const String _detailPage = "/detail_page";/// 配置static final routePages = [// 主页GetPage(name: _homePage, page: () => HomePage()),// 文章主页GetPage(name: _articlesPage, page: () => ArticlesPage(), binding: ArticlesBinding(), children: [// 文章详情页GetPage(name: _detailPage,page: () => DetailPage(),binding: DetailBinding(),)]),];/// 路由名// 主页static String get homePage => _homePage;// 文章主页static String get articlesPage => _articlesPage;// 文章主页/详情页static String get detailPage => _articlesPage + _detailPage;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/892194.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《数据结构(C语言版)(第3版)》勘误

第142页,如图,“i+1(1≤i≤p)为所指结点的度”,这句话看不懂。p是个指针,i是个序号,怎么它们还有数量大小关系呢? 我认为这里有误,实际上应该是:对于InsertChild:i必须满足1≤i≤p所指结点的度+1。 对于DeleteChild:i必须满足1≤i≤p所指结点的度。即“p所指结点的度…

2019-PTA模拟赛-L1-1 帅到没朋友

L1-1输入样例1: 3 3 11111 22222 55555 2 33333 44444 4 55555 66666 99999 77777 8 55555 44444 10000 88888 22222 11111 23333 88888输出样例1: 10000 88888 23333输入样例2: 3 3 11111 22222 55555 2 33333 44444 4 55555 66666 99999 77777 4 55555 44444 22222 11111输…

.NET9让指标更纯正

Metrics为程序健康运行提供了保驾护航,但过多的指标又会为问题调查,大屏展示,以及基础日志存储带来更多的负担,特别对一些几乎没有意义的指示,比如健康检查的请求指标。.NET 9 引入了一个新功能,允许在某些端点和请求上选择不采集HTTP 指标记录。你可以通过以下方法排除某…

Semantic Kernel:文转图

SK也对应了文生图的功能,本文中分别使用的是GPT的DALLE 2和DALLE 3来生成图版,虽然不如专业的文生图那么专业,但提示词到位,在一些场景中还是可用的。项目引用的是当前最新的SK包,1.18.0-rc:<Project Sdk="Microsoft.NET.Sdk"><PropertyGroup><…

Semantic Kernel:图识文

多模态是每个LLM具有的能力,图片又是最常见的信息载体,GPT对图片的识别也很早就有了,随着GPT版本的迭代,效果越来越好。SK也是在很多就适配了图识文,只不过最近版本才支持本地图片的上传。(有点晚) 图片场景识别:using Microsoft.SemanticKernel.ChatCompletion; using…

002.Gitlab基础使用

gitlab基础使用 设置语言 gitlab社区版同样支持直接配置为简体中文,可能适配率暂不支持100% 。 点击头像,Preferences——>Preferences——>Localization 。 Language设置为简体中文,save changes。 使用介绍 gitlab的基础应用主要包括项目创建、组管理、issue等功能。…

【PHP安全】无参数命令执行学习

免责声明: 由于传播、利用本公众号所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,作者不为此承担任何责任,一旦造成后果请自行承担!如有侵权烦请告知,我们会立即删除并致歉。谢谢!文章作者:先知社区(Atkx) 文章来源:https://xz.aliyun.com/ne…

分享4款.NET开源、免费、实用的商城系统

前言 今天大姚给大家分享4款.NET开源、免费、实用的商城系统,希望可以帮助到有商城系统开发需求的同学。 nopCommerce nopCommerce是一个.NET开源功能丰富、免费、灵活且可定制的开源电子商务解决方案(大家假如有商城需求可以直接使用该项目进行二次开发,省时省力) ,具备商城…

总结:单调栈

\(\texttt{单调栈}\) \(\texttt{单调栈学习笔记}\) 今天学习的是 数据结构:单调栈。 (n 久之前了……) \(\texttt{数据结构讲解}\) \(\texttt{单调栈的类型}\)单调递增栈单调递减栈单调递增栈:指的是一个栈中的元素都是单调递增的。 单调递减栈:指的是一个栈中的元素都是单…

基于ThreeJs的大屏3D地图(二)——气泡图、渐变柱体与热力图

前提 上一篇文章中我们完成了地图区块模型的渲染,在此基础之上本篇来讲解气泡图、3D柱形图以及3D热力图的实现方式。 首先,为了更好的关注点分离及与地图渲染模块的解耦,我们可以把所有类型的可视化元素抽象出一个图层基类BaseLayer: /*** 图层基类*/ abstract class BaseL…

揭露GPT幻觉只需一个提示

把像GPT这样的超大语言模型投入真实世界应用时,最大挑战之一就是经常说的幻觉。这就是说这些模型会开始编造一些根本不对的事实。最麻烦的地方是你可能根本不会发现,因为这些文字放在上下文里听起来很自然。 这对那些需要事实核查,或者某种形式的事后验证才能信任LLM回答的关…

如何使用ChatGPT画流程图

如何使用ChatGPT画流程图 MermaidMermaid 是一款基于 JavaScript 的图表绘制工具,使用 Markdown 风格的文本定义和渲染器来创建和修改复杂图表。Mermaid 的主要目的是帮助文档跟上开发的步伐。使用示例将ChatGPT回复的代码粘贴到下面的网站上 https://mermaid.live/