flutter - SetState 不更新小部件
问题描述
您好,我正在尝试使用“pin_code_text_field:^1.5.1”创建一个 Mpin 菜单但是当我在变量上使用 setState 时,值正在改变但 UI 或按钮没有更新这里是下面的代码。您能否提出问题所在以及此类的最佳实践。
引脚完成时的活动按钮
class _setMPin extends State<setMPin>{
TextEditingController initialPincontroller = TextEditingController(text: "");
bool initPinButtonInActive = true;
@override
void initState(){
super.initState();
initPinButtonInActive = true;
hasError = true;
}
void nextPinVerification(){
print("done success");
controller.clear();
}
@override
Widget build(BuildContext context) {
Widget initialPin = Container(
width: 400,
child: Column(
children: <Widget>[
GestureDetector(
child: new PinCodeTextField(
autofocus: true,
controller: initialPincontroller,
hideCharacter: true,
highlight: true,
highlightColor: Colors.blue,
defaultBorderColor: Colors.black,
pinBoxWidth: 60,
pinBoxHeight: 50,
hasTextBorderColor: Colors.green,
maxLength: pinLength,
hasError: hasError,
maskCharacter: "*",
onTextChanged: (text) {
setState(() {
hasError = false;
initPinButtonInActive = true;
});
},
onDone: (text){
print(text.length);
if(text.length == 6){
setState(() {
print(text.length);
hasError = true;
initPinButtonInActive = false;
});
}
},
),
),
Visibility(
child: Text(
'Incorrect Pin Format',
style: TextStyle(color: Colors.red),
),
visible: hasError,
),
Row(
children: <Widget>[ Expanded(
child:Padding(
padding: EdgeInsets.only(left: 5,top: 20),
child: ButtonTheme(
minWidth: 190,
height: 50,
child: new FlatButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0),
side: BorderSide(color: Colors.white)
),
child: new Text("Done",style: TextStyle(color: Colors.white),),
color: Colors.blue,
disabledColor: Colors.blue[200],
onPressed: initPinButtonInActive ? null : nextPinVerification
),
)
)
)],
)
],
)
);
return WillPopScope(
child: MaterialApp(
home: Scaffold(
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
initialPin,
],
),
],
),
),
),
onWillPop: (){
Navigator.pop(context);
return Future.value(false);
}
);
}
}
解决方案
设置以下代码
onTextChanged: (text) {
setState(() {
hasError = false;
initPinButtonInActive = true;
if(text.length== 6 ){
hasError = true;
initPinButtonInActive = false;
}
});
},
并删除 onDone 部分。
推荐阅读
- postgresql - 如何将未知长度的相同字符链从字符串替换为唯一出现或它?
- amazon-web-services - 仅在收集到固定数量的数据后才执行 AWS Lambda(具有多个数据)
- python - 访问 Flask 测试响应中的所有 cookie
- maven - 库项目的存储库单元测试
- javascript - npm“crypto”模块的Nodejs加密问题
- javascript - 我使用 AngularJS 的 js 文件有问题:“未捕获的错误:[$injector:modulerr]”
- angular - Angular:如何在延迟加载的路由中使用外部模块
- r - 二元运算符错误的非数字参数
- c++ - 如何在每次 QTimer 发射时使用 QLabel
- python - 无服务器部署 - LogicalResourceId