Question

我是新手，我想让按钮禁用，只要某些文本字段为空，所以我将3个textcontrollers用作3个文本字段的控制器，并且我做了一个检查功能功能是：

bool isEmpty(){
    setState(() {
          if(textEditingController.text!=" "&&textEditingController2.text!=" "&& textEditingController3.text!=" "){
            isButtonEnabled=true;


          }
        });
       return isButtonEnabled; 
  }

文本字段的代码为：

TextField(
                  onSubmitted:null,

                  controller: textEditingController3,


                )

然后，我将按钮的代码编写如下：中心（

  child: RaisedButton(
         child: Text("Button 1",style: TextStyle(color:Colors.white),),
          onPressed:isButtonEnabled?(){ print("enabled");}:null,
          color: Colors.red,

            ),

问题是，即使我在文本字段中写入内容，按钮仍保持禁用状态。任何想法？提前致谢。 编辑： 感谢@diegoveloper回答了这个问题，但是如果我想输入初始值并且仅当文本字段具有以下文本字段的值时才希望启用按钮，该怎么办：

@override
  void initState() {
    super.initState();
   textEditingController  = new TextEditingController(text: name);
      textEditingController2  = new TextEditingController(text: email);
         textEditingController3  = new TextEditingController(text: " place");


  }

然后我将isEmpty方法更新为：

bool isEmpty(){
    setState(() {
          if((textEditingController.text!=" ")&&(textEditingController2.text!=" ")&& (textEditingController3.text!=" ")&&(textEditingController!=null)&&(textEditingController2!=null)&&(textEditingController3!=null)){
            isButtonEnabled=true;



          }
          else{
                        isButtonEnabled=false;

          }
        });
       return isButtonEnabled; 
  }

问题是，尽管我为文本字段提供了初始值，但该按钮仍处于禁用状态，而且当我编辑文本字段的3个值时，该按钮仍处于启用状态，但是如果我删除了该文本（我认为这意味着null）按钮仍处于禁用状态。

Answer 1

您可以在此处了解有关TextField的更多信息：https://flutter.io/cookbook/forms/text-field-changes/

所以您有两个选择：

1-监听每个TextEditingController上的更改并调用方法isEmpty()

2-在每个要监听更改的onChanged上添加TextField回调。

选项2

                TextField(
                          onSubmitted:null,
                        onChanged: (val){
                          isEmpty();
                        },
                          controller: textEditingController3,


                        )

注意：不要忘记将ELSE条件添加到isEmpty方法中。

修改

修改您的initState方法以检查您的按钮是否启用（请重构此代码）

        @override
          void initState() {
            super.initState();
           textEditingController  = new TextEditingController(text: name);
              textEditingController2  = new TextEditingController(text: email);
                 textEditingController3  = new TextEditingController(text: " place");

          if((textEditingController.text.trim()!="")&&(textEditingController2.text.trim()!="")&& (textEditingController3.text.trim()!=""){
                    isButtonEnabled=true;

                  }
                  else{
                                isButtonEnabled=false;

                  }
          }
          }

Answer 2

您可以使用嵌套的TextEditingWatcher s

Answer 3

你不需要任何额外的库来做到这一点。 Flutter 具有开箱即用的功能，您可以确保不会在每次击键时重建整个树。

TextEditingController 扩展 ValueNotifier<TextEditingValue> 这意味着您可以利用 ValueListenableBuilder 包中的 material 来监听文本更改。

class MyWidget extends StatelessWidget {
  final TextEditingController _inputController = TextEditingController();

  @override
  void dispose() {
    _inputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      TextField(controller: _inputController),
      ValueListenableBuilder<TextEditingValue>(
        valueListenable: _inputController,
        builder: (context, value, child) {
          return ElevatedButton(
            onPressed: value.text.isNotEmpty ? () {} : null,
            child: Text('I am disabled when text is empty'),
          );
        },
      ),
    ]);
  }
}

如何根据情况将禁用按钮变成启用按钮

3 个答案: