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

路由使用

英文文档参考,既然要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,
  );
);