SetState 不更新小部件答案

【问题标题】：SetState not Updating the WidgetSetState 不更新小部件
【发布时间】：2020-04-08 05:45:14
【问题描述】：

您好，我正在尝试使用“pin_code_text_field: ^1.5.1”创建 Mpin 菜单在引脚上，但是当我在变量上使用 setState 时，值会发生变化，但 UI 或按钮没有更新，这里是下面的代码。您能否提出问题所在以及此类的最佳实践。

没有 pin 或未完成时的非活动按钮

pin 完成时激活按钮

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);
  }
        );

  }


}

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies

【解决方案1】：

设置以下代码

onTextChanged: (text) {
            setState(() {
              hasError = false;
              initPinButtonInActive = true;
              if(text.length== 6 ){
              hasError = true;
              initPinButtonInActive = false;
              }
            });
          },

并删除 onDone 部分。

【讨论】：

感谢现在的工作。先生，您能解释一下是什么问题，这样我就知道了。
onDone 在您从文本字段中删除指针时调用，但 ontextchanged 会继续检查文本字段数据。在您的情况下，您只使用一个文本字段，因此指针仅停留在该文本字段上，因此无法更改ontextfieldchange 的 state.so 使用优于 onDone 事件。

【解决方案2】：

我相信你想要做的是在这样调用 onDone 时在 setState 中设置 text 属性或控制器

 onDone: (text){
                print(text.length);
                if(text.length == 6){
                  setState(() {
                    print(text.length);
                    initialPincontroller.text = text;
                    hasError = true;
                    initPinButtonInActive = false;
                  });
                }

希望对你有帮助

【讨论】：

先生，我希望按钮在 pin 完成时处于活动状态，而在 pin 未完成时处于非活动状态