Flutter状态管理：Provider使用之ChangeNotifierProvider

Provider类型

ChangeNotifierProvider实践

Top1

导入provider库

dependencies:flutter:sdk: flutterprovider: ^4.3.1

Top2

注册通知：定义一个ChangeNotifier，管理需要监听状态的数据模型。

///1:定义一个ChangeNotifier，来负责数据的变化通知
class TextValueAvaliableNotifier extends ChangeNotifier {bool _textValueAvaliable1 = false;bool _textValueAvaliable2 = false;bool _textvalueAvaliable3 = false;bool isTextValueAvaliable() => _textValueAvaliable1;void setTextValueAvaliable1(bool result) {_textValueAvaliable1 = result;notifyListeners();}bool isTextValueAvaliable2() => _textValueAvaliable2;void setTextValueAvaliable2(bool result) {_textValueAvaliable2 = result;notifyListeners();}bool isTextValueAvaliable3() => _textvalueAvaliable3;void setTextValueAvaliable3(bool result) {_textvalueAvaliable3 = result;notifyListeners();}
}

Top3

使用ChangeNotifierProvider注册通知

ChangeNotifierProvider<TextValueAvaliableNotifier>.value(value: mTextAvaliableChangeNotifier,

Top4

Consumer接收通知消息，并改变UI

Consumer<TextValueAvaliableNotifier>(builder: (context, textValueAvaliableNotifier, child) {return changePWBuild(context,'设置新密码：',mTextAvaliableChangeNotifier.isTextValueAvaliable2(),newpwNode,twoPWNode,newPWEC,);}),

流程图

class MineChangePWPage extends StatefulWidget {@overrideMineChangePWPageState createState() => MineChangePWPageState();
}class MineChangePWPageState extends State<MineChangePWPage> {TextEditingController oldPWEC = new TextEditingController();FocusNode oldNode = FocusNode();TextEditingController newPWEC = new TextEditingController();FocusNode newpwNode = FocusNode();TextEditingController twoPWEC = new TextEditingController();FocusNode twoPWNode = FocusNode();///TODO1 注册通知TextValueAvaliableNotifier mTextAvaliableChangeNotifier =TextValueAvaliableNotifier();@overridevoid initState() {super.initState();oldPWEC.addListener(() {if (oldPWEC.text.length > 0) {if (!mTextAvaliableChangeNotifier.isTextValueAvaliable()) {mTextAvaliableChangeNotifier.setTextValueAvaliable1(true);}} else {if (mTextAvaliableChangeNotifier.isTextValueAvaliable()) {mTextAvaliableChangeNotifier.setTextValueAvaliable1(false);}}});newPWEC.addListener(() {if (newPWEC.text.length > 0) {if (!mTextAvaliableChangeNotifier.isTextValueAvaliable2()) {mTextAvaliableChangeNotifier.setTextValueAvaliable2(true);}} else {if (mTextAvaliableChangeNotifier.isTextValueAvaliable2()) {mTextAvaliableChangeNotifier.setTextValueAvaliable2(false);}}});twoPWEC.addListener(() {if (twoPWEC.text.length > 0) {if (!mTextAvaliableChangeNotifier.isTextValueAvaliable3()) {mTextAvaliableChangeNotifier.setTextValueAvaliable3(true);}} else {if (mTextAvaliableChangeNotifier.isTextValueAvaliable3()) {mTextAvaliableChangeNotifier.setTextValueAvaliable3(false);}}});}void saveChage() {FocusScope.of(context).requestFocus(FocusNode());}@overrideWidget build(BuildContext context) {return Scaffold(appBar: BaseAppBar(title: '修改密码'),body: Container(padding: EdgeInsets.all(16),child: ListView(children: <Widget>[ClipRRect(borderRadius: BorderRadius.circular(8),///TODO2用ChangeNotifierProvider来订阅注册的通知child: ChangeNotifierProvider<TextValueAvaliableNotifier>.value(value: mTextAvaliableChangeNotifier,child: Column(children: <Widget>[///TODO3 接收通知UI做出相应调整Consumer<TextValueAvaliableNotifier>(builder: (context, textValueAvaliableNotifier, child) {return changePWBuild(context,'旧密码：',mTextAvaliableChangeNotifier.isTextValueAvaliable(),oldNode,newpwNode,oldPWEC,);}),Divider(height: 1.0,indent: 0.0,color: BaseColor.colorFFEBEBEB),Consumer<TextValueAvaliableNotifier>(builder: (context, textValueAvaliableNotifier, child) {return changePWBuild(context,'设置新密码：',mTextAvaliableChangeNotifier.isTextValueAvaliable2(),newpwNode,twoPWNode,newPWEC,);}),Divider(height: 1.0,indent: 0.0,color: BaseColor.colorFFEBEBEB),Consumer<TextValueAvaliableNotifier>(builder: (context, textValueAvaliableNotifier, child) {return changePWBuild(context,'确认新密码：',mTextAvaliableChangeNotifier.isTextValueAvaliable3(),twoPWNode,FocusNode(),twoPWEC,);}),SizedBox(height: 40),Container(height: 48,width: BaseSize.screenWidth - 76,child: FlatButton(color: BaseColor.colorFF03B798,onPressed: saveChage,child: Text('确定',style: BaseTextStyle.styleFFFFFF_16,),shape: RoundedRectangleBorder(side: BorderSide.none,borderRadius: BorderRadius.all(Radius.circular(48)),),),),],),),),],),),backgroundColor: BaseColor.colorFFF5F5F5,);}///修改密码Widget changePWBuild(BuildContext context,String name,bool show,FocusNode focusNode,FocusNode nextFocusNode,TextEditingController _textEditingController,) {return Container(color: BaseColor.colorFFFFFFFF,height: 56,padding: EdgeInsets.only(left: 16, right: 0),child: Row(children: <Widget>[SizedBox(width: 100,child: Text(name,style: BaseTextStyle.style999999_14,),),Expanded(child: TextField(focusNode: focusNode,controller: _textEditingController,style: BaseTextStyle.style262626_14, //文本框内容风格textInputAction: TextInputAction.next, //右下角键盘文字：下一项obscureText: true, //明/密文inputFormatters: <TextInputFormatter>[LengthLimitingTextInputFormatter(16) //限制长度],onEditingComplete: () =>FocusScope.of(context).requestFocus(nextFocusNode),decoration: InputDecoration(border: InputBorder.none, // 去掉下划线hintText: '请填写', //占位字符hintStyle: BaseTextStyle.styleD9D9D9_14, //占位字符样式suffixIcon: show? IconButton(icon: ImageIcon(AssetImage(IconUtils.getIconPath('quxiaoshuru'))),onPressed: () {WidgetsBinding.instance.addPostFrameCallback((_) => _textEditingController.clear());}): null),onChanged: (value) {///TODO4 使用Provider.of来更新数据Provider.of<TextValueAvaliableNotifier>(context, listen: false).setTextValueAvaliable1(value.length > 0);},),),],),);}class TextValueAvaliableNotifier extends ChangeNotifier {bool _textValueAvaliable1 = false;bool _textValueAvaliable2 = false;bool _textvalueAvaliable3 = false;bool isTextValueAvaliable() => _textValueAvaliable1;void setTextValueAvaliable1(bool result) {_textValueAvaliable1 = result;notifyListeners();}bool isTextValueAvaliable2() => _textValueAvaliable2;void setTextValueAvaliable2(bool result) {_textValueAvaliable2 = result;notifyListeners();}bool isTextValueAvaliable3() => _textvalueAvaliable3;void setTextValueAvaliable3(bool result) {_textvalueAvaliable3 = result;notifyListeners();}
}

转自：Flutter状态管理：Provider使用之ChangeNotiFlutter状态管理：Provider使用之ChangeNotifierProviderFlutter状态管理：Provider使用之ChangeNoti

详细使用参考：Flutter Provider状态管理_一叶飘舟的博客-CSDN博客_flutter状态管理provider