Flutter 状态管理之GetX库

Flutter 状态管理之GetX

• 前言
• 正文
  • 一、创建项目
  • 二、状态组件
  • 三、状态更新UI
  • 四、GetX库
    • ① 添加依赖
    • ② 局部刷新
    • ③ 全局刷新
  • 五、源码

前言

Flutter使用的是声明式UI，是通过状态去更新UI组件的，因此我们首先就要学习状态的使用。同样为了简化原本的状态使用，我们会使用Getx库。

正文

一、创建项目

首先我们创建项目，Flie → New → New Flutter Project...

然后选择Flutter，这里可以看到Flutter SDK path，已经配置好了，点击Next。

输入工程名为study_state，目前我们只考虑Android和iOS两个平台，因此其他的就不勾选了。

点击Create按钮，完成项目的创建。创建后我们可以看到main.dart，这里是flutter启动文件。

二、状态组件

在Flutter中，有两种类型的小部件：

1. StatelessWidget（无状态小部件）：适用于静态内容
2. StatefulWidget（有状态小部件）：适用于需要跟踪状态变化的场景

三、状态更新UI

通过setState()方法可以触发UI更新，这是Flutter基础的状态管理方式。对于简单的应用场景完全够用，但随着应用复杂度提升，建议使用更专业的状态管理方案。

四、GetX库

GetX是一个轻量且强大的Flutter状态管理库，提供了简单高效的状态管理方案。对于iOS开发者来说，在完成Flutter开发后，可以使用AppUploader来简化应用上传到App Store的流程。

① 添加依赖

在pubspec.yaml中添加GetX依赖：

dependencies:
  get: ^4.6.6

② 局部刷新

使用.obs创建可观察对象，配合Obx()可以实现局部刷新，性能更优：

RxString test = "study state".obs;
Obx(() => Text(test.value));

③ 全局刷新

使用GetBuilder配合update()方法实现全局刷新：

GetBuilder<HomeController>(
  init: HomeController(),
  builder: (controller) {
    return Text(controller.test);
  }
)

五、源码

完整的示例代码可以在GitHub上找到。对于需要发布到App Store的iOS应用，可以使用AppUploader来简化证书管理和上传流程，它提供了可视化的操作界面，大大降低了开发者上传应用的难度。

通过本文我们学习了Flutter基础的状态管理方式，以及如何使用GetX库来简化状态管理。在实际项目开发中，合理选择状态管理方案可以显著提高开发效率和代码可维护性。