了解 GetState

? 為什么做GetState

Flutter 狀態(tài)管理方案百花齊放, 從 ScopeModel 到 Provide、MobX, 再到 BLoC、Redux、Provider. 特別是BLoC和Provider，已經(jīng)有了大量的用戶，但是我在實(shí)際使用的時候，發(fā)現(xiàn)了這樣幾個問題：

使用不便，需要手動編寫大量的樣板代碼，狀態(tài)都需要手動注冊
業(yè)務(wù)邏輯與UI表現(xiàn)邏輯, 甚至直接與UI耦合。
面對大型項(xiàng)目無法清晰的為各層次劃清界限, 單元測試代碼編寫繁瑣。

面對這些問題，GetState應(yīng)運(yùn)而生

自動注冊狀態(tài): 解放雙手, 保護(hù)頭發(fā)
極致的速度: GetState提供時間復(fù)雜度為O(1)的訪問性能, 暴打一眾O(N)的狀態(tài)管理方案
便于單元測試: 業(yè)務(wù)邏輯與UI代碼解耦, 媽媽再也不用擔(dān)心我的單元測試了, 保護(hù)頭發(fā)*2
狀態(tài)時光機(jī): 使用Recorder, 在過去與現(xiàn)在之間穿梭
使用靈活: 既支持Provider使用的mutable狀態(tài)，也支持BLoC,Redux使用的immutable狀態(tài)
強(qiáng)大的兼容性: 如果你已經(jīng)使用了Provider, Redux, BLoC等狀態(tài)管理方案, 那么切換到GetState, 你并不需要移除已有的狀態(tài)管理代碼, GetState可以與現(xiàn)有的狀態(tài)管理方案共存.

GetState : 致力于解決Flutter應(yīng)用UI與業(yè)務(wù)邏輯解耦問題的MVVM狀態(tài)管理方案

進(jìn)入正題

?? 先放上 Pub 以及項(xiàng)目地址

歡迎Star, PR, issue ??

前三個Demo分別介紹ViewModel,View和Model,心急的可以直接跳過, 或者配合教程3閱讀Demo3

以下是教程中的Demo源碼

?? 了解原理 ViewModel的作用: ViewModel登場.dart
?? 包裝一個View: 帶上View.dart
?? 自定義 Model: M, V, VM一家要整整齊齊.dart
?? 司機(jī)上路: 半自動注冊狀態(tài)與跨頁狀態(tài)修改.dart

??了解GetState原理 - ViewModel的作用 (Demo0)

按照Flutter的慣例, 第一個Demo當(dāng)然是選擇經(jīng)典的CounterApp了

?? 不推薦本例中的寫法, Demo僅供了解GetState原理

0-確保配置yaml配置正確

dependencies:
  flutter:
    sdk: flutter
  ## 引入get_state
  get_state: <這里填寫版本號>

1-編寫viewmodel類-countervm

ViewModel負(fù)責(zé)簡單的業(yè)務(wù)邏輯和操作視圖

?? 猜一猜復(fù)雜的業(yè)務(wù)邏輯應(yīng)該怎么處理

這里的操作Model的方法(如incrementCounter),相當(dāng)于BLoC中的Event

ViewModel的泛型即Model的類型, 這里直接使用int類型, 當(dāng)然也可以使用自定義類型, 詳見后面"推薦用法"

class CounterVm extends ViewModel<int> {
  // 1.1 在ViewModel的構(gòu)造中, 提供默認(rèn)的初始值
  CounterVm() : super(initModel: 0);

  // 1.2 獲取Model方法, 這里的model時父類中的屬性,其類型用本類泛型指定
  int counter()=> m;

  // 1.3 操作Model方法,
  // 調(diào)用 父類中的vmUpdate(M m)方法更新model的值
  void incrementCounter() {
    vmUpdate(m + 1);
  }
}

2-在main方法中注冊ViewModel(手動注冊方式)

?? 既然有"手動注冊"方式, 那么肯定有自動注冊方式了, 詳見后面的代碼

使用 GetIt g = GetIt.instance; 獲取GetIt實(shí)例.

實(shí)際上直接使用GetIt.instance或GetIt.I效果是一樣的,且它們都是單例模式. 這里將其賦值給 g,只是為了便于使用.
當(dāng)然, 推薦命名為 _g

添加 WidgetsFlutterBinding.ensureInitialized();以防止ViewModel注冊失敗

關(guān)于WidgetsFlutterBinding.ensureInitialized()的作用,這里貼出Flutter源碼中的說明
"You only need to call this method if you need the binding to be initialized before calling [runApp]."

使用 GetIt.I.registerSingleton<泛型>(構(gòu)造方法); 以懶單例的方式注冊ViewModel

get_it 還有更多注冊方式, 這里暫時只介紹懶單例注冊方式

GetIt g = GetIt.instance;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 4.手動注入依賴, 確保View可以獲取到ViewModel
  g.registerSingleton<CounterVm>(CounterVm());
  runApp(MyApp());
}

3-最后,在UI代碼中調(diào)用ViewMdoel的方法來操作與獲取數(shù)據(jù)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('演示:0.極簡使用方法'),
          ),
          body: Center(
            child: Text('測試0: ${g<CounterVm>().counter()}'),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () => g<CounterVm>().incrementCounter(),
          ),
        ),
      );
}

Demo1到此結(jié)束了, 本例僅供了解GetState原理, 實(shí)際使用中, 不建議使用這樣的寫法.標(biāo)準(zhǔn)寫法見Demo3
接下來是包裝View的Demo.

?? 包裝一個View (Demo1)

直接將ViewModel和GetIt實(shí)例裸露在外一點(diǎn)也不優(yōu)雅, 如果封裝為View使用起來可就方便多了

0-先確保配置了yaml

yaml內(nèi)容跟Demo0一樣

1-再編寫ViewModel

這里直接使用Demo0中的ViewModel

2-編寫View類(MyCounterView)

View類負(fù)責(zé)UI繪制, 控制UI的邏輯應(yīng)當(dāng)盡量放在View里面, 業(yè)務(wù)邏輯可以放在ViewModel中,
一個ViewModel經(jīng)常會對應(yīng)多個View, 根據(jù)迪米特原則, 各個View應(yīng)當(dāng)在其內(nèi)部處理好UI繪制邏輯.

View就是最終展示出來的Widget

class MyCounterView extends View<MyCounterViewModel> {
  @override
  Widget build(BuildContext c, MyCounterViewModel vm) => ListTile(
        title: Text('測試1: ${vm.counter}'),
        trailing: RaisedButton(
          child: Icon(Icons.add),
          onPressed: () => vm.incrementCounter(),
        ),
      );
}

3-將View放到Widget樹中

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: '演示:1.初級使用方法',
        home: Scaffold(
          appBar: AppBar(),
          body: Column(children: <Widget>[
            // 將視圖放入需要的地方
            MyCounterView(),
          ]),
        ),
      );
}

3-在main方法中注冊依賴

這里還是沿用 Demo0中的方法

包裝View的Demo到此結(jié)束, 這樣的寫法適用于Model十分簡單的情況, 但實(shí)際上如果Model十分簡單, 也就失去使用狀態(tài)管理的意義了, 圖一樂也就圖一樂，真圖一樂還得看Demo3

?? 自定義 Model (Demo2)

在實(shí)際應(yīng)用中, Model肯定不會是一個基本類型, 否則也就失去使用狀態(tài)管理的意義了

? 建議自己動手的時候也按照本文中的步驟操作

0-先確保配置了yaml

dependencies:
  flutter:
    sdk: flutter
  ## 1. 引入get_state
  get_state: ^3.3.0

  ## 2- 可以通過引入equatable,省去手動覆寫==和hashCode
  equatable: ^1.1.1

1-編寫Model(CounterModel)

建立一個簡單的狀態(tài), 內(nèi)部有兩個變量 number和str
Model有兩種寫法, 其實(shí)本質(zhì)上沒有區(qū)別, 先看看寫法1

/// 寫法1
class CounterModel {
  final int number;
  final String str;

  CounterModel(this.number, this.str);

  // todo 注意, 這里務(wù)必覆寫==與hashCode, 否則無法正常刷新
  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is CounterModel &&
          runtimeType == other.runtimeType &&
          number == other.number &&
          str == other.str;

  @override
  int get hashCode => number.hashCode ^ str.hashCode;
}

? 這里推薦寫法2, 使用Equatable貫徹"解放雙手,保護(hù)頭發(fā)"的理念.

雖然有IDE加持, 覆寫==與hashCode方法并一般不費(fèi)時間.
但如果Model中的字段很多,頻繁修改字段的同時, 還要修改 ==與hashCode方法, 太過麻煩.

/// 寫法2: 使用 Equatable
class CounterModel2 extends Equatable {
  final int number;
  final String str;

  CounterModel2(this.number, this.str);

  // todo 這里需要將所有的屬性值都放入 props中
  @override
  List<Object> get props => [number, str];
  
  // ? 小技巧, 添加下面這行代碼,連toString都不用動手了
  @override
  final stringify = true;
}

2-編寫ViewModel(CounterVm)

這里沿用Demo0中的代碼

3-編寫View(MyCounterView)

這里沿用Demo1中的View

4-再將View放入Widget樹

仍然沿用Demo1中的代碼

5-最后不要忘記注冊依賴(自動注冊就不用考慮這一步了)

還是用Demo0中的依賴注冊方式

GetState基礎(chǔ)使用教程至此結(jié)束, 是不是十分簡單呢? ??

?? 半自動注冊狀態(tài)與跨頁狀態(tài)修改 (Demo3)

?? emmm, 不用多說, 肯定有全自動注冊的方法了,
不過由于篇幅有限, 全自動注冊的方法請參考這里, 這里不再做詳細(xì)說明(不建議新手使用)

0-先確保配置了yaml

? 這里的yaml與之前的相差較大, 注意觀察

dependencies:
  flutter:
    sdk: flutter
  ## 1. 引入get_state
  get_state: ^3.3.0

  ## 2- 可以通過引入equatable,省去手動覆寫==和hashCode
  equatable: ^1.2.0
  
  ## 3- 通過injectable省去手動注冊步驟
  injectable: ^0.4.0+1

dev_dependencies:
  flutter_test:
    sdk: flutter
  ## 4- injectable需要額外添加下面兩個依賴
  build_runner: ^1.10.0
  ## 5- 這個同樣重要
  injectable_generator: ^0.4.1

1-1頁面A-創(chuàng)建Model(CounterModel2)

本Demo將會創(chuàng)建兩個Page, 先看第一個頁面.
Model內(nèi)容與上一個Demo中的CounterModel基本一致

class CounterModel2 extends Equatable {
  final int number;
  final String str;

  CounterModel2(this.number, this.str);

  // 1. 這里需要將所有的屬性值都放入 props中
  @override
  List<Object> get props => [number, str];
}

1-2頁面A-創(chuàng)建ViewModel(MyCounterViewModel)

?? 這里要注意, 一定要添加"@lazySingleton"注解, 這就是"半自動"的一部分, 千萬不要省略

不是光加上注解的完事了, "半自動"還有另一半操作呢??

@lazySingleton
class MyCounterViewModel extends ViewModel<CounterModel2> {
  MyCounterViewModel() : super(initModel: CounterModel2(3, '- -'));

  int get counter => m.number;

  void incrementCounter() {
    vmUpdate(CounterModel2(m.number + 1, '新的值'));
  }
}

1-3頁面A-創(chuàng)建View(MyCounterView)

class MyCounterView extends View<MyCounterViewModel> {
  @override
  Widget build(BuildContext c, MyCounterViewModel vm) => ListTile(
        leading: Text('測試3: ${vm.counter}'),
        title: Text('${vm.m.str}'),
        trailing: RaisedButton(
          child: Icon(Icons.add),
          onPressed: () => vm.incrementCounter(),
        ),
      );
}

1-4頁面A-將View放到Page中

這里的MapApp 跟前面的不太一樣, 不要太在意這些細(xì)節(jié), 問題不大

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('演示:3.標(biāo)準(zhǔn)使用方法'),
        ),
        body: Column(children: <Widget>[
          // View 1
          MyCounterView(),
          RaisedButton(
            child: Text('跳轉(zhuǎn)到新頁面'),
            onPressed: () => Navigator.of(context).push(MaterialPageRoute(
              builder: (c) => Page2(),
            )),
          ),
          RaisedButton(
            child: Text('點(diǎn)擊更改另一個頁面的值'),
            onPressed: () => g<Pg2Vm>().add,
          ),
        ]),
      );
}

看這里, "跨頁修改狀態(tài)"就是這么簡單粗暴 ??

RaisedButton(
  child: Text('點(diǎn)擊更改另一個頁面的值'),
  onPressed: () => g<Pg2Vm>().add,
),

2-1頁面B-創(chuàng)建Model

頁面1的MVVM一家已經(jīng)創(chuàng)建完畢了, 頁面2只是為了演示跨頁狀態(tài)的修改, 所以就隨便寫一下

// 你沒看錯, 頁面2不定義Model了, 直接用int類型吧

2-2頁面B-創(chuàng)建ViewModel(Pg2Vm)

跟上面一樣, 同樣不要忘記加上"@lazySingleton"

@lazySingleton
class Pg2Vm extends ViewModel<int> {
  Pg2Vm() : super(initModel: 3);

  String get strVal => "$m";

  get add => vmUpdate(m + 1);
}

2-3頁面B-創(chuàng)建View(FooView)

再創(chuàng)建一個簡單的View, 包裝以下ViewModel

class FooView extends View<Pg2Vm> {
  @override
  Widget build(BuildContext c, Pg2Vm vm) => RaisedButton(
        child: Text('${vm.strVal}'),
        onPressed: () => vm.add,
      );
}

2-4頁面B-將View放入Page中

class Page2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(),
        body: Center(
          child: FooView(),
        ),
      );
}

3-1初始化Injectable

將下面的函數(shù)直接寫在main.dart文件里面, 當(dāng)然,另外創(chuàng)建一個新dart文件也可以, 問題不大.

函數(shù), 一定要放在類的外面, 放在類里面的叫方法.

同樣不要放了添加注解"@injectableInit".
建議直接復(fù)制下面的代碼到自己項(xiàng)目里

寫好之后, IDE會提示"找不到$initGetIt"函數(shù),
不要著急, 這個函數(shù)還沒有自動生成呢

// 添加注解
@injectableInit
Future<void> configDi() async {
  $initGetIt(g);
}

? 注意,這里的 configDi方法返回值是 Future<void>,
但是函數(shù)體內(nèi)沒有await.
這是因?yàn)楫?dāng)前生成的依賴注入代碼都是同步的, 如果用到了@preResolve注解, 則生成的 $initGetIt()是一個異步方法, 必須要加上await,否則會出錯

3-2自動生成注入代碼

打開Terminal(或者用CMD進(jìn)入項(xiàng)目的lib同級路徑),
輸入

flutter pub run build_runner build --delete-conflicting-outputs

如果希望build_runner在后臺持續(xù)自動生成代碼,則輸入

flutter pub run build_runner watch --delete-conflicting-outputs

這里的"--delete-conflicting-outputs"表示清除已經(jīng)生成過的代碼, 如果你之前已經(jīng)生成過代碼, 而第二次生成又不想重新開始, 則可以不加這個參數(shù)

如果生成失敗, 注意查看錯誤代碼, 一般情況下加上"--delete-conflicting-outputs"就能解決問題

待代碼生成完畢后, 在原本報(bào)錯的代碼處import新生成的 xxx.iconfig.dart文件就可以了.

4-在main中添加依賴注入

GetIt g = GetIt.instance;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 5. 添加自動依賴注入
  configDi();
  runApp(MaterialApp(home: MyApp()));
}

??????大功告成??????

以上Demo就是get_state的一般用法了, 不過除此之外, get_state還有更多技巧等待你的解鎖??

下面幾個Demo的依賴于這個文件.dart, 直接復(fù)制粘貼是無法運(yùn)行的, 具體原因是因?yàn)闆]有為自己生成相應(yīng)的依賴注入代碼

?? 頁面級注冊: 進(jìn)入頁面時注冊狀態(tài),退出即銷毀.dart
?? ~~ViewModel異步初始化: 其實(shí)我覺得這個功能用處不大.dart~~

?? 狀態(tài)時光機(jī) 在過去與現(xiàn)在之間反復(fù)橫跳.dart

希望各位多多點(diǎn)贊支持, 更歡迎大家提出意見與建議??

有時間的話會補(bǔ)上后續(xù)教程的??

后續(xù)

關(guān)于上文中留下的問題

"?? 猜一猜復(fù)雜的業(yè)務(wù)邏輯應(yīng)該怎么處理", 請參見GetArch介紹

新增

????視圖級注冊: 創(chuàng)建View時注冊, dispose時即銷毀.dart
?? 自動生成帶有copyWith()的Model類: 通過copyWith()修改屬性真的不會影響性能.dart
??將View攜帶的參數(shù)傳給ViewModel: 頁面?zhèn)鲄⑿褪?dart

??

未經(jīng)作者授權(quán), 禁止轉(zhuǎn)載

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

視圖與邏輯分離之道序篇-使用MVVM模式管理狀態(tài)（GetState）

了解 GetState

? 為什么做GetState

進(jìn)入正題

?? 先放上 Pub 以及 項(xiàng)目地址

??了解GetState原理 - ViewModel的作用 (Demo0)

0-確保配置yaml配置正確

1-編寫viewmodel類-countervm

2-在main方法中注冊ViewModel(手動注冊方式)

3-最后,在UI代碼中調(diào)用ViewMdoel的方法來操作與獲取數(shù)據(jù)

?? 包裝一個View (Demo1)

0-先確保配置了yaml

1-再編寫ViewModel

2-編寫View類(MyCounterView)

3-將View放到Widget樹中

3-在main方法中注冊依賴

?? 自定義 Model (Demo2)

0-先確保配置了yaml

1-編寫Model(CounterModel)

2-編寫ViewModel(CounterVm)

3-編寫View(MyCounterView)

4-再將View放入Widget樹

5-最后不要忘記注冊依賴(自動注冊就不用考慮這一步了)

?? 半自動注冊狀態(tài)與跨頁狀態(tài)修改 (Demo3)

0-先確保配置了yaml

1-1頁面A-創(chuàng)建Model(CounterModel2)

1-2頁面A-創(chuàng)建ViewModel(MyCounterViewModel)

1-3頁面A-創(chuàng)建View(MyCounterView)

1-4頁面A-將View放到Page中

2-1頁面B-創(chuàng)建Model

2-2頁面B-創(chuàng)建ViewModel(Pg2Vm)

2-3頁面B-創(chuàng)建View(FooView)

2-4頁面B-將View放入Page中

3-1初始化Injectable

3-2自動生成注入代碼

4-在main中添加依賴注入

??????大功告成??????

希望各位多多點(diǎn)贊支持, 更歡迎大家提出意見與建議??

后續(xù)

??

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

?? 先放上 Pub 以及項(xiàng)目地址