Flutter入門08 -- 狀態管理

狀態管理是聲明式編程非常重要的一個概念，Flutter是屬于聲明式編程；
在Flutter開發過程中，我們有大量的State需要進行管理，這些大量State的改變，正是更新界面，刷新界面；

狀態管理分類

狀態管理分類為短時狀態與應用狀態；
短時狀態：只需要在自己的widget中使用即可，
- 簡單的計數器counter
- PageView組件記錄當前的頁面
- 動畫記錄當前的進度
- BottomNavigationBar中當前被選中的tab
這種狀態我們只需要使用StatefulWidget對應的State類自己管理即可，widget樹中的其他組件不需要訪問這個狀態；
應用狀態：其需要在多個組件之間進行狀態數據的共享；
- 個性化選項的設置
- 用戶登陸狀態信息
針對應用狀態，因為要在不同組件之間傳遞狀態數據，如果涉及的組件很多，就會造成代碼的耦合度很高，這對于代碼的編寫質量與代碼的維護都是非常差的，這個時候我們就需要選擇全局狀態管理的方式，來對狀態進行統一的管理與應用；
在開發的過程中，并沒有明確規則去區分哪些狀態是短時狀態，哪些狀態時應用狀態，某些短時狀態可能在之后的開發維護中需要升級為應用狀態；
我們可以遵守下面這幅圖的規則：

image.png

共享狀態管理

InheritedWidget

InheritedWidget可實現跨組件數據的傳遞；
定義一個共享數據組件SFCounterWidget，需要繼承自inheritedWidget，案例代碼如下所示：

import 'package:flutter/material.dart';

main() => runApp(SFMyApp());

class SFCounterWidget extends InheritedWidget {
  final int counter;

  SFCounterWidget({this.counter, Widget child}) : super(child:child);

  static SFCounterWidget of(BuildContext ctx) {
    //沿著Element樹 去找到最近的SFCounterWidgetElement，然后從element中取出widget對象
    return ctx.dependOnInheritedWidgetOfExactType();
  }

  //返回true：依賴當前SFCounterWidget的widget的state類 會執行didChangeDependencies()方法
  @override
  bool updateShouldNotify(SFCounterWidget oldWidget) {
    return oldWidget.counter != counter;
  }
}

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatefulWidget {
  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {
  int _counter = 1000;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter測試共享數據"),
      ),
      body: SFCounterWidget(
        counter: _counter,
        child: Column(
          children: [
            SFShowData01(),
            SFShowData02(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          setState(() {
            _counter++;
          });
        },
      ),
    );
  }
}

class SFShowData01 extends StatefulWidget {
  @override
  _SFShowData01State createState() => _SFShowData01State();
}

class _SFShowData01State extends State<SFShowData01> {

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("_SFShowData01State 執行了 didChangeDependencies方法");
  }

  @override
  Widget build(BuildContext context) {
    int counter = SFCounterWidget.of(context).counter;
    return Card(
      color: Colors.red,
      child: Text("當前計數: $counter"),
    );
  }
}

class SFShowData02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int counter = SFCounterWidget.of(context).counter;
    return Card(
      color: Colors.green,
      child: Text("當前計數: $counter"),
    );
  }
}

上述代碼的關系網如下所示：

image.png

SFCounterWidget是共享數據，繼承自InheritedWidget，內部提供初始化構造方法SFCounterWidget({this.counter, Widget child}) : super(child:child)，其中可選參數child是共享數據的子節點；
靜態方法，實現如下：

static SFCounterWidget of(BuildContext ctx) {
    //沿著Element樹 去找到最近的SFCounterWidgetElement，
    //然后從element中取出widget對象
    return ctx.dependOnInheritedWidgetOfExactType();
  }

根據BuildContext，也就是child子節點widget(SFShowData01與SFShowData02)的element，在Element樹去找到最近的SFCounterWidgetElement，然后從element中取出widget對象SFCounterWidget，也就是共享數據；
實現父類的抽象方法updateShouldNotify

@override
  bool updateShouldNotify(SFCounterWidget oldWidget) {
    return oldWidget.counter != counter;
  }

返回true，就表示共享數據SFCounterWidget內部子節點widget(獲取數據的組件）的state類就會執行void didChangeDependencies()方法；

Provider

Provider是官方推薦的全局狀態管理工具，使用之前我們需要引入對它的依賴：

dependencies:
  provider: ^4.0.4

Provider的使用步驟通常分為下面三步：
第一步：創建需要共享的數據模型；
第二步：在應用程序頂層包裝一個ChangeNotifierProvider；
第三步：在需要共享數據，引用數據的位置，使用數據；
在引用數據的位置，使用共享數據，通常有三種形式，分別為：Provider.of，Consumer與Selector，下面分別介紹這三種形式的用法與優缺點；

Provider.of 與Consumer

先看案例代碼：
創建的共享數據模型SFCounterViewModel繼承自ChangeNotifier

import 'package:flutter/material.dart';

//創建共享數據
class SFCounterViewModel extends ChangeNotifier{
  int _counter = 1000;

  int get counter => _counter;

  set counter(int value) {
    _counter = value;
    notifyListeners();
  }
}

import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/viewmodel/SFCounterViewModel.dart';
import 'package:provider/provider.dart';

void main() {
  //2.在應用程序的頂層 包裝一個ChangeNotifierProvider
  runApp(
    ChangeNotifierProvider(
      create: (ctx) => SFCounterViewModel(),
      child: SFMyApp(),
    )
  );
}

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("SFHomePage build");
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Column(
        children: [
          SFShowData01(),
          SFShowData02(),
        ],
      ),
      floatingActionButton: Consumer<SFCounterViewModel>(
        builder: (ctx,counterViewModel,child){
          print("Consumer floatingActionButton builder");
          return FloatingActionButton(
            child: child,
            onPressed: (){
              counterViewModel.counter+=1;
            },
          );
        },
        child: Icon(Icons.add),
      )
    );
  }
}

class SFShowData01 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("SFShowData01 build");
    //3.在需要使用共享數據的位置調用Provider.of方法
    int counter = Provider.of<SFCounterViewModel>(context).counter;
    return Card(
      color: Colors.red,
      child: Text("當前計數: $counter"),
    );
  }
}

class SFShowData02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("SFShowData02 build");

    return Card(
      color: Colors.green,
      child: Consumer<SFCounterViewModel> (
        builder: (ctx,counterViewModel,child) {
          print("Consumer builder");
          return Text("當前計數: ${counterViewModel.counter}");
        },
      )
    );
  }
}

效果圖如下所示：

image.png

SFShowData01采用Provider.of方法引用共享數據，of函數為static T of<T>(BuildContext context, {bool listen = true})，其中的泛型<T>就是共享數據SFCounterViewModel
SFShowData02采用Consumer方法引用共享數據，Consumer方法為Consumer({Key key,@required this.builder,Widget child,}) 其中必傳參數builder為final Widget Function(BuildContext context, T value, Widget child) builder 函數；
點擊右下角按鈕時，改變共享數據的數值，采用的也是Consumer方法
當點擊右下角按鈕時，改變了共享數據的數值，SFShowData01，SFShowData02與FloatingActionButton三處引用共享數據都會發生自己的監聽回調，同時發現SFShowData01采用Provider.of方法引用共享數據 SFShowData01出現build重建，而SFShowData02采用Consumer方法引用共享數據，并沒有出現build重建，但Consumer方法內部的builder函數會重新執行；
將右下角按鈕引用共享數據的方式改成Selector方式，代碼如下：

floatingActionButton: Selector<SFCounterViewModel,SFCounterViewModel>(
         selector: (ctx,counterViewModel) => counterViewModel,
         shouldRebuild: (prev,next) => false,
         builder: (ctx,counterViewModel,child) {
          return FloatingActionButton(
            child: child,
            onPressed: (){
              counterViewModel.counter += 1;
            },
          );
         },
        child: Icon(Icons.add),
      )

Selector方法，定義為Selector({ Key key, @required ValueWidgetBuilder<S> builder, @required S Function(BuildContext, A) selector, ShouldRebuild<S> shouldRebuild, Widget child, })，其中參數selector表示可對原來的共享數據進行類型的轉換，參數shouldRebuild表示selector內部的builder函數是否重新執行；

總結：
針對Provider of：當共享數據發生變化時，Provider of所在的widget會build重建，這樣導致效率低下；
針對Consumer：當共享數據發生變化時，Consumer所在的widget不會build重建，而內部的builder函數會重新執行，效率比Provider of相對較高；
針對selector：可對原來的共享數據進行類型的轉換，可控制內部的builder函數是否重新執行，效率時最高的；

多個數據模型的共享

可使用MultiProvider，
再新建一個共享數據模型SFUserInfoViewModel，其數據來源于模型SFUserInfoModel

class SFUserInfoModel {
  String name;
  int level;
  String imageUrl;

  SFUserInfoModel(this.name,this.level,this.imageUrl);
}

import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/model/SFUserInfoModel.dart';

class SFUserInfoViewModel extends ChangeNotifier {
  SFUserInfoModel _userInfo;

  SFUserInfoViewModel(this._userInfo);

  SFUserInfoModel get userInfo => _userInfo;

  set userInfo(SFUserInfoModel value) {
    _userInfo = value;
    notifyListeners();
  }
}

案例代碼如下所示：

import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/model/SFUserInfoModel.dart';
import 'package:learn_flutter_01/day02/viewmodel/SFCounterViewModel.dart';
import 'package:learn_flutter_01/day02/viewmodel/SFUserInfoViewModel.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (ctx) => SFCounterViewModel()),
        ChangeNotifierProvider(create: (ctx) => SFUserInfoViewModel(SFUserInfoModel("yanzi",20,"haha"))),
      ],
      child: SFMyApp(),
    )
  );
}

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SFHomePage(),
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("SFHomePage build");
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表"),
      ),
      body: Column(
        children: [
          SFShowData01(),
          SFShowData02(),
          SFShowData03(),
        ],
      ),
      floatingActionButton: Selector<SFCounterViewModel,SFCounterViewModel>(
         selector: (ctx,counterViewModel) => counterViewModel,
         shouldRebuild: (prev,next) => false,
         builder: (ctx,counterViewModel,child) {
           print("Selector builder");
           return FloatingActionButton(
             child: child,
             onPressed: (){
              counterViewModel.counter += 1;
             },
          );
         },
        child: Icon(Icons.add),
      )
    );
  }
}

class SFShowData01 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    print("SFShowData01 build");

    //3.在需要使用共享數據的位置調用Provider.of方法
    int counter = Provider.of<SFCounterViewModel>(context).counter;
    return Card(
      color: Colors.red,
      child: Text("當前計數: $counter",style: TextStyle(fontSize: 25)),
    );
  }
}

class SFShowData02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //int counter = Provider.of<SFCounterViewModel>(context).counter;
    print("SFShowData02 build");
    return Card(
      color: Colors.green,
      child: Consumer<SFCounterViewModel> (
        builder: (ctx,counterViewModel,child) {
          print("Consumer builder");
          return Text("當前計數: ${counterViewModel.counter}",style: TextStyle(fontSize: 25));
        },
      )
    );
  }
}

class SFShowData03 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer2<SFCounterViewModel,SFUserInfoViewModel>(
        builder: (ctx,countViewModel,userInfoViewModel,child){
          return Text(
              "nickname=${userInfoViewModel.userInfo.name} counter = ${countViewModel.counter}",
              style: TextStyle(fontSize: 25)
          );
        }
    );
  }
}

在SFShowData03中同時引用SFCountViewModel與SFUserInfoViewModel兩種共享數據，使用的是Consumer2，運行效果圖如下：

image.png

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,197評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,415評論 3贊 415
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 176,104評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,884評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,647評論 6贊 408
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,130評論 1贊 323
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,208評論 3贊 441
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,366評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,887評論 1贊 334
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,737評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,939評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,478評論 5贊 358
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,174評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,586評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,827評論 1贊 283
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,608評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,914評論 2贊 372

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Flutter入門08 -- 狀態管理

Flutter入門08 -- 狀態管理

狀態管理分類

共享狀態管理

InheritedWidget

Provider

Provider.of 與Consumer

多個數據模型的共享

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Flutter入門08 -- 狀態管理

狀態管理分類

共享狀態管理

InheritedWidget

Provider

Provider.of 與Consumer

多個數據模型的共享

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频