路由使用
英文文档参考,既然要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 {
@override
Widget 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 {
@override
Widget 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());
// 上个页面返回后,立即拿到数据,456
print(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
"我是提示的信息", // message
icon: 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 - 如何使用路由管理页面
发布评论