Flutter學習-GetX-04 依賴注入

語言: CN / TW / HK

highlight: androidstudio

攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第6天,點選檢視活動詳情

本文主要介紹下GetX中幾種依賴注入的方式,可以通過初始化也可以通過懶載入

1. GetxController

  • 第一種

對於GetxController這個類通常會類似我們 iOS中的mvvmm模式中的viewModel,進行處理邏輯。我們也可以存放資料之後通過響應式進行包裹資料的widget更新

image.png

  • 第二種

或者說我們把這個資料拆分下,使用一些外掛進行建立比如GetX外掛一鍵初始化

image.png

會分成4個檔案,其中我們的方法和邏輯放在logic檔案,繼承GetxController ``` class DetailLogic extends GetxController { final DetailState state = DetailState();

@override void onReady() { // TODO: implement onReady super.onReady(); }

@override void onClose() { // TODO: implement onClose super.onClose(); }

add(){ state.count.value++; } } `state`則是存放我們的資料 class DetailState { var count = 0.obs;

DetailState() { ///Initialize variables } } `page `展示我們的頁面 class DetailPage extends StatefulWidget { @override _DetailPageState createState() => _DetailPageState(); }

class _DetailPageState extends State { final logic = Get.find(); final state = Get.find().state;

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("GetX"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx(() => Text('value -> ${state.count.value}')) , ElevatedButton( onPressed: ()=> logic.add(), child: const Text('add'), ), ], ), ), ); }

@override void dispose() { Get.delete(); super.dispose(); } } `Bindings`,通過懶載入的方式初始化`Logic`,也就是`GetxController` class DetailsBinding extends Bindings { @override void dependencies() { Get.lazyPut(() => DetailsLogic()); } } `` 這2種方式來說,各有利弊,比如我們自己一些簡單的頁面或者邏輯,引數不是很多,就可以自己建立因為本身邏輯就比較清楚。第二種使用外掛的方式相當於把邏輯和資料拆分`了,對於引數資料比較多,可以進行拆分這樣會清晰點,避免過於臃腫。

2. GetPut

  • Get.put

因為我們使用Gex進行路由管理的時候,在同一個堆疊中我們可以通過page和control聯絡

比如我們頁面中初始化通過Get.put進行初始化我們的controller final controller = Get.put<GetXHomeController>(GetXHomeController()); 我們在push下個頁面中也可以獲取 - Get.find ``` class NextPage extends StatelessWidget { NextPage({Key? key}) : super(key: key);

final controller = Get.find(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("nextPage"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx(() => Text('value -> ${controller.count}')) , ElevatedButton( onPressed: ()=> controller.add(), child: const Text('add'), ), ], ), ), ); } } ```

image.png

我們controller中的count獲取到,同時點選也對上個頁面重新整理,相當於2個頁面共用一個controller

image.png

3. 懶載入

通常的話我們會在初始化的時候新增繫結關係 GetPage(name: AppRoutes.getXHome, page: () => GetxHomePage(),binding: BindingsBuilder(() => Get.lazyPut(() => GetXHomeController()))), 你也可以建立一個類 class DetailBinding extends Bindings { @override void dependencies() { Get.lazyPut(() => DetailLogic()); } }

載入的時候 Get.to(DetailPage(),binding: DetailBinding()), 這樣的話多了一個類,方便的話可以直接按上面的方式

  • 獲取 獲取的方式也是通過find或者我們繼承GetView這樣少寫一步獲取 ``` class NextPage extends GetView { const NextPage({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("nextPage"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx(() => Text('value -> ${controller.count}')) , ElevatedButton( onPressed: ()=> controller.add(), child: const Text('add'), ), ], ), ), ); } } `GetView`相當於幫我們獲取了 abstract class GetView extends StatelessWidget { const GetView({Key? key}) : super(key: key);

final String? tag = null;

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

@override Widget build(BuildContext context); } ```

4. 小結

依賴注入通常我們通常可以採用懶載入的方式binding我們的GetXContrller,當然我們也可以在頁面初始化的時候通過Get.put進行初始化。對於繼承GetViewWidget則不需要我們手動通過Get.find獲取。