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阅读 194,242评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,769评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,484评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,133评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,007评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,080评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,496评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,190评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,464评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,549评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,330评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,205评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,567评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,889评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,160评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,475评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,650评论 2赞 335

Flutter入门08 -- 状态管理

状态管理分类

共享状态管理

InheritedWidget

Provider

Provider.of 与Consumer

多个数据模型的共享

推荐阅读更多精彩内容