Flutter狀態管理--Getx學習2

小小糖糖發表於2021-04-02
Flutter

Getx狀態管理

最近學習了Getx,嘗試使用Getx搭建Flutter專案架構，感覺真好用、真香；Getx天然的可以將介面、邏輯、依賴和路由完全解耦，用起來更清爽，邏輯更清晰，程式碼容易維護；

學習一個框架不單單看看文件怎麼使用，更重要的是看原始碼學習作者的整個設計思路、設計模式等來解決心中的疑惑；

Flutter狀態管理--Getx學習1--Obx,分析了Obx怎麼通過資料改變自動UI的重新整理的，熟悉了整個設計流程，下面Getx中提供的widget就很簡單了;

GetView

abstract class GetView<T> extends StatelessWidget {
  const GetView({Key key}) : super(key: key);

  final String tag = null;

  T get controller => GetInstance().find<T>(tag: tag);

  @override
  Widget build(BuildContext context);
}
複製程式碼

Stateless的Widget，很簡單，很有用

  • 前提是controller已註冊了；
  • 使用命名路由binging依賴注入後的路由，直接繼承GetView
  • 已經確定依賴已經初始化完成的，需要使用controller的widget

例如

 /// 命名路由
 GetPage(
      name: AppRoutes.SPLASH,
      page: () => SplashPage(),
      binding: BindingsBuilder.put(() => Get.put(SplashController())),
    ),
  /// 閃屏介面
 class SplashPage extends GetView<SplashController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Image.asset(
      R.LOGO_SPLASH_ID,
      width: double.infinity,
      height: double.infinity,
      fit: BoxFit.cover,
    ));
  }
}   
    
複製程式碼

GetBuilder

  • GetBuilder相比Obx,GetBuilder是手動的狀態管理器，需要更改的時候主動需要呼叫update(）；
  • 因為GetBuilder是手動的狀態管理器，所以相比Obx，內部沒有維護StreamSubscription，記憶體消耗就會少

GetBuilder 原始碼還是很好理解的，點進去看下，就簡單介紹下怎麼使用

  /// 必創引數，回撥返回子widget
  final GetControllerBuilder<T> builder;
  /// 預設是true; 如果Controller已經註冊，如果是已懶載入的方式註冊的,GetBuilder移除的時候刪除 
  /// 刪除controller,如果沒有註冊呼叫init初始化，GetBuilder移除的時候刪除也刪除controller
  /// 設定false,呼叫init初始化，GetBuilder移除的時候刪除也刪除controller
  final bool global;
  /// 這個id很有用，如果同一個controller,被多個GetBuilder關聯，當需要賽選其中一個重新整理時候
  /// 呼叫 update(['id']);
  final Object id;
  /// 同一個型別有多個不同的例項時，tag區分；唯一
  final String tag;
  /// 預設true,時候自動回收controller
  final bool autoRemove;
  /// 預設false 控制當GetBuilder移除的時候是否刪除記憶體中的controller
  final bool assignId;
  /// 過濾器，控制重新整理時機
  final Object Function(T value) filter;
  /// 對應state生命週期的回撥
  final void Function(State state) initState, dispose, didChangeDependencies;
  final void Function(GetBuilder oldWidget, State state) didUpdateWidget;
  /// 當controller沒有註冊的時候，初始化
  final T init;
複製程式碼

GetX

  • Getx相比GetBuilder實現了自動響應資料變化，
  • Getx相比Obx,內部可以初始化controller，以及state生命週期的回撥，controller時候及時回收等；
  • Getx相比GetBuilder、Obx效率要低，

MixinBuilder

  • 看名字就知道融合Obx、GetBuilder功能
  • 既可以手動控制重新整理，也可以自動重新整理；
  • 記憶體消耗最多的，效率最低的

Getx還提供很多區域性重新整理的weidget ValueBuilder 、ObxValue等，都很簡單，

這裡有個很實用的技巧,例如

ObxValue((data) => Switch(
        value: data.value,
        onChanged: data, // Rx 有一個 _callable_函式! 你可以使用 (flag) => data.value = flag,
    ),
    false.obs,
),
  /// 響應資料data,data();會呼叫call()方法，自動賦值，自動重新整理
  T call([T v]) {
    if (v != null) {
      value = v;
    }
    return value;
  }
複製程式碼

相關文章