美文网首页
ChangeNotifier、provider和MultiPro

ChangeNotifier、provider和MultiPro

作者: 晓函 | 来源:发表于2020-05-14 20:08 被阅读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(),
  ));
}

相关文章

网友评论

      本文标题:ChangeNotifier、provider和MultiPro

      本文链接:https://www.haomeiwen.com/subject/vumxohtx.html