【Flutter】路由组件的应用 (学习记录)

前言

在 Flutter 中，路由用于管理应用程序中不同页面之间的导航和跳转。Flutter 提供了多种方式来实现路由管理，包括基本的静态路由、动态路由、命名路由以及使用第三方库（如 GetX、Provider 等）来管理路由。

一、 静态路由（Static Routing）

MaterialApp 和 CupertinoApp 实现 静态路由的方式

1、静态路由是最基本的路由管理方式，通过在 MaterialApp 或 CupertinoApp 中使用 routes
参数来定义路由映射。每个路由都与一个页面组件相关联，可以通过路由名称来导航到相应的页面。
2、 MaterialApp 和 CupertinoApp 中使用 routes 的方式是相同的，在使用不同的组件只需要替换他们的组件名即可。
3、 他们唯一不同处，MaterialApp 使用 Material Design 风格的路由转场效果，例如页面从底部弹出、淡入淡出等效果，CupertinoApp 使用 iOS 风格的路由转场效果，例如页面从右侧滑入、从底部弹出等效果。
4、 例子：（这里只使用 MaterialApp 来写案例，CupertinoApp 和 MaterialApp 大同小异）

main.dart（主文件）：import 'package:flutter/material.dart';
import 'package:your_app/route_config.dart';void main() {runApp(MyApp());
};class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter App',initialRoute: '/',routes: RouteConfig.routes,);};
};route_config.dart（路由配置文件）：import 'package:flutter/material.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/page1_screen.dart';
import 'package:your_app/screens/page2_screen.dart';class RouteConfig {static Map<String, WidgetBuilder> routes = {'/': (context) => HomeScreen(),'/page1': (context) => Page1Screen(),'/page2': (context) => Page2Screen(),};
}

GetMaterialApp 顶级组件中实现静态路由的方式

1、GetMaterialApp 是GetX 库中的组件，代替 Flutter 中的 MaterialApp，并使用 GetX 提供的方式来管理静态路由。

2、优点：

  • 简洁性：使用 GetX 的 GetMaterialApp 和 GetPage 可以让路由配置变得更加简洁和直观，通过简单的方式定义路由映射关系。
  • 便捷性：GetX 提供了便捷的路由管理方式，通过 Get.toNamed(‘/routeName’) 可以快速实现页面之间的导航，简化了路由操作。
  • 状态管理：GetX 提供了强大的状态管理功能，可以与路由管理无缝集成，使得在页面之间共享状态变得更加容易。
  • 动态路由：虽然 GetX 的路由配置方式更接近静态路由，但仍然可以根据需要动态生成路由，实现灵活的路由管理。

3、缺点：

  • 灵活性：相比传统的命名路由方式，GetX 的静态路由管理方式可能在一些复杂场景下缺乏灵活性，特别是对于动态路由配置和复杂的路由跳转逻辑。
  • 学习曲线：对于新手来说，GetX 的路由管理方式可能需要一定的学习成本，需要熟悉 GetX 的 API 和路由配置方式。
  • 迁移成本：如果已有项目使用传统的命名路由管理方式，迁移到 GetX 的静态路由管理方式可能需要一定的迁移成本和工作量。

4、总结：使用 GetX 的 GetMaterialApp 实现静态路由管理方式在简洁性和便捷性方面具有优势，尤其适合中小型应用程序。然而，在复杂的应用程序中，可能需要权衡灵活性和学习曲线等因素，选择适合项目需求的路由管理方式
(getX 要通过单独下载依赖包才能使用)。

5、例子：

main.dart（主文件）：import 'package:flutter/material.dart';
import 'package:making_friends/router/index.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return GetMaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),// 配置默认进入的页面路由路径initialRoute: '/',getPages: getXRouters,);}
}router/index.dart（路由配置）：import 'dart:core';
import './route_key.dart';
import 'package:get/get.dart';//[getX]路由配置
final List<GetPage> getXRouters = RouteKey.routes.map((route) {return GetPage(name: route.name,page: route.page,);
}).toList();router/route_key.dart（路由目录）：// 资源
import 'package:flutter/cupertino.dart';
// 页面
import 'package:making_friends/view/Home/index.dart';
import 'package:making_friends/view/Login/index.dart';class RouteInfo {final String name;final Widget Function() page;RouteInfo({required this.name, required this.page});
}class RouteKey {RouteKey._();static List<RouteInfo> routes = [// 登录RouteInfo(name: '/login', page: () => const Login()),//   首页RouteInfo(name: '/', page: () => const Home()),];
}
二、 命名路由（Named Routing）：

MaterialApp 和 CupertinoApp 实现 命名路由的方式

1、命名路由是一种更灵活和可扩展的路由管理方式，通过使用 Navigator 类的方法来实现页面之间的导航。可以在任何地方使用命名路由来跳转到指定的页面。

2、MaterialApp 和 CupertinoApp 实现的方式是一样的，这里的案例只写一种，里面的配置方式也可以单独写一个文件进行引入使用，在任意跳转的地方使用 Navigator.pushNamed(context, ‘/page1’); 的方式进行跳转页面。

3、例子：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/page1_screen.dart';
import 'package:your_app/screens/page2_screen.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter App',initialRoute: '/',onGenerateRoute: (settings) {switch (settings.name) {case '/':return MaterialPageRoute(builder: (context) => HomeScreen());case '/page1':return MaterialPageRoute(builder: (context) => Page1Screen());case '/page2':return MaterialPageRoute(builder: (context) => Page2Screen());default:return null;}},);}
}

GetMaterialApp 顶级组件中实现命名路由的方式

1、在 GetX 中，虽然使用 GetMaterialApp 和 GetPage 来管理路由，但实际上 GetX 并没有提供专门的命名路由的概念。
2、在 GetX 中，使用 GetPage 来定义路由时，可以通过路由名称来访问页面，但这并不是传统意义上的命名路由。
3、在 GetX 中，路由的定义方式更接近静态路由的概念，通过在 getPages 中定义路由映射关系来实现页面之间的导航。
4、虽然在 GetX 中没有严格意义上的命名路由，但仍然可以使用 Get.toNamed(‘/routeName’) 来实现类似命名路由的效果。
5、因此，在 GetX 中，使用 GetMaterialApp 和 GetPage 来定义路由时，实际上更接近静态路由的管理方式，而不是传统意义上的命名路由。

三、 动态路由（Dynamic Routing）：

MaterialApp 和 CupertinoApp 实现动态路由的方式

1、MaterialApp 和 CupertinoApp 实现动态路由还是通过命名路由的方式，进行通过条件判断跳转的页面。
2、动态路由通常指根据用户输入或应用程序状态动态决定导航目标的路由管理方式。
3、所以说还是根据路由的给入得状态来进行实现的。
4、例子：

// 在 MaterialApp 中实现动态路由：
import 'package:flutter/material.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/page1_screen.dart';
import 'package:your_app/screens/page2_screen.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {String dynamicRoute = '/page1'; // 根据条件动态选择路由名称@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter App',initialRoute: '/',onGenerateRoute: (settings) {switch (settings.name) {case '/':return MaterialPageRoute(builder: (context) => HomeScreen());case '/page1':return MaterialPageRoute(builder: (context) => Page1Screen());case '/page2':return MaterialPageRoute(builder: (context) => Page2Screen());default:return MaterialPageRoute(builder: (context) => HomeScreen());}},);}
}//在 CupertinoApp 中实现动态路由：
import 'package:flutter/cupertino.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/page1_screen.dart';
import 'package:your_app/screens/page2_screen.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {String dynamicRoute = '/page2'; // 根据条件动态选择路由名称@overrideWidget build(BuildContext context) {return CupertinoApp(home: Builder(builder: (context) {switch (dynamicRoute) {case '/':return HomeScreen();case '/page1':return Page1Screen();case '/page2':return Page2Screen();default:return Container();}},),);}
}

GetMaterialApp 实现动态路由的方式

1、在 GetX 中，可以使用 GetMaterialApp 来实现动态路由。通过在 GetMaterialApp 中使用 GetX 提供的路由管理方式，可以根据条件动态选择要跳转的路由。
2、根据条件动态选择要跳转的路由名称，并将其作为 GetMaterialApp 的 initialRoute 参数传入，实现了根据条件动态选择路由的效果。通过使用 GetX 的 GetMaterialApp 和 GetPage，可以更加灵活地管理动态路由，实现页面之间的导航和跳转。
3、例子：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/page1_screen.dart';
import 'package:your_app/screens/page2_screen.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {String dynamicRoute = '/page1'; // 根据条件动态选择路由名称@overrideWidget build(BuildContext context) {return GetMaterialApp(title: 'Flutter App',initialRoute: '/',getPages: [GetPage(name: '/', page: () => HomeScreen()),GetPage(name: '/page1', page: () => Page1Screen()),GetPage(name: '/page2', page: () => Page2Screen()),],initialRoute: dynamicRoute,);}
}
四、 路由状态管理以及页面跳转如何传参
路由状态管理：

1、 MaterialApp 中的路由状态管理：

  • 在 MaterialApp 中，通过 routes 参数和 onGenerateRoute 方法来管理路由状态。
  • routes 参数用于静态路由映射，指定路由名称与页面组件的对应关系。
  • onGenerateRoute 方法用于动态生成路由，根据路由名称返回对应的页面组件。

2、CupertinoApp 中的路由状态管理：

  • 在 CupertinoApp 中，通过 onGenerateRoute 方法来管理路由状态。
  • onGenerateRoute 方法用于根据路由名称动态生成路由，返回对应的页面组件。

3、GetMaterialApp 中的路由状态管理：

  • 使用 GetMaterialApp 来管理应用程序的路由状态。
    - 在 getPages 中定义路由映射关系，将路由名称与页面构建函数关联起来。
页面之间的数据传递：

1、MaterialApp 和 CupertinoApp 页面跳转传参：

  • 在路由生成时，根据路由名称判断是否是特定页面，如果是，则创建页面组件时传递参数。
  • 通过 settings.arguments 获取传递的参数，并将参数传递给目标页面组件。

2、GetMaterialApp 页面跳转传参：

  • 在目标页面的构建函数中，可以通过 GetX 提供的方式来获取传递的参数。
  • 例如，可以在目标页面的构建函数中使用 Get.arguments 来获取传递的参数。

例子：（路由状态管理和页面跳转传参的方式，以及路由跳转接收参数的方式）

// MaterialApp 中的路由状态管理和页面跳转传参：
import 'package:flutter/material.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/details_screen.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter App',initialRoute: '/',routes: {'/': (context) => HomeScreen(),'/details': (context) => DetailsScreen(),},onGenerateRoute: (settings) {if (settings.name == '/details') {return MaterialPageRoute(builder: (context) => DetailsScreen(data: settings.arguments));}return null;},);}
}// MaterialApp 传参中页面接收参数的方式：
class DetailsScreen extends StatelessWidget {final String data;DetailsScreen({this.data});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Details Screen'),),body: Center(child: Text('Received Data: $data'),),);}
}// CupertinoApp 中的路由状态管理和页面跳转传参：
import 'package:flutter/cupertino.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/details_screen.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return CupertinoApp(home: HomeScreen(),onGenerateRoute: (settings) {if (settings.name == '/details') {return CupertinoPageRoute(builder: (context) => DetailsScreen(data: settings.arguments));}return null;},);}
}// CupertinoApp 传参中页面接收参数的方式：
class DetailsScreen extends StatelessWidget {final String data;DetailsScreen({this.data});@overrideWidget build(BuildContext context) {return CupertinoPageScaffold(navigationBar: CupertinoNavigationBar(middle: Text('Details Screen'),),child: Center(child: Text('Received Data: $data'),),);}
}// GetMaterialApp 中的路由状态管理和页面跳转传参：
// 在跳转页面时传递参数：
Get.toNamed('/details', arguments: 'Hello from HomeScreen');// 在接收参数的页面中获取参数：
class DetailsScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {final dynamic data = Get.arguments; // 获取传递的参数return Scaffold(appBar: AppBar(title: Text('Details Screen'),),body: Center(child: Text('Received Data: $data'),),);}
}// 在GetMaterialApp中设置路由和参数传递：
return GetMaterialApp(title: 'Flutter App',initialRoute: '/',getPages: [GetPage(name: '/', page: () => HomeScreen()),GetPage(name: '/details', page: () => DetailsScreen()),],onGenerateRoute: (settings) {if (settings.name == '/details') {return GetPageRoute(page: () => DetailsScreen(),settings: settings,);}return null;},
);

文章是在学习阶段总结的，可能出现很多纰漏，请大家多多指正和提出建议性的修改。

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

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

相关文章

编译结果处理的shell脚本

编译结果处理的shell脚本

#!/bin/bash WEB"web" DIST"dist" RED\033[0:31m GREEN\033[0;32m NC\033[0m #生产打包传参 BUILD"b" if [ -e ${WEB} ];then#删历史文件rm -r ${WEB}rm ${WEB}.zip fi #编辑文件 npm run build #检查构建是否成功 if[ -e ${DIST} ];then#改名mv…
阅读更多...
分布式事务的八种方案解析(1)

分布式事务的八种方案解析(1)

针对不同的分布式场景业界常见的解决方案有2PC、TCC、可靠消息最终一致性、最大努力通知等方案&#xff0c;以下总结8 种常见的解决方案&#xff0c;帮助大家在实际的分布式系统中更好地运用事务。 1.2PC 二阶段提交协议&#xff08;Two-phase commit protocol&#xff09;&…
阅读更多...
好用的视频压缩软件

好用的视频压缩软件

在当今数字化时代&#xff0c;视频已成为我们日常生活中不可或缺的一部分。无论是工作、学习还是娱乐&#xff0c;视频都扮演着重要的角色。视频的存储空间也越来越大&#xff0c;这给我们的设备存储带来了不小的挑战。因此&#xff0c;学习如何将视频压缩小点成为了一项实用的…
阅读更多...
Qt QMake指南（如何写pro文件）

Qt QMake指南（如何写pro文件）

QMake相关介绍 QMake是一个通过编译Pro文件自动生成Makefile文件的工具。 扩展知识 这里是关于make、makefile、cmake、CMakeLists.txt、qmake等工具和文件之间关系的详细解释&#xff1a; 起始&#xff1a;当我们开始学习基础的helloworld项目时&#xff0c;一般使用gcc命令…
阅读更多...
微信营销在使用时应该注意什么？

微信营销在使用时应该注意什么？

&#xff08;一&#xff09;注重个人品牌的打造 微信好友的信任是开展个人微信营销成功的基础&#xff0c;因此&#xff0c;平时应利用朋友圈和微信群发布一些有助于提升个人形象的信息。 &#xff08;二&#xff09;发送营销信息不可过滥 如果一个人的朋友圈内容充斥营销信息&…
阅读更多...
叁[3]，VM二次开发异常处理

叁[3]，VM二次开发异常处理

1&#xff0c;开发环境 VS2022/WPF/.NetFramework4.8 VM4.2 2&#xff0c;"模块状态0&#xff0c;错误码10100005&#xff0c;错误信息:模块与平台不匹配" 现象描述&#xff1a; 1&#xff0c;WPF/NetFramework项目中打开方案&#xff0c;对工具做模板&#xff0c…
阅读更多...
开源可视化表单可以用在哪些行业中？

开源可视化表单可以用在哪些行业中？

很多客户朋友会询问我们&#xff0c;什么样的行业可以使用低代码技术平台及开源可视化表单&#xff1f;其实&#xff0c;随着社会的进步和发展&#xff0c;很多中小型企业都希望通过低代码技术平台能够让企业实现提质增效的目的&#xff0c;也想借助它的优势特点进入流程化办公…
阅读更多...
MySql通过 Procedure 循环删除数据

MySql通过 Procedure 循环删除数据

一、问题描述 在日常使用运维中&#xff0c;一些特殊情况需要批量删除陈旧或异常数据。 如果通过 delete from 【表名】 where 【条件】 直接删除&#xff0c;可能会由于数据量过大&#xff0c;事务执行时间过长&#xff0c;造成死锁。 二、解决方案 通过 Procedure 使用循环…
阅读更多...
怎么提升机器人外呼的转化效率

怎么提升机器人外呼的转化效率

在某些情况下&#xff0c;如市场调查、产品推广等&#xff0c;语音机器人可以高效地完成大量的呼叫任务&#xff0c;并能通过预设的语音脚本和智能识别功能&#xff0c;初步筛选和分类潜在客户。此时&#xff0c;不转人工可能更为高效和经济。 然而&#xff0c;在一些需要深度沟…
阅读更多...
jenkins使用注意问题

jenkins使用注意问题

1.在编写流水线时并不知道当前处在哪个目录&#xff0c;导致名使用不当&#xff0c;以及文件位置不清楚 流水线任务默认路径是&#xff0c;test4_mvn为jenkins任务名 [Pipeline] sh (hide)pwd /var/jenkins_home/workspace/test4_mvn maven任务也是&#xff0c;看来是一样的…
阅读更多...
前端相关面试题--html

前端相关面试题--html

html是什么 html是超文本标记语言&#xff0c;与js和css一样&#xff0c;是由W3C&#xff08;万维网联盟&#xff09;制定的一套语言&#xff0c;超文本 指的是连接一个网站内或多个网站的网页的链接 标记是 html使用各种标记 来注明文本、图片、链接等 以便在浏览器这种进行 …
阅读更多...
自动驾驶基础一车辆模型

自动驾驶基础一车辆模型

模型概述&#xff1a; 自行车动力学模型通常用于研究自行车在骑行过程中的行为&#xff0c;如稳定性、操控性和速度等。模型可以基于不同的简化假设和复杂度&#xff0c;从简单的二维模型到复杂的三维模型&#xff0c;甚至包括骑行者的动态。力学方程&#xff1a; 基础物理学方…
阅读更多...
【数据结构与算法】广度优先遍历

【数据结构与算法】广度优先遍历

前序/中序/后序遍历属于 深度优先遍历 广度优先遍历实现 节点定义 /*** Definition for a binary tree node.* function TreeNode(val) {* this.val val;* this.left this.right null;* }*/对应lc 102题 注意js里面 push pop unshift shift之间的区别和关系 // 递…
阅读更多...
【SpringBoot整合系列】SpringBoot整合kinfe4j

【SpringBoot整合系列】SpringBoot整合kinfe4j

目录 kinfe4j与Swagger的区别 SpringBoot2.x整合kinfe4j1.添加依赖2.启动类注解3.创建Knife4J配置类4.实体类5.接口admin访问 api访问 常用注解汇总SpringBoot3.x整合Kinfe4j启动报错解决1.更换依赖2.启动类3.配置4.配置类5.参数实体类6.接口admin访问 api访问 各版本注解参照 …
阅读更多...
树莓派4B学习笔记8：开机自启动Python脚本_kill关闭后台脚本

树莓派4B学习笔记8：开机自启动Python脚本_kill关闭后台脚本

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; 紧接着上篇文章学习的串口通信,今日学习如何让树莓派开机…
阅读更多...
【方法】如何解除PDF“打开密码”？

【方法】如何解除PDF“打开密码”？

很多人会给PDF文件设置密码保护&#xff0c;防止文件被随意打开。那如果后续想要解除“打开密码”&#xff0c;如何操作呢&#xff1f; 首先&#xff0c;我们要分两种情况来看&#xff0c;一种是知道密码的情况下&#xff0c;不需要保护文件了&#xff0c;也就是不想每次打开P…
阅读更多...
若依Ruoyi-vue和element admin的区别，该如何选择。

若依Ruoyi-vue和element admin的区别，该如何选择。

提到中后台的前端框架&#xff0c;每个人都能列举出很多&#xff0c;这其中提及率比较高的就是Ruoyi和element admin两款&#xff0c;很多小伙伴分不清二者&#xff0c;本文为大家详细讲解一下。 一、若依Ruoyi-vue是什么&#xff1f; 若依Ruoyi-Vue是一款基于 Vue.js 开发的…
阅读更多...
React基础教程：TodoList案例

React基础教程：TodoList案例

todoList案例——增加 定义状态 // 定义状态state {list: ["kevin", "book", "paul"]}利用ul遍历list数组 <ul>{this.state.list.map(item ><li style{{fontWeight: "bold", fontSize: "20px"}} key{item.i…
阅读更多...
DAC测试实验——FPGA学习比

DAC测试实验——FPGA学习比

一、DAC简介 DAC全称Digital to Analog Converter&#xff0c;即数模转换器。它用于将主控芯片产生的数字值(0和1)转换为模拟值(电压值)。 1、DAC参数指标 2、DAC类型 常用的DAC可大致分为权电阻网络DAC、T型电阻网络DAC、倒T型电阻网络DAC以及权电流型DAC。 3、AD9708/3PD9…
阅读更多...
Idea jdk配置的地方 启动时指定切换的地方

Idea jdk配置的地方 启动时指定切换的地方

jdk 配置的地方 项目sdk 所在位置 管理添加或删除的地方&#xff0c;增加后&#xff0c;可以在在上面切换 启动时指定版本
阅读更多...
最新文章

Copyright @ 2022~2023