Flutter开发神器 — getX 介绍-京东云开发者社区

### 1 前言

笔者在浏览技术文章时，发现了一个Flutter开发开源框架 —— getX，了解后发现可以极大简化Flutter的开发，提高Flutter开发的效率，堪称Flutter开发神器。于是，在项目中进行了使用和实践，感觉确实不错。这里做一个简单的介绍。

### 2 简介

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

1)getX 有3个基本原则：

- 性能： getX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。
- 效率： getX 的语法非常简捷，简单易用。并保持了极高的性能，能极大缩短你的开发时长。
- 结构： getX 可以将界面、逻辑、依赖和路由完全解耦，用起来更清爽，逻辑更清晰，代码更容易维护。

2)getX 并不臃肿，却很轻量。

如果你只使用状态管理，只有状态管理模块会被编译，其他没用到的东西都不会被编译到你的代码中。它拥有众多的功能，但这些功能都在独立的容器中，只有在使用后才会启动。

### 3 功能

getX提供了哪些功能呢？可以看下面官方提供的这张图：

![](//img1.jcloudcs.com/developer.jdcloud.com/34b831ee-bd4c-4019-848d-0c8c69d447f420220314143654.png)

- 路由管理：路由导航，且不依赖Context；
- 统一封装：封装了Toast、Dialog和底部弹窗，一行代码搞定，且不依赖Context；
- 状态管理：完全不逊色Provider，甚至比Provider更优的状态管理
- 依赖管理：跨页面交互：各个页面间全局的数据和状态传递；
- 存储管理：完全通过Dart语言实现的SharePreference，有了它，你不再需要任何其他SharePreference的第三方插件包
- 国际化：更方便实现国际化（18in1）；
- 主题管理：更容易的Theme替换
- Utils包：封装好的Utils包

当然，getX提供的功能不仅仅是以上8个方面，还有其他的功能，大家可以查看官方文档了解更多。

### 4 为什么选择 GetX 做状态管理？

我们知道，Flutter开发的核心是状态管理。从最原始的通过StatefulWidget+setState进行管理，到后来的Bloc，再到现在流行的Provider，笔者都经历过。

通过StatefulWidget+setState 和 Bloc 进行Flutter开发比较繁琐。直到Provider框架的出现，这种情况才有所改观。Provider确实是一款优秀的Flutter开发开源框架。但也存在一定的局限性。

Provider核心原理，就是采用了InheritedWidget的刷新机制 + ChangeNotifier 实现的

开发者一直致力于业务逻辑分离的概念， BLoc 、Provider 都是衍生的 MVC、MVVM 等架构模式，但是这几种方案的状态管理均使用了上下文（context），需要上下文来寻找InheritedWidget，这种解决方案限制了状态管理必须在父子代的 widget 树中，业务逻辑也会对 View 产生较强依赖。

而 GetX 因为不需要上下文，突破了InheritedWidget的限制，我们可以在全局和模块间共享状态，这正是 BLoc 、Provider 等框架的短板。

当然，状态管理只是GetX提供的最主要能力之一，其提供的功能远不止这些。你也可以很方便的在使用Provider的项目中引入GetX。Flutter开发的核心是状态管理，使用GetX后你会发现相较于之前的框架比如Provider更加灵活，效率更高。项目中可以和provider同时使用。

### 5 使用

getX使用非常简单，只需要几步就能将GetX使用到你的项目中，而且可以说是非浸入性的，笔者已在项目中实现，确实很方便快捷。

下面，按照国际惯例，实现一个计数器的例子 —— Flutter界的 “Hello World”
Flutter默认创建的 "计数器 "项目有100多行（含注释），而通过getX实现这一切只需 26 行代码（含注释）

#### 5.1 引入 getX

```yaml
dependencies:
  get:
```

在需要用到的文件中导入：

```java
import 'package:get/get.dart';
```

#### 5.2 在你的项目中的MaterialApp改成GetMaterialApp

```java
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//将MaterialApp变成GetMaterialApp。
    return GetMaterialApp(
      home: Scaffold(
      ),
    );
  }
}
```

至此，getX就引入到项目中了，现在就可以使用getX提供的功能了。下面我们编写具体的页面和逻辑代码。

#### 5.3 编写业务逻辑类

类似于Provider框架开发里的View Model。你可以将所有的变量和方法放在这个类里，实现自己的业务逻辑

```java
import 'package:get/get.dart';

class CountVM extends GetxController{
  var count = 0.obs; //使用".obs "使任何变量成为可观察的。
  increment() => count++;
}
```

编写我们自己的业务逻辑类，只需要继承 GetxController，在这个类里：

1. 定义了一个变量：count，使用了一个简单的".obs "使该变量变的可观察。你可以使用".obs "使任何变量成为可观察的。
1. 定义了一个方法：让计数器自增；

#### 5.4 编写页面

```java
class GetXHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用Get.put()实例化你的类，使其对当下的所有子路由可用。
    final CountVM vm = Get.put(CountVM());
    var testStr = 'testStr';
    var str = Get.put(testStr); //页面间参数访问

return Scaffold(

// 使用Obx(()=>每当改变计数时，就更新Text()。
        appBar: AppBar(title: Obx(() => Text("Clicks: ${vm.count}"))),

// 用一个简单的Get.to()即可代替Navigator.push那8行，且不需要Context
        body: Center(
            child: ElevatedButton(
                child: Text("Go to Second Page"),
                onPressed: () => Get.to(SecondPage()))),
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add), onPressed: vm.increment));
  }
}

//第二个页面，用于示例页面路由和参数传递
class SecondPage extends StatelessWidget {
  // 你可以让Get找到一个正在被其他页面使用的VM，并将它返回给你。
  final CountVM vm = Get.find();
  final String str = Get.find(); //页面间参数访问

@override
  Widget build(BuildContext context) {
    // 访问更新后的计数变量
    return Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() => Text("${vm.count}")),
            Text(str),//通过Get.find(）获取上个页面的数据；方便简洁
          ],
        ),
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add), onPressed: vm.increment));
  }
}
```

至此，页面编写完成，功能也实现了，是不是很简单？是不是感受到了getX的强大。随着项目的发展，代码和功能变得越来越多，业务逻辑变得越来越复杂，getX的优势将变的更加明显

对于页面编写：

1）页面继承自StatelessWidget：使用getX后，编写界面将不再需要StatefulWidget，可以一律继承自StatelessWidget节省一些内存

2）使用Get.put()实例化你的类，在当前页面可以直接使用，而对当下的所有子路由也可用：通过如下代码获取：

```java
// 使用Get.put()实例化你的类，在当前页面可以直接使用
final CountVM vm = Get.put(CountVM());

//在其他页面直接获取，实现路由间传参
  // 你可以让Get找到一个正在被其他页面使用的VM，并将它返回给你。
//类似于Provider里的Provider.of<XXXViewModel>(context, listen: false);
//但是，比Provider.of功能更强大、更灵活，且event_bus插件将不需要
  final CountVM vm = Get.find();
  final String str = Get.find();
```

getX提供了Get.put 和 Get.find 在页面间实现路由间传参，你可以让Get找到一个正在被其他页面使用的VM，并将它返回给你。类似于Provider里的Provider.of<XXXViewModel>(context, listen: false);
但是，比Provider.of功能更强大、更灵活，且event_bus插件将不在需要。

3）而对于关键的状态管理和页面刷新：

```java
//要想让它变得可观察，你只需要在它的末尾加上".obs"。
 var count = 0.obs;

//而在UI中，当你想显示该值并在值变化时更新页面，只需这样做。
 // 使用Obx(()=>每当改变计数时，就更新Text()。
 appBar: AppBar(title: Obx(() => Text("Clicks: ${vm.count}"))),
```

4）而对于路由管理，只需要：

```java
// 用一个简单的Get.to()即可代替Navigator.push那8行，且不要关心Context！
Get.to(OtherPage())
```

#### 5.5 小结

上面的例子getX给我们实现的功能有：

- 简洁的状态管理；
- 简洁的路由：在不同页面之间切换；
- 在不同页面之间共享状态和传递参数；
- 将业务逻辑与界面分离；

### 6 其他高级API

```java
//打开Dialogs：
Get.dialog(YourDialogWidget());

//打开默认Dialogs：
Get.defaultDialog(
  onConfirm: () => print("Ok"),
  middleText: "Dialog made in 3 lines of code"
);

//Get.bottomSheet类似于showModalBottomSheet，但不需要context：
Get.bottomSheet(
  Container(
    child: Wrap(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.music_note),
          title: Text('Music'),
          onTap: () {}
        ),
        ListTile(
          leading: Icon(Icons.videocam),
          title: Text('Video'),
          onTap: () {},
        ),
      ],
    ),
  )
);

// 给出当前页面的args。
Get.arguments

//给出以前的路由名称
Get.previousRoute

// 给出要访问的原始路由，例如，rawRoute.isFirst()
Get.rawRoute

// 允许从GetObserver访问Rounting API。
Get.routing

// 检查 snackbar 是否打开
Get.isSnackbarOpen

// 检查 dialog 是否打开
Get.isDialogOpen

// 检查 bottomsheet 是否打开
Get.isBottomSheetOpen

// 删除一个路由。
Get.removeRoute()

//反复返回，直到表达式返回真。
Get.until()

// 相当于.MediaQuery.of(context).size.height,
//但不可改变。
Get.height
Get.width

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

//检查num a是否低于num b。
isLowerThan(num a, num b) → bool

//检查字符串是否为MD5哈希。
isMD5(String s) → bool

//检查数据是否为空。
isNull(dynamic value) → bool

//检查数据是否为null或空（空或仅包含空格）。
isNullOrBlank(dynamic value) → bool?

//检查字符串是int还是double。
isNum(String value) → bool
```

以上是getX提供给我们使用的一些其他的API，这仅仅只是很少的一部分。

### 7 辅助开发插件

通过Get CLI，无论是在服务器上还是在前端，整个开发过程都可以完全自动化。此外，为了进一步提高您的生产效率，还有一些插件：

- getx_template：一键生成每个页面必需的文件夹、文件、模板代码等等
- Android Studio/Intellij插件 
- GetX Snippets：输入少量字母，自动提示选择后，可生成常用的模板代码
- Android Studio/Intellij：扩展VSCode扩展

### 8 总结

笔者在项目中已引入和使用了getX，确实感受到了getX的强大，极大的简化了Flutter的开发，提高了开发效率：

- 轻量级的Flutter开发框架，不仅仅提供状态管理解决方案；
- 方便易用，可以和其他状态框架共用；
- 模块化编译实现，只有用的模块才会被编译到你的代码中；
- 可选灵活的插件实现模块代码，方便开发；
- 性能优势；
- 极大简化代码，提高开发效率；

这遍文章抛砖引玉对GetX做了一个简单的介绍，后续会对GetX的原理进行研究和介绍。大家感兴趣可以查看官方文档学习。

### 9 官方地址

- https://github.com/jonataslaw/getx
- https://pub.dev/packages/get

------------

###### 自猿其说Tech-JDL京东物流技术与数据智能部
###### 作者：熊进