Header

✍ 经典开场

倘若南风知我意,莫将晚霞落黄昏.

一、什么是Getx

GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。

GetX有三个基本原则：
1、 性能：GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。
2、效率：GetX语法简洁，保持了极高的性能，能极大地缩短开发时长。
3、结构：GetX可以将界面、路由、逻辑和依赖完全解耦，用起来更加清晰，代码更容易维护。

二、Flutter Getx 路由管理

GetX 为我们封装了 Navigation ，无需 context 可进行跳转，使用 GetX 进行路由跳转非常的简单， 只需要调用 Get.to() 即可进行路由跳转， GetX 路由跳转简化了跳转动画设置 、动画时长定义、动画 曲线设置。

2.1 Getx 路由跳转传值以及接受数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
路由配置
GgetPages: [
        ...
        GetPage(name: "/home", page: () => const ShopPage()),
        ...
],


跳转传值
Get.toNamed("/home",arguments: {
    "id":20
});

接受数据
print(Get.arguments);

三、状态管理

Get有两个不同的状态管理器：响应式状态管理器、简单的状态管理器. 其实可以和这个和Vuex理解差不多,这里不懂的就不多讲了,可以看一下 👉🏼 Vuex 这篇文章.

四、Flutter GetX 其他高级API

4.1 具体可参考官方文档

官方文档 

1
2
3
4
5
6
7
8
9
10
11
12
// 给出当前页面的args。
Get.arguments

// 提供当前上下文。
Get.context

// 在你的代码中的任何地方，在前台提供 snackbar/dialog/bottomsheet 的上下文。
Get.contextOverlay

//如果当前设备是平板电脑，则为真
context.isTablet()

五、GetView介绍 以及 GetxController生命周期

GetView 只是对已注册的 Controller 有一个名为 controller 的getter的 const Stateless 的
Widget，如果我们只有单个控制器作为依赖项，那我们就可以使用 GetView ，而不是使用
StatelessWidget ，并且避免了写 Get.Find() 。

5.1 GetView如何使用

第一步 定义一个CountController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import 'package:get/get.dart';
class CountController extends GetxController{
    var count = 0.obs;
    @override
    void onInit() {
        super.onInit();
        print("onInit");
    }
    @overridevoid onReady() {
          super.onReady();
          print("onReady");
    }
    @override
        void onClose() {
          print("onClose");
    }
    void inc(){
          count++;
          update(['first_count']);
    }
    void dec(){
          count--;
          update();
    }
}

第二步 继承GetView并使用状态管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../controller/count.dart';
class ShopPage extends GetView<CountController> {
    const ShopPage({super.key});
    @override
    Widget build(BuildContext context) {
        //如果第一次使用还需要put
        Get.put(CountController());
        return Scaffold(
            appBar: AppBar(
               title: const Text("shop"),
            ),
        body: Center(
            child: Column(
                children: [
                Obx(()=>Text("${controller.count}")),
                    ElevatedButton(onPressed: (){
                    controller.inc();
                    }, 
                    child: const Text("加1"))
                ],
            ),
            ),
        );
    }
}

六、Getx

GetX提供路由、主题、多语言、弹窗、状态管理、依赖注入、网络请求封装等等。 但实际上它的各个模块是独立的。对于开发的时候，可以用它的全家桶，也可以从中任取所需的模块到我们的应用中使用。 开发效率嘎嘎猛,下期文章:Getx实战

🧠 完美收官

Do nothing by halves.