Question

你好，我试图使用“ pin_code_text_field：^ 1.5.1”创建一个Mpin菜单。我已经为pin_code_text_field插件创建了一个dart文件，现在我的下一个目标是激活已经完成6位的按钮在引脚上，但是当我在变量上使用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);
  }
        );

  }


}

Answer 1

设置以下代码

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

并删除onDone部分。

Answer 2

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

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

希望这会有所帮助

SetState不更新小部件

2 个答案: