欢迎前往自己的GitHub查看更多内容。点击前往GitHub
1 关于状况办理的了解
最近项目开发完成后，没有什么任务组织，就自己对项目进行了查缺补漏。假如说flutter开发中最不可防 K ^ l止的话，肯定是状况办理啦。咱们自己的项目当中用的是Provide~ x r : * nr来进行办理的，自己其实关于状况办理的基础还是有一点含糊X a T，浅显的了解就是：防止对页面不断的build，要进行针对性的改写，（列入：更新一个text也将整个页面build一次糟蹋f n k s % y t u ^性能。）
1.0 简略了解
那咱们来言归正传说一说比较正确的了解吧，防止我在这里误人子弟。
1.状况办理的目的就是为了让界面与业U 4 [ `务别离。
2.当咱们的运用c Z 6功用杂乱多样的时分，运用程序将会有几十个乃至上百个状况，这时分咱们需求对状况进行合理有用的办理。
很多从指令. U E X O 1式编程结构（Android或iOS原生开发者）转成声明式编程（Flutterb - | P } N J y `、Vue、React等）刚开始并不习惯，由于需求一个新的视点来考虑APP的开发形式。Flutter作为一个现代的结构，是声明式编程的：
在编写一个运用的过程中f ~ ~，咱3 G /们有大量的状况需求来进行办理，而正是对这些State的改动，来更新界面的改写：
1.1 InheritedWidget（同享运用程序状况）
Flutter 中Widget 多种多样，有UI的，当然也有功w { K f用型的组件l y % z n o 0 $InheritedWidget 组件就是FlutterB $ / { 中的一个功用组件，它能0 ! * b Q x 0够完成Flutter 组件之间的数据同享，他的数据传递方向在Widget树传递是从上到下的。
运用样列：
class StateManagementDemoG s p H f extends Stat } [efulWidgt p =et {
@ov$ e # Q cerride
_State& ; 1 J b aManagementDemoState cren = w cateState() => _StateManagementDemoState();
}
class _StateManagementDemoState extends State<StateManagementDemo> {
int _count = 0;
void _increaseCount () {
setStF P ( f b E 5 y )ate(() {
_count += 1;
});
}
@override
Widget build(Buil5 & @ : 2 , k NdContext? j / o r ? context) {
return CounterProvider(
count: _count,
increaseCount: _increaseCount,
childo X ? n ~ U g: Scaffold(
appBar: AppBar(title: Text('StateManagementDemo'), elB V g 1evation: 0.0,),
body: CounterWrapper(),
floatingActionButton: Floatingp Z v CActionButton- 8 -(
child: Icon(Icons.add),
on? h $ X hPressed: _increaseCount,
),
),
);
}
}
class CounterWrapper extends Statel M 3 !essWidget {
@override
Widget build(BuildContextP m x { 9 context) {
return Center(child: Counter(),);
}
}
class Counte; i , [ m W V Yr extends StatelessWidget {
@overridej ` i 7 , X [ G B
Widget build(Buip $ % jldContext context) {
final int count = CounterProvider.of(conte! 5 l q [xt).count;
final VoidCallback increaseCount = CounterPro4 c 2 d D G # ?vider.of(context).increaseCount;
return Center(} g , &child: ActionChip(
label: Te] q 8 $ 1xt('$count'),
onPressed: increaseCount,),
);
}
}
class CounterProvider extends Inherite8 g odWidget {
final int count;
final VoidCallback increaseCount;
final Widget child;
CounterProvider({
thim l u 4s.count,
this.increaseCount,
this. J A 5 @ &child,
}) : super(child: child);
// 其他部件中能够用这个办法得到小部件内的数据
static CounterProvider of(BuildContext contextE G 8 t) => context.iM 5 f 1 6 2 jnheritFromWidgetOfExactType(CounterProvider);
// 决议是否告知承继这个小部件的小部件，: D H l v F X当这个部件重建以后有时分需求告知承继这个部y 0 3 u件的小部件
@override
bool updateShouldNom J . ftify(InheritedWidget oldWidget) {
return tp * K #rue;
}
}
2 状况办理结构
2.0 能够经过如下办法来进行状况办理
1.setState ：
最重要的办法 setState，支撑规划较小的程序满足了，一切其它办法最终都需求调用 setState。
2.Function callback
Dart Function 满足灵活，还支撑模版参数。
typedef FooChanged = void Function(int);
typedeZ T e y 7 J = [ f ValueChanged<T> = void Function(T value);
单向改动告知P 7 l s J $，能够和ObserverList结合支k [ { 1 s F @ j A撑多个订阅者。
Flutter 内置 ChangeNotifi# Q M Uer, ValueNotifier 都能够认为是类似计划。
3.Delegate
能够认为是多个回调函数，其他语言里都有类似形式，k 7 ) ; H名称好像来历于 Objective-C。实际比如
abstract class SpiderDelegate {
/// category is null, crawl book whole site
/// category not null, crawl book under the categoryj { C s 2 N
void onBook(Book book, {Site site, Category category});
void onCh~ 0 p % J ~ q E tapter(t b x #Book book, Chapterf 0 R + f j ! chapter);
}
4.Sigslot
源自 Qt 里的经典编程形式，Dart 能够容易完成。这种办法在 Flutter 里或许根本不会有太多运用，可是由于 Sigslot 在 C++ 领域具有无足m ? : ( m轻重的位置，归于界面数据和逻辑解耦合的王者，boost::signal(2)就是明证，在这里列出纯属凑数M 1 v 1 B M r y(自己也完成了一个)。
typedef ValueCallback<E> = void Function(E value);
abstract class Signable<E> {
// Signable<bool> someValue;
/// Register a closure to be called wj b Ehen the object notifies its listeners.
void connect(ValueCallback<E> listener);
/// Remove a preE K e 1 V KviB o r .ously re~ Q & 7 Jgister= y T _ y f M led closure from the list of closures that the
/// object notifies.
void disconnect(ValueCallback<E> listener);
/// sink value changed
void emit(E value);
}
运用办法类似
Signal<String> signalString;
signalString.conne` t y , ` )cth 5 R u 6((String str) {
// got the `str` changed here
});
2.1a & R ; * l w P { scoped_model
Scoped_model是H 2 n一个dart第三方库，供给了让您能够轻松地将数据模型从父Widget传递到它的后代的功用。此外，它还会在模型更新时从头烘托运用该模型J + U 4 ? 4 1 y &的一切子项。
它直接来自n ` 2 j于GooglD @ r , ? 1 z 2e正在开发的新系统Fuchsia核心Widgets 中对Model类的简略提取，作为独立- J 3 e ? X Q j运用的独立Flutter插件发布。
Scoped model运用了观察者形式，将数据模型放在父代，后代经过找到父代的model进行数据烘托，最终数据改动时将数据传回，父代再告知一切用到了该model的子代去更新状况。
2.2 Redux
Redux是一种单向数据流架构，能够轻松开发，保护和测试运用程序。
咱们在Redux中，一切的状况都储存在Store里。这个Store会放在App顶层。
View拿到Store储存的状况(State)并把它映射成视图。View还会与用户进行交互，用户点击按钮滑动屏幕等等，这时会由于交互需求数据发生改动。
Redux让咱们不能让View直接操作数据7 r W H :，而是经过发起一个action来告知Reducer，S 3 # 0 k状况得改动啦。
这~ f & Y时分Reducer接纳到了这个action，他就回去遍历action表，然后找到那个匹配的action，E = : O Z _根据action生成新的状况并把新的状况放到Store中。
Store丢弃了老的状况目标，储存了新的状况目标后，就告知一切运用到了这个状况的View更新（类似setStatO E j F ie）。这样咱们就能够同步不同view中的状况了。
2.3 BT | U X | C ] s cLoC
BLoC是一种利用reactive programmin# v %g办法构建运用的办法，这是一个由流构成的彻底异步的世界。
* 用StreamBuilder包裹有状况的部件，streambuilder将会监听一个流
* 这个流来自于BLoC
* 有状况小部件中的数据来自于监听的流。
* 用户Z p t ( x |交互手势被检测到，发生了事情。例如按了一下按钮。
* 调用bloc的功用来处理这个事情
* 在blL N $ [ B / C {oc中处理完毕后M E H b z U B ] V将会吧最新的数据add进流的sink中
* StreamBuilder监听到新的数据，发生一个新的snapshot，并从头调用build办法
* Widget被从d d @头构建
2.4 RxDa* N M M L D U , Wr0 n 3 2t
RxDarX K b ( k { ] mt是基于ReactiveX标准API的Dart版本完成，由DA F 1 6art标准库中Stream扩展而成。因而，RxDart与Dart的相关术语稍有区别：
Dart RxDartp w ] P V 4
StreamController Subject
Stream Observable
Observable等同于Stream，Subject等同于StreamController，前者均由后者承继而来。
不同于Dart，Rk 5 r R 3 U nxDart供给了三种StreamController的变体来运用到不同的场景：
PublishSubject
BehaviorSubject
ReplaySubw k c { n cject
2.5 Fish-Redux【引荐】z : = _
Fish Redux 是一个基于 Redux 数据办理的拼装式 flutter 运用结构， 它特别适用于构建中大型的杂乱运用。它的特点是配置式拼装。N A } : T :
一方面咱们将D @ j r一个大的页面，对视图和数据层层拆解为相互独立的 Component|Adaptec f x ^ F * w T Ir，上层担任拼装，基层担d l H # 7 Q任完成；
另一方面将 Cv y y 0 1 domponent|Adapter 拆分为 View，Reducer，Effect 等相互独立的上下文无关函数。
所以它会非常洁净K N o S ，易保护，易协作。
Fish Redux 的创意A p首要来自于 Redux， Elm， Dva 这样的优异结构。而 Fish Redux 站在巨人的膀子上，将会集V U k，分治，复用，隔离做的更进一步。
2.7 P @ ) w Q W ; 4 %rovide
和Scoped_model相同，Provide也是凭借了InheritWidget，将同享状况放到顶层MaterialApp之上。底层部件经过Provier获取该状况，并经过混合ChanT ^ N ` j MgeNotifier告知依赖于该状@ V U u 2 B况的组件改写。
Provide还供给了Provide.stream，让咱们能够以处理流的办法处理数据，不过现在还有一些问题，不引荐B i J { @ U +运用。
2.6 Provider 【引荐】
2019 Googl2 u ) xe I/O 大会上重磅音讯出了支撑 flutter_web 之外，. u ! C #另一个就是弃用之前? T _ % p的状况办理 Provide，转而| & B引荐类似的b K * 2 h k F p库 Provider；尽管只要一个字母之差运? z @ 7 T用办法不同却很大；小菜开始学习一下新的状况办理库 Provider；
Flutter 针@ U f f w 1对不同类型目标供给了多种不同的 Provider = | h；Provider 也是凭借了 InheritWidget，将同享状况放到顶层 MaterialApp 之上;
3& ^ s m – 实际开发中遇到的坑
3.1 ⚠️ProvideH # ur中怎么抉择 Consumer 还是 Selector
当咱们需求更新页面的时分，咱们会用notify* v m _ 7 kListeners();
可是假如咱们用Consumer来包裹一个listview咱们打印会发现已经build过的item都会从头的build一次。
其实这样有一点不合理，由于咱们只需求更新的是其中一个item。
这时分假如咱们用Selector来B l { o h 3 h处理的话就会发现大有不同。它只会build咱们需求更新的那个item这样的话就愈加合理。
可是运用Sel5 c 6 5 y t A ` hector的话，需求注意的是shouldRebuild用什么来决议是否从头build
3.2 ⚠️Provider运用Provider.of(context) 获] f N $ + a & L取顶层数据的坑
假如咱$ E s O D H们APage运用j l L W H n A IProvider.of(context) 获取顶层数据，然后BPage对数据进行了更改，其实会影响到APage的然后会从头运_ n R =转其 build。
其实咱们command点击of进到底层代码发现，除了context以外还有一个参数listen。
假如f X m G * &咱们在AP] K A U ) {age设置l K e H ( _ r ?listend ( ( u A：false，这样就不会由于BPage的操作影响V U , ~ ] : e S到AP= v z B Q $ _ E :age了
3.3 ⚠️SingleTickerProviderStateMixin与TickerProviderStateMi= I X p ( : 3xin的坑
当运用vsync: this的时分，State目标有必要with SingleTickerProviderStateMixin或TickerProviderStateMm h . , , $ixin
首先咱们要搞清楚SingleTickerProviderStateMixin于TickerProviderStB V }at7 c l z } }eMixin的区别：
TickerProviderStateMixin适用于多AnimationController的状况
Single, E J d D ~Ti4 ) x * U RckerProviderStateMixinS n D &适用于单个Ak y ) L v - ~nimationController的状况
其实非有必要用TickerProviderSk f E z ~ itateMixin，主张是用SingleTickerProviderSt9 D n M P , c lateMixin的。
1.由于L { M M 2假如 APage 运用 with TickerProviderStateMi9 e a K { Z p rxin，当从APage 跳转到BPage的5 S % q v时分或从BPage返回到APage的时分你打印会发现都调用了build办法。
2.假如不运用 with TickerProviderStateMixin，当从APage 跳转到BPage的时分或从BPage返回到APage的时分都不会调用了build办法。
参考来历：
State management
Flutter移动运用：状况办理
Flutter | 状况办理攻略篇——Provider
八种 Flutter 状况办理-深入谈论
