当textInputField在更改文本Flutter上无效时被禁用的按钮 [英] Disabled button when textInputField is invalid on change text Flutter

问题描述

我是Flutter的新手. 我尝试在编译textFormField时禁用按钮，但该按钮无效. 我的问题是，只有在我单击键盘上的确认"而不是同时编译输入时，它才起作用. 所以我想在输入时禁用按钮.

I'm new on Flutter. I'm trying to disabled button while I compile textFormField and it is invalid. My problem is that it works only if I click on "confirm" on keyboard and not while I compile my input. So would like disable button while I write the input.

例如，我已经完成了一次粘贴操作:

I've done a pastebin for example:

https://pastebin.com/q5WuwrCm

class AddCartButton extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return AddCartButtonState();
  }
}
class AddCartButtonState extends State<AddCartButton>{
  TextEditingController myController = TextEditingController();
  bool isValid = false;
  @override
  Widget build(BuildContext context) {
    void _addToCart(){
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("QUANTITY"),
            content: Column(
              children: <Widget>[
                TextFormField(
                    controller: myController,
                    decoration: new InputDecoration(labelText: "quantity"),
                    keyboardType: TextInputType.numberWithOptions(decimal: true),
                    inputFormatters: <TextInputFormatter>[],
                    autovalidate: true,
                    validator: (value) {
                      if (value.isEmpty) {
                        isValid  = false;
                        return "the quantity cannot be empty";
                      } else if (double.tryParse(value) == null) {
                        isValid = false;
                        return "the quantity must be valid number";
                      } else {
                        isValid = true;
                        return null;
                      }
                    }
                )
              ],
            ),
            actions: <Widget>[
              FlatButton(
                  disabledTextColor: Colors.grey,
                  child: Text("add"),
                  onPressed: isValid ? () { print("is valid"); }: null
              )
            ],
          );
        },
      );
    }
  }
}        

推荐答案

您可以在TextEditingController myController上使用addListener()函数.

myController.addListener((){
    //With this, you can "listen" all the changes on your text while
    //you are typing on input
    print("value: ${myController.text}");
    //use setState to rebuild the widget
    setState(() {
        //you can check here if your text is valid or no
        //_isValidText() is just an invented function that returns
        //a boolean representing if the text is valid or not
        if(_isValidText(myController.text)) isValid = true;
        else isValid = false;
    });
});

这篇关于当textInputField在更改文本Flutter上无效时被禁用的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！