使用GetX构建更优雅的 Flutter 页面结构

前言

App 的大部分页面都会涉及到数据加载、错误、无数据和正常几个状态，在一开始的时候我们可能数据获取的状态枚举用 if...else 或者 switch 来显示不同的 Widget，这种方式会显得代码很丑陋，譬如下面这样的代码：

if (PersonalController.to.loadingStatus == LoadingStatus.loading) {
  return Center(
    child: Text('加载中...'),
  );
}
if (PersonalController.to.loadingStatus == LoadingStatus.failed) {
  return Center(
    child: Text('请求失败'),
  );
}
// 正常状态
PersonalEntity personalProfile = PersonalController.to.personalProfile;
return Stack(
  ...
);

这种情况实在是不够优雅，在 GetX 中提供了一种 StateMixin 的方式来解决这个问题。

StateMixin

StateMixin 是 GetX 定义的一个 mixin，可以在状态数据中混入页面数据加载状态，包括了如下状态：

• RxStatus.loading()：加载中；
• RxStatus.success()：加载成功；