ChangeNotifier、provider和MultiPro
2020-05-14 本文已影响0人
晓函
以前为了监听某个对象中成员的变化,自己写了一个ChangedCallback类,后来发现原来import 'package:flutter/material.dart';中自带ChangeNotifier
class ChangedCallback{
List<Function()> _listeners = [];
listen(Function() onChanged){
_listeners.add(onChanged);
}
notifyListeners(){
for(var onChanged in _listeners){
onChanged();
}
}
}
ChangeNotifier
继承ChangeNotifier可以让外部调用者在逻辑代码中手动addListener来监听这个对象的所有成员的值变化
调用notifyListeners则会通知所有监听者
定义:
import 'package:flutter/material.dart';
class UserInfo extends ChangeNotifier{
String _id;
String _nick;
String get id=>_id;
String get nick=>_nick;
void setNick(String nick){
this._nick=nick;
//通知更新
notifyListeners();
}
}
使用:
initState(){
//监听
userInfo.addListener(() {
print('nick改变:$nick');
});
}
provider
如果需要让ui自动监听变化呢?那就需要provider
provider可以让ui自动监听变化,有变化自动刷新。
简单两步:
1、在main函数中的runApp加上ChangeNotifierProvider
2、Text('昵称:${context.watch<UserInfo>().nick}');
这样ui代码就可以自动监听userInfo的变化了,
userInfo调用notifyListeners则会通知所有正在监听此对象的UI更新数据。
完整代码:
定义:
class UserInfo extends ChangeNotifier{
String _id;
String _nick;
String get id=>_id;
String get nick=>_nick;
void setNick(String nick){
this._nick=nick;
//通知更新
notifyListeners();
}
}
main函数:
void main(){
runApp(
ChangeNotifierProvider.value(
value: UserInfo(),
child: MyApp(),
)
);
}
使用:
//方式一:
Text('昵称:${Provider.of<UserInfo>(context).nick}');
//方式二(局部刷新):
Consumer<UserInfo>(
builder: (context, userInfo, child)=>Text('昵称:${userInfo.nick}')
);
//方式三:
Text('昵称:${context.watch<UserInfo>().nick}');
Consumer与Provider.of 的区别:
1、Consumer是个widget,Provider.of是个静态方法;
2、Consumer 是进行局部刷新,而使用Provider.of获取监听状态时,与Provider.of相关的context下的widget都会被rebuild;
3、Provider.of可以通过设置listen false 不监听状态变化从而不刷新页面,只获取当前最新状态或者调用改变状态的方法。
修改:
//方法1:
Provider.of<UserInfo>(context).setNick('Lucy');
//方法2:
//因为setNick方法内部调用了notifyListeners(),可以通知到依赖组件rebuild
userInfo.setNick('Lucy');
MultiProvider
如果UI有多个State需要监听,比如userState,messagesState,就需要用到MultiProvider,需要在把main函数中runApp参数改一下。
import 'package:provider/provider.dart';
import 'package:provider/single_child_widget.dart';
void main() {
List<SingleChildWidget> providers = [
ChangeNotifierProvider(create: (ctx)=>GlobalVar.userState),
ChangeNotifierProvider(create: (ctx)=>GlobalVar.dotState)
];
runApp(MultiProvider(
providers: providers,
child: MyApp(),
));
}