Flutter状态管理：Provider使用之ChangeNotifierProvider
Provider类型
ChangeNotifierProvider实践
Top1
导入provider库
dependencies:
flutter:
sdk: flutter
provider: ^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 {
@override
MineChangePWPageState 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();
@override
void 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());
}
@override
Widget 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();
}
}
参考1
参考2