Flutter中GetX的用法(路由管理)

iFlyCai2024-03-17 10:18

目录

前言

一.安装

二.从一个计时器开始

三.Getx路由管理

1.普通路由导航

1.导航到新的页面

2.关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西

3.进入下一个页面，但没有返回上一个页面的选项（用于SplashScreens，登录页面等）

4.进入下一个界面并取消之前的所有路由

5.要导航到下一条路由，并在返回后立即接收或更新数据

2.别名路由导航

1.导航到下一个页面

2.浏览并删除前一个页面

3.浏览并删除所有以前的页面

4.别名路由传值

5.动态网页链接

3.中间件

4.免context导航

1.SnackBars

2.Dialogs

3.BottomSheets

四.文章中的完整demo

前言

正如Get官方介绍，GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。GetX 有3个基本原则：

性能： GetX 专注于性能和最小资源消耗。

效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。

结构： GetX 可以将界面、逻辑、依赖和路由之间低耦合,逻辑更清晰，代码更容易维护。

这篇文章主要是介绍下GetX的用法。

一.安装

目前get最新的版本是4.6.6。安装方式如下：

dependencies:

get: ^4.6.6

二.从一个计时器开始

但我们创建一个flutter工程的时候，系统会生成一个计时器的示例代码，代码大致如下(我删除了部分注释代码)：

Dart 复制代码 
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

主要功能是点击+按钮，每次计时器的个数+1.点击按钮之后，调用setState方法刷新_counter变量。

下面我们看一下如何使用getx来实现上述的功能：

第一步：把系统的MaterialApp改成GetMaterialApp:

void main() => runApp(GetMaterialApp(home: Home()));

第二步：创建业务类，我们把_counter变量放在Controller类中：

class Controller extends GetxController{

var counter = 0.obs;

increment() => counter++;

}

第三步：使用StatelessWidget代替StatefulWidget，节省下内存。修改之后的完整代码如下：

Dart 复制代码 
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) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class Controller extends GetxController{
  var counter = 0.obs;
  incrementCounter()=>counter++;
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  Widget build(BuildContext context) {
    final Controller controller = Get.put(Controller());

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Obx(() => Text(
              '${controller.counter}',
              style: Theme.of(context).textTheme.headlineMedium,
            )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          controller.incrementCounter();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

三.Getx路由管理

1.普通路由导航

1.导航到新的页面

假如我们有一个新页面NextScreenPage,代码如下：

Dart 复制代码 
import 'package:flutter/material.dart';

class NextScreenPage extends StatelessWidget {
  const NextScreenPage({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("新页面"),
      ),
      body: Container(
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

从当前页面跳转到NextScreenPage页面，代码如下：

Get.to(()=>NextScreen());

2.关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西

还是以上面的代码为例，我们添加一个返回按钮，点击返回按钮的时候，回到当前页面。主需要在按钮的点击事件中添加如下代码即可：

Get.back();

NextScreenPage页面完整代码如下：

Dart 复制代码 
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("新页面"),
      ),
      body: Center(
        child: ElevatedButton(onPressed: (){
          Get.back();
        }, child: const Text("返回上一个页面")),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
3.进入下一个页面，但没有返回上一个页面的选项（用于SplashScreens，登录页面等）

主要的代码如下：

Get.off(()=>const NormalRoutePage(title: "主页面"));

这里我们模拟一个登陆页面的场景，假设当前页面(NormalRoutePage)有一个按钮，点击按钮之后，我们跳转到登陆页面(LoginPage)，登陆成功之后，进入个人中心页面(ProfilePage)，这个时候，个人中心页面有个返回按钮，我们点击返回按钮的时候回到主页面，主要的代码如下：

登陆页面代码如下：

Dart 复制代码 
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demos/route_manager/login/profile_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("登陆页面"),
      ),
      body: Center(
        child: ElevatedButton(onPressed: (){
          Get.to(()=>const ProfilePage());
        }, child: const Text("点击进入个人中心页面")),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

个人中心页面代码如下：

Dart 复制代码 
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demos/route_manager/normal_route_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("个人中心页面"),
      ),
      body: Center(
        child: ElevatedButton(onPressed: (){
          Get.off(const NormalRoutePage(title: "主页面"));
        }, child: const Text("返回主页面")),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
4.进入下一个界面并取消之前的所有路由

Get.offAll(NextScreen());

5.要导航到下一条路由，并在返回后立即接收或更新数据

假设当前页面是SecondPage,当我们跳转按钮之后跳转到ThirdPage,按钮的点击事件中我们使用下面的代码获取ThirdPage回传的值:

var data = await Get.to(const ThirdPage());

SecondPage页面代码如下：

Dart 复制代码 
import 'package:getx_demos/route_manager/login/third_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("回调传值"),
      ),
      body: Column(
        children: [
          Center(
            child: ElevatedButton(onPressed: () async {
              var data = await Get.to(const ThirdPage());
              debugPrint("下个页面回调值:$data");
              Get.to(()=>const ThirdPage());
            }, child: const Text("跳转Third页面")),
          ),
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

ThirdPage页面代码如下：

Dart 复制代码 
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Third"),
      ),
      body: Column(
        children: [
          const Text("第二个页面传过来的值:"),
          Center(
            child: ElevatedButton(onPressed: (){
              Get.back(result: "555555");
            }, child: const Text("返回主页面")),
          ),
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

2.别名路由导航

Get支持别名路由，使用别名路由的时候，我们需要在GetMaterialApp定义一下，假如我们有一个NextScreenPage页面，使用别名路由的时候，代码定义如下：

Dart 复制代码 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      initialRoute: "/",
      getPages: [
        GetPage(name: "/next_screen", page: ()=>const NextScreenPage()),
      ],
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
1.导航到下一个页面

Get.toNamed("/next_screen");

2.浏览并删除前一个页面

Get.offNamed("/next_screen");

3.浏览并删除所有以前的页面

Get.offAllNamed("/next_screen");

4.别名路由传值

Get.toNamed("/rename_main",arguments: "Getx route manager");

5.动态网页链接

Get提供高级动态URL，就像在Web上一样。

Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

第二个页面获取数据：

debugPrint("id = ${Get.parameters['id']} ");

debugPrint("device = ${Get.parameters['device']} ");

debugPrint("name = ${Get.parameters['name']} ");

3.中间件

如果你想通过监听Get事件来触发动作，你可以使用routingCallback来实现。

复制代码 
GetMaterialApp( routingCallback: (routing) { if(routing.current == '/second'){ openAds(); } } )

4.免context导航

如果你想通过监听Get事件来触发动作，你可以使用routingCallback来实现。

1.SnackBars

GetX创建一个SnackBars代码如下：

Get.snackbar('SnackBar', '我是SnackBar');

2.Dialogs

打开默认Dialogs：

Get.defaultDialog(

onConfirm: () => debugPrint("Ok"),

middleText: "我是Dialog"

);

3.BottomSheets

Get.bottomSheet类似于showModalBottomSheet，但不需要context：

Dart 复制代码 
Get.bottomSheet(
Wrap(
children: <Widget>[
ListTile(
leading: const Icon(Icons.music_note),
title: const Text('Music'),
onTap: () {}
),
ListTile(
leading: const Icon(Icons.videocam),
title: const Text('Video'),
onTap: () {},
),
],
)
);

5.嵌套导航

Get让Flutter的嵌套导航更加简单。 你不需要context，而是通过Id找到你的导航栈。

Navigator(

key: Get.nestedKey(1), // create a key by index

initialRoute: '/',

onGenerateRoute: (settings) {

if (settings.name == '/') {

return GetPageRoute(

page: () => Scaffold(

appBar: AppBar(

title: Text("Main"),

),

body: Center(

child: TextButton(

color: Colors.blue,

onPressed: () {

Get.toNamed('/second', id:1); // navigate by your nested route by index

},

child: Text("Go to second"),

),

),

),

);

} else if (settings.name == '/second') {

return GetPageRoute(

page: () => Center(

child: Scaffold(

appBar: AppBar(

title: Text("Main"),

),

body: Center(

child: Text("second")

),

),

),

);

}

}

),

四.文章中的完整demo

本文实例中的demo地址。

相关推荐
problc7 小时前
Flutter中文字体设置指南：打造个性化的应用体验
android·javascript·flutter
lqj_本人15 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人19 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效：Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
flutter·华为·harmonyos
hello world smile1 天前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解