ChangeNotifier、provider和MultiProvider

以前为了监听某个对象中成员的变化，自己写了一个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(),
  ));
}

最后编辑于：2022.01.15 16:32:18