SetState未更新小部件

问题描述 投票:1回答:3

[您好,我试图使用“ 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);
  }
        );

  }


}
flutter flutter-layout flutter-dependencies
3个回答
0
投票

尝试重新启动您的应用,而不是热重装。


0
投票

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

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

希望这会有所帮助


0
投票

设置以下代码

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

并删除onDone部分。

© www.soinside.com 2019 - 2024. All rights reserved.