Flutter完全开发手册
  • Flutter Getx路由管理,页面跳转与传值

    GetX是一个简单、高效、强大的管理状态、路由管理库。GetX为我们封装了Navigation,无需传入context可进行跳转,并且能很方便的使用跳转动画。
    使用路由之前需要把MaterialApp换成GetMaterialApp,这十分重要!

    应用程序入口设置

    当我们导入依赖后,在应用程序顶层把GetMaterialApp 作为顶层,如下所示

    
    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
      @override
      Widget build(BuildContext context) {
          //MaterialApp之前是这样
        return const GetMaterialApp(
          debugShowCheckedModeBanner: false, //去掉debug图标
          title: 'Flutter GetX',
          home: MyHomePage(),
        );
      }
    }
    

    1、普通路由导航

    1.1、Get.to()实现普通路由跳转,跳转到新页面

    从当前页面进入到一个新页面,to接收一个页面组件

    
    ElevatedButton(
    	onPressed: () async {
    		Get.to(NextScreen());
    	},
    	child: Text("跳转到新页面")
    )
    

    1.2 back关闭路由,返回到上一级页面

    
    //系统跳转方式:
    Navigator.of(context).pop();
    //Getx跳转方式:
    Get.back();
    

    1.3、Get.toNamed()跳转到命名路由,可带参数传值

    
    //系统跳转方式
    Navigator.pushNamed(context, "/registerPhone")
    
    //Getx跳转方式 
    //没有携带参数
    Get.toNamed("/registerPhone");
    //携带参数
    Get.toNamed("/registerPhone",arguments: { "id":20 });
    
    //接受数据
    print(Get.arguments);
    

    1.4、Get.off(NextScreen());

    进入下一个页面,但没有返回上一个页面的选项(用于闪屏页,登录页面等)。

    1.5、Get.offAll(); 返回到根路由,清空历史路由

    该方法会清空我们之前打开过的页面,只留下新的页面(在购物车、投票和注册登录中很有用)。

    
    //系统跳转方式 返回到根页面
    Navigator.of(context).pushAndRemoveUntil(
    	  MaterialPageRoute(builder: (BuildContext context) {
    	return const HomePage();
      }), (route) => false);
    
    //Getx跳转方式
    Get.offAll(NextScreen());
    

    二、配置路由动画与配置动态路由

    
    GetMaterialApp(
            debugShowCheckedModeBanner: false, //去掉debug图标
            title: 'Flutter 路由管理',
            theme: ThemeData(
                primarySwatch: Colors.blue,
                appBarTheme: const AppBarTheme(
                  centerTitle: true,
                )),
            // 初始化路由
            initialRoute: "/",
            // 配置路由动画
            defaultTransition: Transition.rightToLeft,
            // 配置动态路由
            getPages: [
              GetPage(name: "/", page: () => const HomePage()),
              GetPage(
                name: "/registerPhoneCode",
                page: () => const RegisterPhoneCodePage(),
              ),
              GetPage(
                  name: "/registerPhone", page: () => const RegisterPhonePage(),
                  transition: Transition.downToUp),
              GetPage(
                  name: "/registerSuccess",
                  page: () => const RegisterSuccessPage()),
              GetPage(
                  name: "/cart",
                  middlewares: [
                    // 中间件执行的顺序
                    CartAuthMiddleware(priority: 1)
                  ],
                  page: () => const CartPage()),
            ]);
    

    三、路由中间件 Redirect

    当被调用路由的页面被搜索时,这个函数将被调用。它将RouteSettings作为重定向的结果。或者给它null,就没有重定向了。

    中间件优先级

    设置中间件的优先级定义Get中间件的执行顺序。这些中间件会按这个顺序执行 -8 => 2 => 4 => 5
    
    final middlewares = [
      GetMiddleware(priority: 2),
      GetMiddleware(priority: 5),
      GetMiddleware(priority: 4),
      GetMiddleware(priority: -8),
    ];
    
    
    class CartAuthMiddleware extends GetMiddleware{
      @override
      CartAuthMiddleware({required priority});
      @override
      RouteSettings? redirect(String? route){
        // return null;  //为null,就没有重定向了
        Future.delayed(Duration(seconds: 1), () => Get.snackbar("提示", "请先登录后操作"));
        //没有权限跳转到指定页面
        return const RouteSettings(name:"/registerPhone",arguments:{});
      }
    }
    
    
    //配置路由
     GetPage(
      name: "/cart",
      middlewares: [
    	// 中间件执行的顺序
    	CartAuthMiddleware(priority: 1)
      ],
      page: () => const CartPage()),
    
    上一篇:Flutter GetX调用snackbar、Dialog、BottomSheet下一篇:Flutter Getx 状态管理 高性能的响应式状态管理