如何根据条件将禁用按钮转换为启用按钮

Question

我是 Flutter 的新手，只要某些文本字段为空，我就试图禁用按钮，所以我制作了 3 个文本控制器作为 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

您不需要任何其他库来执行此操作。Flutter 开箱即用，您可以确保不会在每次击键时重建整个树。

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

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'),
);
},
),
]);
}
}

Answer 2

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

所以你有两个选择：

1 - 侦听每个TextEditingController的变化并调用您的方法isEmpty()

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

选项 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;
}
}

Answer 3

您可以使用嵌套的文本编辑观察程序