Getx狀態管理
宣告式的介面開發就是如今的潮流，不管你喜不喜歡這樣的編碼方式，React、Flutter、Android Jetpack Compose等都是使用宣告式編寫的。使用宣告式編寫的UI介面就是應用的當前狀態,對於應用來說時時刻刻知道當前狀態很重要，所以狀態管理也就至關重要；
相比於Provider、flutter_bloc狀態管理框架，突破InheritedWidget的限制需要依賴於BuildContext，在沒有BuildContext的情況下無法使用；
GetX的官方計數器示例
先看下程式碼
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() => runApp(GetMaterialApp(home: HomePage()));
class CounterController extends GetxController{
var count = 0.obs;
increment() => count++;
@override
void onInit() {
super.onInit();
print("init-----");
}
@override
void onReady() {
super.onReady();
print("----onready");
}
@override
void onClose() {
super.onClose();
print("----onClose");
}
}
class HomePage extends StatelessWidget {
@override
Widget build(context) {
// 使用Get.put()例項化你的類，使其對當下的所有子路由可用。
final CounterController c = Get.put(Controller());
return Scaffold(
// 使用Obx(()=>每當改變計數時，就更新Text()。
appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),
// 用一個簡單的Get.to()即可代替Navigator.push那8行，無需上下文！
body: Center(child: ElevatedButton(
child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
floatingActionButton:
FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
}
}
class Other extends StatelessWidget {
// 你可以讓Get找到一個正在被其他頁面使用的Controller，並將它返回給你。
final Controller c = Get.find();
@override
Widget build(context){
// 訪問更新後的計數變數
return Scaffold(body: Center(child: Text("${c.count}")));
}
}
複製程式碼這是一個簡單的專案，但它已經讓人明白Get的強大。心裡絕對有疑問？？？怎麼做這麼簡單的狀態管理的，通過原始碼分析解決心中的疑問；
GetX 狀態管理、依賴管理分析
-
狀態管理
要想讓一個資料變成可觀察，你只需要在它的末尾加上".obs"
var count = 0.obs;
複製程式碼-
依賴管理
Get有一個簡單而強大的依賴管理器，它允許你只用1行程式碼就能檢索到與你的Bloc或Controller相同的類，無需Provider上下文，無需 inheritedWidget。
final Controller c = Get.put(Controller());
複製程式碼-
依賴管理資料怎麼儲存
通過debug斷點CounterController的onInit方法檢視呼叫棧
呼叫棧可以看到CounterController資料存到了GetInstance全域性單例中，所以與flutter_bloc provider狀態管理資料存放到了InheritedWidget中不同，Getx把資料存到了全域性單例中，不依賴於UI，將業務邏輯與介面分離，低耦合，更靈活；
Obx widget怎麼響應資料變化的
/// Obx widget 只用這個地方使用到了可觀察的count；
Obx(() => Text("Clicks: ${c.count}"))
/// 檢視count的value;這裡的是RxInt型別，c.count.value 簡寫 c.count;這裡面設定了監聽
/// Returns the current [value]
T get value {
if (RxInterface.proxy != null) {
RxInterface.proxy.addListener(subject);
}
return _value;
}
複製程式碼繼續檢視Obx widget的原始碼
class Obx extends ObxWidget {
final WidgetCallback builder;
const Obx(this.builder);
@override
Widget build() => builder();
}
abstract class ObxWidget extends StatefulWidget {
const ObxWidget({Key key}) : super(key: key);
@override
_ObxState createState() => _ObxState();
@protected
Widget build();
}
class _ObxState extends State<ObxWidget> {
RxInterface _observer;
StreamSubscription subs;
_ObxState() {
_observer = RxNotifier();
}
@override
void initState() {
/// 設定widget重新整理監聽，資料改變後呼叫_updateTree
subs = _observer.listen(_updateTree);
super.initState();
}
void _updateTree(_) {
if (mounted) {
setState(() {});
}
}
@override
void dispose() {
subs.cancel();
_observer.close();
super.dispose();
}
Widget get notifyChilds {
/// 這裡可以看到我們設定Rx資料value時候的用到的RxInterface.proxy
final observer = RxInterface.proxy;
/// 將_observer賦值給RxInterface.proxy
RxInterface.proxy = _observer;
/// 再呼叫widget.build()，繼而呼叫builder()，執行到回撥builder時候這個時候
/// RxInterface.proxy != null 資料的更新推動UI的更新建立了關係
final result = widget.build();
if (!_observer.canUpdate) {
throw """
[Get] the improper use of a GetX has been detected.
You should only use GetX or Obx for the specific widget that will be updated.
If you are seeing this error, you probably did not insert any observable variables into GetX/Obx
or insert them outside the scope that GetX considers suitable for an update
(example: GetX => HeavyWidget => variableObservable).
If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.
""";
}
/// 還原RxInterface.proxy的值
RxInterface.proxy = observer;
return result;
}
@override
Widget build(BuildContext context) => notifyChilds;
}
複製程式碼-
資料更新響應流程
/// 再來看獲取資料
T get value {
/// Obx在build的時候RxInterface.proxy != null RxInterface.proxy= RxNotifier();
if (RxInterface.proxy != null) {
RxInterface.proxy.addListener(subject);
}
return _value;
}
/// RxNotifier.addListener() 會呼叫 mixin NotifyManager<T>中addListener的方法
void addListener(GetStream<T> rxGetx) {
if (!_subscriptions.containsKey(rxGetx)) {
/// 這個rxGetx就是Rx響應資料中 GetStream<T> subject = GetStream<T>();
final subs = rxGetx.listen(subject.add);
final listSubscriptions =
_subscriptions[rxGetx] ??= <StreamSubscription>[];
listSubscriptions.add(subs);
}
}
/// Rx響應資料中 GetStream<T> subject設定listen()的回撥是RxNotifier中subject的add方法
void add(T event) {
assert(!isClosed, 'You cannot add event to closed Stream');
_value = event;
_notifyData(event);
}
/// 設定資料響應
set value(T val) {
if (_value == val && !firstRebuild) return;
firstRebuild = false;
_value = val;
/// GetStream<T> subject = GetStream<T>();
subject.add(_value);
}
/// 檢視 subject.add(_value)方法
void add(T event) {
assert(!isClosed, 'You cannot add event to closed Stream');
_value = event;
_notifyData(event);
}
/// 遍歷_onData 執行每個訂閱資料的_data回撥 RxNotifier中subject的add方法
/// RxNotifier中subject的add方法繼續遍歷每個訂閱物件的_data回撥就是_updateTree回撥
void _notifyData(T data) {
_isBusy = true;
for (final item in _onData) {
if (!item.isPaused) {
item._data?.call(data);
}
}
_isBusy = false;
}
複製程式碼-
UI重新整理訂閱流程
/// 上面ObxWidget原始碼的設定UI更新
@override
void initState() {
subs = _observer.listen(_updateTree);
super.initState();
}
/// _observer.listen(_updateTree); 會呼叫 mixin NotifyManager<T>中listen方法
/// subject GetStream型別
StreamSubscription<T> listen(
void Function(T) onData, {
Function onError,
void Function() onDone,
bool cancelOnError = false,
}) =>
subject.listen(onData,
onError: onError, onDone: onDone, cancelOnError: cancelOnError);
///最後UI重新整理監聽訂閱新增到List<LightSubscription<T>> _onData = <LightSubscription<T>>[];
FutureOr<void> addSubscription(LightSubscription<T> subs) async {
if (!_isBusy) {
return _onData.add(subs);
} else {
await Future.delayed(Duration.zero);
return _onData.add(subs);
}
}
複製程式碼斷點檢視當資料更改的時候先遍歷_onData的訂閱_data回撥，RxNotifier中subject的add方法
RxNotifier中subject的add方法繼續觸發遍歷_onData的訂閱_data回撥 _updateTree()方法；
Getx功能很多，更多檢視官方文件，github網速限制可以檢視碼雲gitee