路由使用

英文文档参考,既然要get的使用，就需要首先再入口处使用 GetMaterialApp

示例代码仓库

1. GetMaterialApp

GetMaterialApp常用配置参数说明

配置同 MaterialApp 差不多

可选参数名	描述	类型
title	是应用程序的描述	String
defaultTranstion	路由的过渡效果	Transition枚举
initialRoute	默认选中的路由页面	字符串，或者页面类名
unknownRoute	路由找不到显示的页面	GetPage
getPages	路由表配置	List
routingCallback	路由监听回调函数	(Routing route) => { }

1.1 过渡效果配置参数说明

枚举值	描述	使用
fade	从底部向上淡入，从上边向底部淡出	Transition.fade
fadeIn	平面式的淡入淡出	同上
rightToLeft	从右侧向左滑入
leftToRight	从左侧向右滑入
upToDown	从顶部向下进入
downToUp	从下向上进入
rightToLeftWithFade	从右侧带上黑色透明蒙层效果向左滑入
leftToRightWithFade	从左侧带上黑色透明蒙层效果向右滑入
zoom	放大缩小的缩放效果
topLevel	顶部突然放大到正常效果
noTransition	没有过渡效果
cupertino	风格的过渡效果（左右进入退出）
cupertinoDialog	ios风格的效果（上下进入退出效果）
size	渐隐渐现效果
native	flutter 自带的过渡效果

2. 配置路由和过渡效果

void main() {runApp(GetMaterialApp(debugShowCheckedModeBanner: false,title: "Application",defaultTransition: Transition.fade,initialRoute: "/",// unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage())getPages: [GetPage(name: '/', page: () => HomePage()),GetPage(name: '/mine', page: () => MinePage()),],),);
}

2.1 给某个页面配置过渡效果

GetPage(name: '/mine',page: () => MinePage(),transition: Transition.zoom,
),

3. 路由跳转

3.1 普通直接跳转

MaterialButton(onPressed: () {Get.to(MinePage());},color: Colors.blue,textColor: Colors.white,child: Text("跳转到mine-page"),
)

3.2 命名路由跳转

MaterialButton(onPressed: () {Get.toNamed("/mine");},color: Colors.blue,textColor: Colors.white,child: Text("跳转到mine-page"),
)

3.3 返回上个页面

MaterialButton(onPressed: () {Get.back();},color: Colors.blue,textColor: Colors.white,child: Text("返回上个页面"),
),

3.4 Get.off() | Get.offAll() 跳转页面

Get.off() 导航到下一个页面并删除前一个页面
Get.offAll() 导航到下一个页面并删除以前所有的页面
该方法和 Get.to() 实现的效果一样，但是使用此方法跳转后，在下一个页面，不能再返回前一个页面,
可以用在登录页，获取退出页面，这样登录后，或者退出页面后，就不能再返回到前一个页面

MaterialButton(onPressed: () {Get.off(MinePage());},color: Colors.blue,textColor: Colors.white,child: Text("Get.off跳转"),
)

3.5 普通跳转传参

使用 arguments传参数和arguments参数接收

// 传参
MaterialButton(onPressed: () {Get.to(MinePage(), arguments: '我是参数');},color: Colors.blue,textColor: Colors.white,child: Text("跳转传参"),
)

接收参数

class MinePage extends StatelessWidget {@overrideWidget build(BuildContext context) {// 接收参数String name = Get.arguments;print("参数：$name");return Scaffold(appBar: AppBar(title: Text("路由管理"),centerTitle: true,),);}
}

3.6 命名路由传参

MaterialButton(onPressed: () {Get.toNamed('/mine?name=李四');},color: Colors.blue,textColor: Colors.white,child: Text("命名路由传参"),
)

接收参数

class MinePage extends StatelessWidget {@overrideWidget build(BuildContext context) {// 接收参数 Map类型String name = Get.parameters['name'];print("参数：$name");return Scaffold(appBar: AppBar(title: Text("路由管理"),centerTitle: true,),);}
}

3.7 命名路由动态传参

第一步：定义动态命名路由

  GetPage(name: "/mine/:id", page: () => MinePage()),

第二步：跳转

MaterialButton(onPressed: () {// 不允许传中文，会报错Get.toNamed("/mine/123123");//  Get.toNamed("/mine/中");},color: Colors.blue,textColor: Colors.white,child: Text("命名路由动态传参"),
)

第三步：接收参数

String id = Get.parameters['id'];
print("参数：$id");

3.8 返回上个页面立即接收携带回来的参数

一块使用 await Get.to() 和 Get.back(result: 456) 实现

第一步：跳转某个页面，并接受数据

MaterialButton(onPressed: () async {var data = await Get.to(MinePage());// 上个页面返回后，立即拿到数据,456print(data);},color: Colors.blue,textColor: Colors.white,child: Text("await Get.to"),
)

第二步：携带参数返回上个页面

MaterialButton(onPressed: () {// 返回携带参数Get.back(result: 456);},color: Colors.blue,textColor: Colors.white,child: Text("返回上个页面"),
),

3.9 Get.offNamed 和 Get.offAllNamed

Get.offNamed () 命名路由导航到下一个页面并删除前一个页面

MaterialButton(onPressed: () {Get.offNamed ("/mine");},color: Colors.blue,textColor: Colors.white,child: Text("Get.offNamed"),
)

4. 路由中间件routingCallback

routingCallback: 路由监听回调

  GetMaterialApp(debugShowCheckedModeBanner: false,title: "Application",defaultTransition: Transition.fade,initialRoute: "/",getPages: [GetPage(name: '/', page: () => HomePage()),GetPage(name: "/mine/:id", page: () => MinePage()),GetPage(name: "/news", page: () => NewsPage()),GetPage(name: '/mine',page: () => MinePage(),transition: Transition.zoom,),],routingCallback: (Routing route) {print(route.current);},),

5. snackbar 提示框

配置参数太多，就自己看文档吧

MaterialButton(onPressed: () {Get.snackbar(Get.snackbar("提示", // title"我是提示的信息", // messageicon: Icon(Icons.home), // 头部的图标shouldIconPulse: true,barBlur: 10,colorText: Colors.white, // 字体颜色isDismissible: true,snackPosition: SnackPosition.BOTTOM, // 显示的位置duration: Duration(seconds: 3), // 显示时长titleText: Text("自定义标题"), // 会覆盖掉 第一个 title的参数的效果messageText: Text("自定义提示语"), // 会覆盖掉 第二个 message的参数的效果maxWidth: 200.2, // 提示框的最大宽度margin: EdgeInsets.all(100), // 提示框距离四周的距离padding: EdgeInsets.all(10), // 提示框的内边距borderRadius: 20.2, // 提示框四周的圆角borderColor: Colors.red, // 提示框边框的颜色，必须和borderWidth一块用，单独使用会报错borderWidth: 2.2, // 提示框边框大小backgroundColor: Colors.black54, // 背景色leftBarIndicatorColor: Colors.blue, // 左侧边上一条竖杆的背景色，并不是边框boxShadows: [BoxShadow(color: Colors.red, offset: Offset(10, 20)),], // 添加阴影效果onTap: (GetBar<Object> a) {print(a);}, // 提示框点击回调););},color: Colors.red,textColor: Colors.white,child: Text("snackbar"),
),

6. dialogs 弹窗

6.1 默认弹窗效果

Get.defaultDialog() 打开弹窗
关闭弹窗：调用路由的 Get.back() 进行关闭, 配置太多了，自己看源码吧

MaterialButton(onPressed: () {Get.defaultDialog(title: "您确定要这样吗", // 弹窗的标题titleStyle: TextStyle(color: Colors.blue), // 弹窗的标题的样式onConfirm: () => Get.back(), // 确定回调onCancel: () => Get.back(), // 取消的回调confirmTextColor: Colors.purple, // 确定按钮的回调字体颜色cancelTextColor: Colors.red, // 取消的回调字体颜色textConfirm: "确定", // 确定按钮 文字textCancel: "取消", // 取消按钮 文字confirm: Text("自定义确定按钮"), // 自定义确定按钮, 需要自己写关闭函数，比较灵活cancel: MaterialButton(onPressed: Get.back,color: Colors.blue,child: Text("自定义取消按钮"),), // 自定义取消按钮middleTextStyle: TextStyle(color: Colors.blue,), // 中间的提示语的样式，自定义content参数时无效middleText: "Dialog made in 3 lines of code", // 中间的提示语backgroundColor: Colors.greenAccent, // 整个背景色buttonColor: Colors.red, // 确定按钮的背景色，自定义按钮时无效radius: 5, // 弹窗的圆角效果actions: [Icon(Icons.ac_unit),Icon(Icons.ac_unit),Icon(Icons.ac_unit),Icon(Icons.ac_unit),], // 同appBar上action 效果一样content:Text("我是自定义中间显示的widget"), // 自定义中间显示的UI，会覆盖掉middleText的效果);},color: Colors.red,textColor: Colors.white,child: Text("打开默认的Dialogs"),
),

6.2 自定义的弹窗

默认高度铺满全屏 Get.dialog()

MaterialButton(onPressed: () {Get.dialog(Container(color: Colors.black26,child: Text("我是文字"),),);},color: Colors.red,textColor: Colors.white,child: Text("打开自定义的Dialogs"),
),

6.3 generalDialog 弹窗

效果同自定义弹窗，也是铺满全屏

Get.generalDialog(pageBuilder: (BuildContext context,Animation<double> animation,Animation<double> secondaryAnimation) {return Container(color: Colors.red,);},
);

7. bottomSheet

调用 Get.back() 关闭弹窗

Get.bottomSheet(Container(child: Wrap(children: <Widget>[ListTile(leading: Icon(Icons.music_note),title: Text('Music'),onTap: () {Get.back()}),ListTile(leading: Icon(Icons.videocam),title: Text('Video'),onTap: () {},),],),),backgroundColor: Colors.green, // 底部bottomSheet的背景色elevation: 10.0,);
);

Getx - 如何使用路由管理页面相关推荐

爆破无线路由器管理页面登录密码
爆破无线路由器管理页面登录密码使用BurpSuite爆破路由器管理密码主要步骤: 1:输入任意密码,使用Proxy模块截取cookie 2:使用Decoder转码分析cookie 3:设定cook ...
Flutter 全能型选手GetX —— 路由管理
使用篇简介依赖管理路由管理状态管理主题配置多语言配置离线缓存网络请求原理篇从源码看Getx的依赖原理一.Getx 路由基本使用 1.普通路由 Get.to(SecondP ...
Flutter路由管理和页面参数的传递（获取返回）
前言在做 Flutter 开发的时候所有的页面以及页面上的元素都变成了 Widget ,创建一个页面或者视图直接 new 一个新的 widget 就可以,相关的参数我们可以直接通过构造函数直接传递. ...
Flutter路由管理和接收页面的返回值
Flutter使用Navigator进行路由管理. 跳转页面使用Navigator的push方法进行跳转.可以看到总共有6个push方法 1.push(route) 通过路由跳转通过路由进行跳转 ...
Bolt 的 Flutter 路由管理实践（页面解耦，流程控制、功能拓展等）
在各大移动开发框架(Android.iOS.Flutter.React Native-)中,路由管理始终是 UI 架构最具热议的话题之一. 一大原因就是应用程序的页面会不可避免的多,我们可以使用 B ...
Flutter路由管理和页面参数的传递（源码分析）
前言上一篇 Flutter路由管理和页面参数的传递(获取&返回) 文章中我们讲述了这么用代码实现 Flutter 中页面参数的传递,这一篇我们用源码分析一下 Navigator 为什么可以进 ...
水星路由器登录界面找不到服务器,水星路由器管理页面怎么登陆不进去？ | 192路由网...
正在情况下,在浏览器中输入melogin.cn,就可以进入水星路由器的管理页面.如果在浏览器中输入melogin.cn后,无法进入水星路由器的管理页面,请按照下面的步骤进行操作. 注意: 如果你在浏览 ...
dvwa页面打不开的原因_路由器管理页面打不开怎么办？ | 192路由网
如果打不开路由器的管理页面,就无法对路由器进行设置,这非常的糟糕. 为了帮助大家解决这个问题,鸿哥特意整理了这篇文章,来详细的介绍路由器管理页面打不开的解决办法,请按照下面的步骤进行操作. 1. 你的 ...
08-HR-权限管理模块（给员工分配角色，权限点管理页面开发，给角色分配权限，前端权限-页面访问权(路由)，前端权限-按钮操作权）
权限管理模块 RBAC的权限设计思想采用方案: RBAC的权限模型,RBAC(Role-Based Access control) ,也就是基于角色的权限分配解决方案权限控制目标:不同的用户登录系 ...

Getx - 如何使用路由管理页面