flutter: 用getx切换路由

一,安装第三方库

官方包地址:

https://pub.dev/packages/get

编辑pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  get: ^4.7.2

然后点击 pub get

二,代码:

1,main.dart

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return   GetMaterialApp(
      debugShowCheckedModeBanner: false, //去除debug图标
      defaultTransition: Transition.rightToLeft,   //指定动画
      theme: ThemeData(primarySwatch: Colors.red),
      initialRoute: "/",    //初始化页面
      getPages: APPage.routes,   //路由
    );
  }
  
}

2,路由:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getxdemo1/middlewares/AuthMiddleware.dart';
import 'package:getxdemo1/pages/NextPage.dart';
import 'package:getxdemo1/pages/HomePage.dart';
import 'package:getxdemo1/pages/LoginPage.dart';

class APPage {
  static final routes = [
    GetPage(name: '/', page: () => HomePage()),
    GetPage(name: '/login', page: () => LoginPage()),
    GetPage(name: "/next", page: () => NextPage(),
        middlewares: [AuthMiddleware(),]
        /*
        transition: Transition.rightToLeft,
        transitionDuration: Duration(milliseconds: 500),
        curve: Curves.linear,
        opaque: false,
         */
       ),
  ];
}

3,页面

HomePage

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

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>  {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("home页面"),
      ),

      body: Center(
        child: ElevatedButton(
          child: Text("跳转到next页面"),
          onPressed: () {
            Get.toNamed("/next",arguments: {
              "id":20,
              "name":"苏东坡新传",
            });
          },
        ),
      ),

    );
  }

}

NextPage

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

class NextPage extends StatefulWidget {
  @override
  State<NextPage> createState() => _NextPageState();
}

class _NextPageState extends State<NextPage>  {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("next页面"),
      ),

      body: Center(
        child: ElevatedButton(
          child: Text("返回home页面"),
          onPressed: () {
            print("接收到的参数:");
            print(Get.arguments);
            print("参数:id:");
            print(Get.arguments['id']);
            print("参数:name:");
            print(Get.arguments['name']);
            Get.back();
          },
        ),
      ),

    );
  }
  
}

LoginPage

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

class LoginPage extends StatefulWidget {
  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage>  {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("login页面"),
      ),

      body: Center(
        child: ElevatedButton(
          child: Text("点这里登录"),
          onPressed: () {
          },
        ),
      ),

    );
  }
  
}

4,中间件

AuthMiddleware.dart

import 'package:flutter/src/widgets/navigator.dart';
import 'package:get/get.dart';

class  AuthMiddleware extends GetMiddleware {
  //  重写跳转页面,例如点击购物,但是如果没有登录,就直接跳转登录页面;
  //  登录了就跳转商品页面
  @override
  RouteSettings? redirect(String? route) {
    print("redirect");

    int isLogin = 0;

    if (isLogin == 1) {
      return super.redirect(route);
    } else {
      return RouteSettings(name: "/login");
    }
  }
}

 

三,测试效果:

 

posted @ 2025-04-19 10:41  刘宏缔的架构森林  阅读(106)  评论(0)    收藏  举报