前言
GetX 為狀態(tài)管理提供了兩種方式担敌，一種是簡(jiǎn)單的方式，使用 GetBuilder 形式實(shí)現(xiàn)堪夭，另一種方式是響應(yīng)式狀態(tài)管理咏删。簡(jiǎn)單的方式十分輕量和簡(jiǎn)單惹想，而且無(wú)需使用 ChangeNotifier。對(duì)于初學(xué)者來(lái)說(shuō)督函，通過(guò)這種方式了解GetX 的狀態(tài)管理會(huì)更容易入手嘀粱，而且就算是大型應(yīng)用這種方式也是 OK 的。本篇以最簡(jiǎn)單的計(jì)數(shù)器來(lái)講解 GetX 的簡(jiǎn)單狀態(tài)管理
狀態(tài)類
狀態(tài)類在 GetX 中稱之為 Controller辰狡，需要繼承GetxController锋叨，當(dāng)狀態(tài)發(fā)生改變的時(shí)候，調(diào)用update 方法即可通知依賴狀態(tài)的組件進(jìn)行刷新宛篇。在 VSCode 中安裝好 GetX Snippets 插件娃磺，我們使用 getcontroller 指令就可以快速輸入狀態(tài)模板代碼。我們的最簡(jiǎn)單的計(jì)數(shù)器狀態(tài)代碼如下所示：
class CounterController extends GetxController {
int _counter = 0;
get counter => _counter;
void increment() {
_counter++;
update();
}
}
視圖界面
界面層在需要使用狀態(tài)的地方使用 GetBuilder 包裹叫倍，然后就可以使用 Controller 訪問(wèn)狀態(tài)對(duì)象和操作狀態(tài)方法了偷卧。其中GetBuilder只需要兩個(gè)參數(shù)：
-
init：初始狀態(tài)對(duì)象，在這里可以完成狀態(tài)對(duì)象的初始化吆倦。 -
builder方法：這個(gè)方法用于構(gòu)建依賴狀態(tài)的組件樹听诸，方法攜帶狀態(tài)對(duì)象參數(shù)，因此下面的組件可以訪問(wèn)到狀態(tài)對(duì)象蚕泽。而且一旦狀態(tài)對(duì)象通過(guò)update方法通知有更新時(shí)晌梨，依賴狀態(tài)對(duì)象的組件就會(huì)被刷新。
計(jì)數(shù)器的視圖界面的 build 代碼如下须妻，可以看到整個(gè)使用十分簡(jiǎn)潔仔蝌。
Widget build(BuildContext context) {
return GetBuilder<CounterController>(
init: CounterController(),
builder: (controller) => Scaffold(
appBar: AppBar(
title: Text('GetX計(jì)數(shù)器'),
),
body: Center(
child: Text(
'${controller.counter}',
style: TextStyle(
color: Colors.blue,
fontSize: 24.0,
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
controller.increment();
},
),
),
);
}
深入優(yōu)化
上面的這種方式有個(gè)缺點(diǎn)，那就是GetBuilder包裹了整個(gè) Scaffold 荒吏，如果 Scaffold 的組件樹很大會(huì)導(dǎo)致性能問(wèn)題敛惊。我們應(yīng)該只包裹依賴狀態(tài)對(duì)象的組件。但對(duì)于這個(gè)例子來(lái)說(shuō)司倚，F(xiàn)loatingActionButton和 Text 并不在一個(gè)層級(jí)上豆混，對(duì)于這種情況，GetX 提供了一種共享狀態(tài)的方法动知。在狀態(tài)類中實(shí)現(xiàn)一個(gè)靜態(tài)的 Get.find()別名方法即可皿伺。
static CounterController get to => Get.find();
有了這個(gè)方法后，只要狀態(tài)對(duì)象注冊(cè)一次之后盒粮，就可以在任何地方使用CounterController.to訪問(wèn)到了⊥遗福現(xiàn)在，我們改造后的計(jì)數(shù)器界面代碼就可以最小化狀態(tài)對(duì)象的依賴了丹皱。
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GetX計(jì)數(shù)器'),
),
body: Center(
child: GetBuilder<CounterController>(
init: CounterController(),
builder: (_) => Text(
'${CounterController.to.counter}',
style: TextStyle(
color: Colors.blue,
fontSize: 24.0,
),
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
CounterController.to.increment();
},
),
);
總結(jié)
本篇我們介紹了GetX 的簡(jiǎn)單狀態(tài)管理 GetBuilder 和狀態(tài)類的構(gòu)建妒穴，這種方式借助 GetX Snippets插件后，編碼的工作并不多摊崭，這也是GetX 生產(chǎn)力的體現(xiàn)（看到這個(gè)是不是馬上入迷讼油，想拋棄其他狀態(tài)管理插件，直接選用 GetX呢簸？）矮台。我們還介紹了如何進(jìn)行狀態(tài)共享和最小化 GetBuilder 的作用范圍，從而減少不必要的組件刷新根时，提高性能瘦赫。下一篇我們介紹這種方式和網(wǎng)絡(luò)請(qǐng)求結(jié)合，看看有網(wǎng)絡(luò)請(qǐng)求（異步操作的時(shí)候怎么完成狀態(tài)更新）蛤迎。
