Flutter中GetX系列九–路由/页面跳转,传值,中间件(GetPage)

1.页面传值跳转和中间件(GetPage)使用代码

import 'package:flutter/material.dart';
import 'package:flutterlianxi/login_VC.dart';
import 'package:get/get.dart';
import 'routers.dart';

void main() {
  runApp(GetMaterialApp(
    home: BottomAppBarDemo(),
    //设置初始化路由
    initialRoute: "/",
    //全部配置页面跳转的动画(是安卓的风格还是ios的风格)
    defaultTransition: Transition.rightToLeft,
    //设置路由地址
    getPages: RoutersPageVC.routers,
  ));
}


class BottomAppBarDemo extends StatelessWidget {
  const BottomAppBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      body: Column(
        children: [
          //普通页面跳转
          ElevatedButton(
              onPressed: () {
                //带参数传值跳转
                Get.toNamed("/login_VC", arguments: {"dataId": "2345"});

                //Get.back();//返回上一级页面

                // Get.offAll(Tabs());//返回到跟路由

                //Get.off(LoginVC());//跳转的页面没有返回按钮 
              },
              child: const Text("路由跳转")),
          const SizedBox(
            height: 20,
          ),
          //中间件页面跳转
          ElevatedButton(
              onPressed: () {
               //在跳转的时候可以根据条件判断,不满足条件的时候跳转到其他页面
                Get.toNamed("/shop_VC");
              },
              child: const Text("中间件页面跳转")),
        ],
      ),
    );
  }
}

1.1.使用to方法实现页面基本跳转

import './Home.dart';

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

 1.2.使用Get.toNamed()跳转到命名路由

系统跳转方式

//系统跳转方式
Navigator.pushNamed(context, "/login")

 Getx跳转方式

//没有携带参数
Get.toNamed("/login");
//携带参数
Get.toNamed("/shop",arguments: { "id":20 });


//接收参数,可以直接通过Get.arguments

print(Get.arguments);

1.3.返回上一级页面Get.back()

系统跳转方式

Navigator.of(context).pop();

Getx跳转方式​​​​​​​

 Get.back();

1.4.返回到根路由

系统跳转方式

ElevatedButton(
            onPressed: () async {
              Navigator.of(context).pushAndRemoveUntil(
                  MaterialPageRoute(builder: (BuildContext context) {
                return const Tabs(index: 4);
              }), (route) => false);
            },
            child: Text("跳转到首页")),
      ),

  Getx跳转方式

Get.offAll( const Tabs(index: 4));

1.5.跳转到下一个页面的,但是没有返回按钮(一般应用于闪屏页，登录页面等)

Get.off(Login());

2. 设置路由的封装类

main类中的RoutersPageVC.routers封装

import 'package:get/get.dart';
import './login_VC.dart';
import './shop_VC.dart';
import './middle_VC.dart';

class RoutersPageVC {
  static final routers = [
    GetPage(
        name: "/login_VC",
        page: () => const LoginVC(),
        transition: Transition.leftToRight //设置单个页面跳转的方式
        ),
    GetPage(
        name: "/shop_VC",
        page: () => const ShopPageVC(),
        middlewares: [MiddlePageVC()],//设置中间件(GetPage),可以根据优先级设置多个中间件
        ),
  ];
}

3.路由封装类中的中间件 MiddlePageVC类的封装

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import './login_VC.dart';

//中间件(GetPage):可以做一些权限的判断.例如用户在跳转到支付页面,这个时候用户没有登录,就可以使用中间件的方式进行判断,先让用户跳转到中间件页面.具体使用详情如下:

class MiddlePageVC extends GetMiddleware {
  //需要继承GetMiddleware

  @override
//需要实现系统的该方法
  RouteSettings? redirect(String? route) {
    // return null;表示跳转到以前的路由
    //根据条件进行判断,满足条件进行跳转,否则不进行跳转
    return RouteSettings(name: "/login_VC",arguments: {});
  }
}

4.跳转到对应页面时候,传递值的接收

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class LoginVC extends StatefulWidget {
  const LoginVC({super.key});

  @override
  State<LoginVC> createState() => _LoginVCState();
}

class _LoginVCState extends State<LoginVC> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //直接通过Get就可以获取上一个页面传值
    print("获取传值:${Get.arguments["dataId"]}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("登录页面导航"),
      ),
      body: Container(
        child: Text("登录页面"),
      ),
    );
  }
}