Flutter中GetX系列九--路由/页面跳转,传值,中间件(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.argumentsprint(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 createState() => _LoginVCState();}class _LoginVCState extends State {  @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("登录页面"),      ),    );  }}

来源地址：https://blog.csdn.net/eastWind1101/article/details/130702295