如果你还不了解Consumer，请移步我的上一篇博文，Flutter Provider状态管理-Consumer，此篇文章是基于上一篇的基础来的。
从上一篇中我们知道Consumer可以实现UI页面的局部刷新，摒弃掉传统的setState，让UI的表现上一个台阶。但是我在实际的业务场景使用Consumer却遇到了很多问题。
举个栗子：
一个计数器页面，这不是一个简单的计数器页面，因为它有两个Text，我们分别命名为Text1 和Text2，以及两个Button，分别是Button1和Button2。点击Button1改变Text1的值，改变Button2改变Text2，值的改变都是通过同一个CounterProvider，只不过我们维护了两个数据而已，这时候我们希望的是点击Button1只有Text1会重绘，Text2保持不变，但是实际情况令人寒心。。。
我们用Consumer来获取CounterProvider，只要是值改变了都会通知它的宿主刷新UI。所以点击任何一个Button都会导致Text1和Text2的重绘，下面我们来看一下具体的代码
1.counter_provider.dart
import 'package:flutter/material.dart';
class CounterProvider with ChangeNotifier {
int _count = 0;
int _count1 = 100;
int get value => _count;
int get value1 => _count1;
void increment() {
_count++;
notifyListeners();
}
void increment1() {
_count1++;
notifyListeners();
}
}增加了变量_count1以及方法increment1()，并提供相应的get方法
2.my_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart';
class MyPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyPageState();
}
class MyPageState extends State<MyPage> {
///初始化CounterProvider
CounterProvider _counterProvider = new CounterProvider();
@override
Widget build(BuildContext context) {
print('页面重绘了。。。。。。。。。。。');
//整个页面使用ChangeNotifier来包裹
return ChangeNotifierProvider(
builder: (context) => _counterProvider,
child:
//child里面的内容不会因为数据的改变而重绘
Scaffold(
appBar: AppBar(
title: Text('my page'),
),
body: Center(
child:
//使用Cousumer来获取Provider
Column(
children: <Widget>[
//使用Consumer来获取CounterProvider，为Text提供数据
Consumer(builder: (BuildContext context,
CounterProvider counterProvider, Widget child) {
print('Text1重绘了。。。。。。');
return Text(
//获取数据
'Text1 : ${counterProvider.value}',
style: TextStyle(fontSize: 20),
);
}),
//使用Consumer来获取CounterProvider，为Text提供数据
Consumer(builder: (BuildContext context,
CounterProvider counterProvider, Widget child) {
print('Text2重绘了。。。。。。');
return Text(
//获取数据
'Text2 : ${counterProvider.value1}',
style: TextStyle(fontSize: 20),
);
}),
RaisedButton(
onPressed: () {
print('Button 1被点击了。。。。。。。。。。');
_counterProvider.increment();
},
child: Text('Button1'),
),
RaisedButton(
onPressed: () {
print('Button 2被点击了。。。。。。。。。。');
_counterProvider.increment1();
},
child: Text('Button2'),
)
],
)),
),
);
}
}Text1和Text2都由两个Consumer分别包裹，我们希望的效果是：
- 点击Button1引起Text1的重绘，Text2中的print语句不执行
- 点击Button2引起Text2的重绘，Text1中的print语句不执行
我们来看一下实际的情况：
点击button1时
点击button2时
无论是点击那个Button都会引起Text1和Text2的重绘，这明显与我们使用Provider的初衷是违背的。而在实际的使用场景中，这种情况会带来比预想更差的UI表现。
Provider的设计者毫无疑问也发现了这个问题，所以推出了Selector来解决这类问题。
下面我们来改造计数器demo，将Consumer替换成Selector。国际惯例，先瞅一眼Selector的构造方法：
Selector({
Key key,
//当父widget请求更新或者selector的返回值与之前的返回值不一样时会调用builder
@required ValueWidgetBuilder<S> builder,
//selector返回具体的值，返回的值必须继承自==而且不能为null
@required S Function(BuildContext, A) selector,
Widget child,
}) : assert(selector != null),
super(
key: key,
builder: builder,
selector: (context) => selector(context, Provider.of(context)),
child: child,
);Selector控制的粒度比Consumer更细，Consumer是监听一个Provider中所有数据的变化，Selector则是监听某一个/多个值的变化。具体的代码：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart';
class MyPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyPageState();
}
class MyPageState extends State<MyPage> {
///初始化CounterProvider
CounterProvider _counterProvider = new CounterProvider();
@override
Widget build(BuildContext context) {
print('页面重绘了。。。。。。。。。。。');
//整个页面使用ChangeNotifier来包裹
return ChangeNotifierProvider(
builder: (context) => _counterProvider,
child:
//child里面的内容不会因为数据的改变而重绘
Scaffold(
appBar: AppBar(
title: Text('my page'),
),
body: Center(
child:
//使用Cousumer来获取Provider
Column(
children: <Widget>[
//用Selector替换Consumer
Selector(
builder: (BuildContext context, int data, Widget child) {
print('Text 1 重绘了。。。。。。。。。。');
return Text(
//获取数据
'Text1 : ${data.toString()}',
style: TextStyle(fontSize: 20));
}, selector:
(BuildContext context, CounterProvider counterProvider) {
//这个地方返回具体的值，对应builder中的data
return counterProvider.value;
}),
Selector(
builder: (BuildContext context, int data, Widget child) {
print('Text 2 重绘了。。。。。。。。。。');
return Text(
//获取数据
'Text2 : ${data.toString()}',
style: TextStyle(fontSize: 20),
);
},
selector: (BuildContext context,
CounterProvider counterProvider) {
return counterProvider.value1;
}),
RaisedButton(
onPressed: () {
print('Button 1被点击了。。。。。。。。。。');
_counterProvider.increment();
},
child: Text('Button1'),
),
RaisedButton(
onPressed: () {
print('Button 2被点击了。。。。。。。。。。');
_counterProvider.increment1();
},
child: Text('Button2'),
)
],
)),
),
);
}
}经过上面代码的改造，我们再来看一下点击Button的效果，可以很明显看到点击Button1只会导致Text1的绘制，点击Button2置灰导致Text2的绘制，至此，Consumer留下的坑完美解决！！
思考：
依然沿用之前的代码，Scaffold中body的child是一个center组件，如果我们用Consumer包裹住Center会是什么效果？点击按钮还能像上面那样局部更新不影响其它组件嘛？伪代码如下所示
//用Consumer把selector包裹起来，Consumer和两个Selector都用的是CounterModel
Consumer(builder: (_, counterProvider, _) {
return Column(
children: <Widget>[
Selector(builder: (_, value, _) {
return Text(value);
}, selector: (_, counterProvider) {
return counterProvider.value;
},),
Selector(builder: (_, value1, _) {
return Text(value1);
}, selector: (_, counterProvider) {
return counterProvider.value1;
},),
],
)
});答案是否定的，因为Selector和Consumer都是用的CounterProvider，如果Selector监听的值发生变化，那么Cousumer页能监听到，所以会触发Consumer包裹的组件整体重绘。
再来一个问题：
要是我把Consumer换成Selector呢，并且用Button3去控制最外层Selector监听的值，伪代码如下：
//selector中还包含了两个子selector
Selector(
builder: (_, value2, _) {
return Column(
children: <Widget>[
//这个Text使用了value2
Text(value2),
Selector(
builder: (_, value, _) {
return Text(value);
},
selector: (_, counterProvider) {
return counterProvider.value;
},
),
Selector(
builder: (_, value1, _) {
return Text(value1);
},
selector: (_, counterProvider) {
return counterProvider.value1;
},
),
],
);
},
selector: (_, counterProvider) {
return counterProvider.value2;
},
);先看一下结果
我们看到点击Button1的时候只有Text1重绘
点击Button2的时候只有Text2重绘，
点击Button3的时候会导致最外层Selector包裹的内容整体重绘，由于Text1和Text2也属于它的child，所以重绘也是必然的
所以我们在使用Selector的时候也小心一些，包裹的粒度尽可能的小，Consumer更应该如此。至于在实际项目中如何使用就看各位看官的选择了。
好了，差不多就是这些，如果有问题希望大家提出来交流，共同学习！有错误之处欢迎指正
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
