3

我是 Flutter 的新手，只要某些文本字段为空，我就会尝试禁用按钮，因此我制作了 3 个文本控制器来充当 3 个文本字段的控制器，并且我制作了一个功能来检查功能是：

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


          }
        });
       return isButtonEnabled; 
  }

文本字段的代码是：

TextField(
                  onSubmitted:null,

                  controller: textEditingController3,


                )

然后我为按钮编写代码如下：Center(

  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）按钮仍然被禁用。

4

3 回答 3

5

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

TextEditingController扩展ValueNotifier<TextEditingValue>这意味着您可以使用ValueListenableBuilderfrommaterial包来收听文本更改。

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'),
          );
        },
      ),
    ]);
  }
}
于 2021-04-05T10:43:52.827 回答
4

您可以在此处阅读有关 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 = TextEditingController(text: "name");
    textEditingController2 = TextEditingController(text: "email");
    textEditingController3 = TextEditingController(text: "place");

    if ((textEditingController.text.trim() != "") && (textEditingController2.text.trim() != "") && (textEditingController3.text.trim() != "")) {
        isButtonEnabled = true;
    } else {
        isButtonEnabled = false;
    }
}
于 2018-09-23T18:25:18.207 回答
1

您可以使用嵌套的TextEditingWatcher s

于 2020-02-05T18:18:43.717 回答