state.png

1、什么是狀態(tài)

1.1、應(yīng)用的狀態(tài)就是當(dāng)這個(gè)應(yīng)用運(yùn)行時(shí)存在于內(nèi)存中的所有內(nèi)容。包括了應(yīng)用中用到的資源，所有 Flutter 框架中有關(guān)用戶界面、動(dòng)畫狀態(tài)、紋理、字體以及其他等等的變量。紋理，字體等系統(tǒng)已經(jīng)處理好了，我們能改變的狀態(tài)，比如更改需要重建頁面時(shí)所需要的數(shù)據(jù)。比如用戶在設(shè)置界面中點(diǎn)擊了一個(gè)開關(guān)選項(xiàng)，改變了狀態(tài)，這將會(huì)觸發(fā)用戶界面的重繪。
如何改變state，通知UI更新？

2、狀態(tài)共享

狀態(tài)共享為了解決子widget如果感知數(shù)據(jù)變化，以及父widget怎么將數(shù)據(jù)傳遞給子widget。
2.1、setState 通知framework當(dāng)前的對(duì)象內(nèi)部狀態(tài)改變，然后會(huì)重新build當(dāng)前的對(duì)象。

setState(() { 
    _myState = newValue;
 });

 void setState(VoidCallback fn) {
    _element!.markNeedsBuild();
  }

2.2、provider 提供數(shù)據(jù)給子類。
以項(xiàng)目中的provider的使用為例，項(xiàng)目中使用ChangeNotifierProvider，使用如下

Expanded(
        child: ChangeNotifierProvider.value(
          value: person,
          child: Container(
            child: Consumer<Person>(
              builder: (context, person, child) {
                int number = Random().nextInt(1000);
                return Container(
                  height: 45,
                  color: Colors.deepPurple,
                  alignment: Alignment.center,
                  child: InkWell(
                    child: Text(
                      "change $number age = ${person.age}",
                      style: TextStyle(color: Colors.white),
                    ),
                    onTap: () {
                      provider_person.getNetWorkData();
                    },
                  ),
                );
              },
            ),
          ),
        ),
      ),

class Person extends ChangeNotifier {
  String name = "";
  int age = 10;

  Person({required this.name, required this.age});

  void getNetWorkData() async {
    await Future.delayed(const Duration(milliseconds: 500), () {
      this.age = Random().nextInt(2000);
      notifyListeners();
    });
  }

  void getNetWorkDataContext(BuildContext context) async {
    print("load data");
    await Future.delayed(const Duration(microseconds: 500), () {
      Provider.of<Person>(context, listen: false).age = Random().nextInt(100);
      notifyListeners();
    });
  }

  Future<Person> getNetWorkDataFuture() async {
    return await Future.delayed(const Duration(milliseconds: 500), () {
      this.age = Random().nextInt(2000);
      return this;
    });
  }
}

看下changeNotifyProvider的構(gòu)造函數(shù)
第一種： 使用create方法創(chuàng)建一個(gè)ChangeNotifier，當(dāng)ChangeNotifierProvider從樹上移除的時(shí)候自動(dòng)銷毀。
create : 創(chuàng)建一個(gè)ChangeNotifier的對(duì)象，create函數(shù)只會(huì)執(zhí)行一次。
lazy: 是否用到的時(shí)候再create，懶加載。
builder : 用于創(chuàng)建子widget，context可用于獲得provider。
child: 更好的復(fù)用，減少child部分重繪，性能更好。
builder和child必須存在一個(gè)。

ChangeNotifierProvider({
    Key? key,
    required Create<T> create,
    bool? lazy,
    TransitionBuilder? builder,
    Widget? child,
  })

create中不可以是一個(gè)已經(jīng)存在的value值，因?yàn)閏reate只會(huì)執(zhí)行一次，之后value值改變會(huì)沒有效果。
2、提供已經(jīng)存在的ChangeNotify

 ChangeNotifierProvider.value({
    Key? key,
    required T value,
    TransitionBuilder? builder,
    Widget? child,
  })

value : 已經(jīng)存在的ChangeNotify對(duì)象，會(huì)創(chuàng)建或更改多次。
這個(gè)構(gòu)造函數(shù)不可以在value參數(shù)處創(chuàng)建ChangeNotify，創(chuàng)建ChangeNotify會(huì)導(dǎo)致先前的value對(duì)象狀態(tài)丟失。

3、provider原理

3.1 認(rèn)識(shí)InheritedWidget
用于高效的向子widget傳遞數(shù)據(jù)的基礎(chǔ)類,當(dāng)數(shù)據(jù)改變時(shí)，rebuild會(huì)更新子widget數(shù)據(jù)。InheritedWidget和StateLessWidget有什么不同了？

abstract class StatelessWidget extends Widget {
  @override
  StatelessElement createElement() => StatelessElement(this);
}

abstract class InheritedWidget extends ProxyWidget {
  @override
  InheritedElement createElement() => InheritedElement(this);
}

class StatelessElement extends ComponentElement {
  @override
  void update(StatelessWidget newWidget) {
    super.update(newWidget);
    assert(widget == newWidget);
    _dirty = true;
    rebuild();
  }
}

abstract class ProxyElement extends ComponentElement {

  @override
  void update(ProxyWidget newWidget) {
    final ProxyWidget oldWidget = widget as ProxyWidget;
    assert(widget != null);
    assert(widget != newWidget);
    super.update(newWidget);
    assert(widget == newWidget);
    updated(oldWidget);
    _dirty = true;
    rebuild();
  }
}

InheritedElement繼承自ProxyElement，可以看見StatelessElement如果widget需要更新，則直接rebuild，而InheritedWidget如果需要更新，則先調(diào)用updated(oldWidget)，這個(gè)方法更新依賴的widget，然后再rebuild自己。
3.2、用該類實(shí)現(xiàn)一個(gè)類似Provider功能。

class State_Manager extends InheritedWidget {
  Person? person;
  Widget myChild;

  State_Manager({required this.myChild, required this.person})
      : super(child: myChild);

  @override
  bool updateShouldNotify(covariant State_Manager oldWidget) {
    print("update-------");
    if (person?.age != oldWidget.person?.age) {
      return true;
    }
    return false;
  }

  static State_Manager? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<State_Manager>();
  }

  @override
  InheritedElement createElement() {
    ProviderElement element = ProviderElement(myWidget: this);
    person?.addListener((age) => {element.markNeedsBuild()});
    return element;
  }
}

class ProviderElement extends InheritedElement {
  InheritedWidget myWidget;
  bool isNeedUpdate = false;

  ProviderElement({required this.myWidget}) : super(myWidget);

  @override
  void markNeedsBuild() {
    print("markbuild");
    super.markNeedsBuild();
  }

  @override
  State_Manager get widget => super.widget as State_Manager;

  @override
  Widget build() {
    print("build element");
    notifyClients(widget);
    return super.build();
  }
}

class Person {
  String? name;
  int? age;

  void Function(int age)? listener;

  set setAge(int age) {
    this.age = age;
    listener?.call(age);
  }

  void addListener(Function(int age)? listener) {
    this.listener = listener;
  }
  Person({required this.age, required this.name});
}

使用

class _Apply_State extends State<State_Manager_Apply> {
  late Person _person;
  GlobalKey globalKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _person = Person(age: 23, name: "lisi");
  }

  @override
  Widget build(BuildContext context) {
    print("state_manager_build");

    return Scaffold(
      appBar: AppBar(
        title: Text("狀態(tài)管理"),
      ),
      body: State_Manager(
        myChild: Column(
          children: <Widget>[Text_A(), Text_B(), Text_C(), Text_D() ],
        ),
        person: _person,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _person.age = Random().nextInt(100);
          setState((){

          });
        },
        child: Text("改變child數(shù)據(jù)"),
      ),
    );
  }
}

class Text_C extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("text c build");
    return SizedBox(
      height: 100,
      width: double.infinity,
      child: Container(
        padding: EdgeInsets.only(left: 20),
        alignment: Alignment.centerLeft,
        color: Colors.yellow,
        child: InkWell(
          onTap: () {
            Person? person = State_Manager.of(context)?.person;
            person?.setAge = Random().nextInt(300);
          },
          child: Text("C 我不需要改變",
              style: TextStyle(color: Colors.black87, fontSize: 18)),
        ),
      ),
    );
  }
}

上述代碼中， A B C D四個(gè)widget，當(dāng)點(diǎn)擊C更改數(shù)據(jù)后，由于A，B，C調(diào)用了
State_Manager.of(context)會(huì)向?qū)⒃揺lement加入到_dependencies中，看下加入代碼。

 @override
  T? dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object? aspect}) {
    assert(_debugCheckStateIsActiveForAncestorLookup());
    final InheritedElement? ancestor = _inheritedWidgets == null ? null : _inheritedWidgets![T];
    if (ancestor != null) {
      return dependOnInheritedElement(ancestor, aspect: aspect) as T;
    }
    _hadUnsatisfiedDependencies = true;
    return null;
  }

InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object? aspect }) {
    assert(ancestor != null);
    _dependencies ??= HashSet<InheritedElement>();
    _dependencies!.add(ancestor);
    ancestor.updateDependencies(this, aspect);
    return ancestor.widget as InheritedWidget;
  }

上述的State_Manager.of()就相當(dāng)于觀察者模式中的注冊。之后rebuild(比如調(diào)用setState)會(huì)使dependencies集合中的widget更新。

  @override
  void update(ProxyWidget newWidget) {
    final ProxyWidget oldWidget = widget as ProxyWidget;
    super.update(newWidget);
    assert(widget == newWidget);
    updated(oldWidget);
    _dirty = true;
    rebuild();
  }

 @protected
  void updated(covariant ProxyWidget oldWidget) {
    notifyClients(oldWidget);
  }

 void notifyClients(InheritedWidget oldWidget) {
    assert(_debugCheckOwnerBuildTargetExists('notifyClients'));
    for (final Element dependent in _dependents.keys) {
      // check that it really depends on us
      notifyDependent(oldWidget, dependent);
    }
  }

 void didChangeDependencies() {
    assert(_lifecycleState == _ElementLifecycle.active); // otherwise markNeedsBuild is a no-op
    assert(_debugCheckOwnerBuildTargetExists('didChangeDependencies'));
    markNeedsBuild();
  }

上述updated(oldWidget)就會(huì)更新依賴的widget?？梢宰⒁獾缴鲜鑫覀儽O(jiān)聽數(shù)據(jù)變化設(shè)置element.markNeedsBuild()和setState()方法中設(shè)置_element!.markNeedsBuild()不是同一個(gè)element。使用了setState會(huì)導(dǎo)致
State_Manager這個(gè)widget重建。而直接使用數(shù)據(jù)監(jiān)聽，不會(huì)使State_Manager重建，里面的child更新也是局部更新。

狀態(tài)管理.png

如圖，點(diǎn)擊C，則A，B，C會(huì)創(chuàng)建，D不會(huì)創(chuàng)建。如果直接點(diǎn)擊floatButton，調(diào)用setState則abcd都會(huì)重新創(chuàng)建。

4、 provider框架

provider.png

可以看到provider框架也是使用InheritedWidget實(shí)現(xiàn)的，以ChangeNotifyProvider為例，分析調(diào)用過程。
4.1、注冊監(jiān)聽

//注冊時(shí)機(jī) InheritedProvider

@override
  T get value {
    element!._isNotifyDependentsEnabled = false;
    _removeListener ??= delegate.startListening?.call(element!, delegate.value);
    element!._isNotifyDependentsEnabled = true;
    assert(delegate.startListening == null || _removeListener != null);
    return delegate.value;
  }

 static VoidCallback _startListening(
    InheritedContext e,
    Listenable? value,
  ) {
    value?.addListener(e.markNeedsNotifyDependents);
    return () => value?.removeListener(e.markNeedsNotifyDependents);
  }

void addListener(VoidCallback listener) {
    if (_count == _listeners.length) {
      if (_count == 0) {
        _listeners = List<VoidCallback?>.filled(1, null);
      } else {
        final List<VoidCallback?> newListeners =
            List<VoidCallback?>.filled(_listeners.length * 2, null);
        for (int i = 0; i < _count; i++) {
          newListeners[i] = _listeners[I];
        }
        _listeners = newListeners;
      }
    }
    _listeners[_count++] = listener;
  }

4.2、數(shù)據(jù)改變，通知刷新

void notifyListeners() {
    for (int i = 0; i < end; i++) {
      try {
        _listeners[i]?.call();
      }
    }
}

上述的get value 就是Provider.of()調(diào)用，也就是每次獲取值就注冊了監(jiān)聽，監(jiān)聽的實(shí)現(xiàn)就是e.markNeedsNotifyDependents， notifyListeners就是去通知刷新element。

4.3、接收到監(jiān)聽，處理。

class class _InheritedProviderScopeElement {

   @override
   void markNeedsNotifyDependents() {
    if (!_isNotifyDependentsEnabled) {
      return;
     }
    markNeedsBuild();
    _shouldNotifyDependents = true;
   }

   @override
   Widget build() {
     if (widget.owner._lazy == false) {
      value; // this will force the value to be computed.
    }
    _delegateState.build(
      isBuildFromExternalSources: _isBuildFromExternalSources,
    );
    _isBuildFromExternalSources = false;
    if (_shouldNotifyDependents) {
      _shouldNotifyDependents = false;
      notifyClients(widget);
    }
    return super.build();
  }
}

更新當(dāng)前的element，調(diào)用build，然后調(diào)用notifyClients(widget)，更新依賴的子widget。
4.4. FutureProvider和StreamProvider

 //_DeferredDelegateState
  @override
  R get value {
    element!._isNotifyDependentsEnabled = false;
    _removeListener ??= delegate.startListening(
      element!,
      setState,
      controller,
      _value,
    );
    element!._isNotifyDependentsEnabled = true;
    return _value as R;
  }

//async_provider
DeferredStartListening<Future<T>?, T> _futureStartListening<T>({
  required T initialData,
  ErrorBuilder<T>? catchError,
  }) {
  return (e, setState, controller, __) {
    if (!e.hasValue) {
      setState(initialData);
    }
    var canceled = false;
    controller?.then(
      (value) {
        if (canceled) {
          return;
        }
        setState(value);
      },
  }
//_DeferredDelegateState
 void setState(R value) {
    if (_hasValue) {
      final shouldNotify = delegate.updateShouldNotify != null
          ? delegate.updateShouldNotify!(_value as R, value)
          : _value != value;
      if (shouldNotify) {
        element!.markNeedsNotifyDependents();
      }
    }
    _hasValue = true;
    _value = value;
  }

當(dāng)future和stream異步處理完成之后，通過setState函數(shù)回調(diào)，然后調(diào)用
markNeedsNotifyDependents，之后更新子widget流程就相同了。

5、子Widget獲取值。

  T read<T>() {
    return Provider.of<T>(this, listen: false);
  }

 T watch<T>() {
    return Provider.of<T>(this);
  }

 Selector<Counter, List<int>>(builder: (context, value, child) {
      return Container(
        alignment: Alignment.center,
        child: Text(
          "selector用于過濾一些不想要的改變\n ${value.toString()}",
          textAlign: TextAlign.center,
        ),
      );
    }, selector: (context, otherValue) {
      print("---${otherValue.count}");
      List<int> list = [];
      if (otherValue.count % 3 == 0) {
        list.add(otherValue.count);
        print("添加了 ${otherValue.count}");
      }
      return list;
    });

Consumer<Person>(
              builder: (context, person, child) {
                print("conumser build");
                int number = Random().nextInt(1000);
                return Container(
                  height: 45,
                  color: Colors.deepPurple,
                  alignment: Alignment.center,
                  child: Text(
                    "change $number age = ${person.age}",
                    style: TextStyle(color: Colors.white),
                  ),
                );
              },
            ),

read方法不可以在 [StatelessWidget.build]/[State.build]中調(diào)用，可以在點(diǎn)擊事件中調(diào)用。
watch方法僅僅可以在[StatelessWidget.build] 和[State.build]調(diào)用。
consumer：為provider提供context，再者提供更好性能，復(fù)用child。
Selector ： 等同于Cosumer，可以過濾一些值，防止value沒有變化而rebuild。