1.頁(yè)面?zhèn)髦堤D(zhuǎn)和中間件(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(),
    //設(shè)置初始化路由
    initialRoute: "/",
    //全部配置頁(yè)面跳轉(zhuǎn)的動(dòng)畫(是安卓的風(fēng)格還是ios的風(fēng)格)
    defaultTransition: Transition.rightToLeft,
    //設(shè)置路由地址
    getPages: RoutersPageVC.routers,
  ));
}


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首頁(yè)"),
      ),
      body: Column(
        children: [
          //普通頁(yè)面跳轉(zhuǎn)
          ElevatedButton(
              onPressed: () {
                //帶參數(shù)傳值跳轉(zhuǎn)
                Get.toNamed("/login_VC", arguments: {"dataId": "2345"});

                //Get.back();//返回上一級(jí)頁(yè)面

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

                //Get.off(LoginVC());//跳轉(zhuǎn)的頁(yè)面沒(méi)有返回按鈕 
              },
              child: const Text("路由跳轉(zhuǎn)")),
          const SizedBox(
            height: 20,
          ),
          //中間件頁(yè)面跳轉(zhuǎn)
          ElevatedButton(
              onPressed: () {
               //在跳轉(zhuǎn)的時(shí)候可以根據(jù)條件判斷,不滿足條件的時(shí)候跳轉(zhuǎn)到其他頁(yè)面
                Get.toNamed("/shop_VC");
              },
              child: const Text("中間件頁(yè)面跳轉(zhuǎn)")),
        ],
      ),
    );
  }
}

1.1.使用to方法實(shí)現(xiàn)頁(yè)面基本跳轉(zhuǎn)

import './Home.dart';

ElevatedButton(
            onPressed: () async {
              Get.to(Home());
            },
            child: Text("跳轉(zhuǎn)到首頁(yè)")),

?1.2.使用Get.toNamed()跳轉(zhuǎn)到命名路由

系統(tǒng)跳轉(zhuǎn)方式

//系統(tǒng)跳轉(zhuǎn)方式
Navigator.pushNamed(context, "/login")

?Getx跳轉(zhuǎn)方式

//沒(méi)有攜帶參數(shù)
Get.toNamed("/login");
//攜帶參數(shù)
Get.toNamed("/shop",arguments: { "id":20 });


//接收參數(shù),可以直接通過(guò)Get.arguments

print(Get.arguments);

1.3.返回上一級(jí)頁(yè)面Get.back()

系統(tǒng)跳轉(zhuǎn)方式

Navigator.of(context).pop();

Getx跳轉(zhuǎn)方式???????

 Get.back();

1.4.返回到根路由

系統(tǒng)跳轉(zhuǎn)方式

ElevatedButton(
            onPressed: () async {
              Navigator.of(context).pushAndRemoveUntil(
                  MaterialPageRoute(builder: (BuildContext context) {
                return const Tabs(index: 4);
              }), (route) => false);
            },
            child: Text("跳轉(zhuǎn)到首頁(yè)")),
      ),

??Getx跳轉(zhuǎn)方式

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

1.5.跳轉(zhuǎn)到下一個(gè)頁(yè)面的,但是沒(méi)有返回按鈕(一般應(yīng)用于閃屏頁(yè)，登錄頁(yè)面等)

Get.off(Login());

2. 設(shè)置路由的封裝類

main類中的RoutersPageVC.routers封裝文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-596442.html

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 //設(shè)置單個(gè)頁(yè)面跳轉(zhuǎn)的方式
        ),
    GetPage(
        name: "/shop_VC",
        page: () => const ShopPageVC(),
        middlewares: [MiddlePageVC()],//設(shè)置中間件(GetPage),可以根據(jù)優(yōu)先級(jí)設(shè)置多個(gè)中間件
        ),
  ];
}

3.路由封裝類中的中間件?MiddlePageVC類的封裝

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

//中間件(GetPage):可以做一些權(quán)限的判斷.例如用戶在跳轉(zhuǎn)到支付頁(yè)面,這個(gè)時(shí)候用戶沒(méi)有登錄,就可以使用中間件的方式進(jìn)行判斷,先讓用戶跳轉(zhuǎn)到中間件頁(yè)面.具體使用詳情如下:

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

  @override
//需要實(shí)現(xiàn)系統(tǒng)的該方法
  RouteSettings? redirect(String? route) {
    // return null;表示跳轉(zhuǎn)到以前的路由
    //根據(jù)條件進(jìn)行判斷,滿足條件進(jìn)行跳轉(zhuǎn),否則不進(jìn)行跳轉(zhuǎn)
    return RouteSettings(name: "/login_VC",arguments: {});
  }
}

4.跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面時(shí)候,傳遞值的接收

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();
    //直接通過(guò)Get就可以獲取上一個(gè)頁(yè)面?zhèn)髦?    print("獲取傳值:${Get.arguments["dataId"]}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("登錄頁(yè)面導(dǎo)航"),
      ),
      body: Container(
        child: Text("登錄頁(yè)面"),
      ),
    );
  }
}

到了這里，關(guān)于Flutter中GetX系列九--路由/頁(yè)面跳轉(zhuǎn),傳值,中間件(GetPage)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！