Getx框架详解

✍ 经典开场

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

一、什么是Getx

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

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

二、Flutter Getx 路由管理

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

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

路由配置
GgetPages: [
        ...
        GetPage(name: "/home", page: () => const ShopPage()),
        ...
],


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

接受数据
print(Get.arguments);

三、状态管理

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

四、Flutter GetX 其他高级API

4.1 具体可参考官方文档

官方文档

// 给出当前页面的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

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并使用状态管理

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.