SetState 不更新小部件

Question

你好，我正在尝试使用 "pin_code_text_field: ^1.5.1" 创建一个 Mpin 菜单我已经为 pin_code_text_field 插件创建了一个 dart 文件并且现在正在工作我的下一个目标是激活完成的按钮，如果他们是pin 上已经有 6 位数字，但是当我在变量上使用 setState 时，值正在改变，但是 UI 或按钮没有更新这里是下面的代码。您能否提出问题所在以及此类最佳实践。

无引脚或未完成时按钮无效

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

  }


}

Answer 1

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

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

希望对您有所帮助

Answer 2

设置以下代码

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

并删除 onDone 部分。

SetState 不更新小部件

SetState not Updating the Widget

flutter

flutter-dependencies

flutter-layout