如何根据条件将禁用按钮变成启用按钮
how to turn disabled button into enabled button depending on conditions
我是 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)该按钮仍处于禁用状态。
您可以在此处阅读有关 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;
}
}
您可以使用嵌套 TextEditingWatchers
你不需要任何额外的库来做到这一点。 Flutter 开箱即用,您可以确保不会在每次击键时重建整棵树。
TextEditingController
extends 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'),
);
},
),
]);
}
}
我是 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)该按钮仍处于禁用状态。
您可以在此处阅读有关 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;
}
}
您可以使用嵌套 TextEditingWatchers
你不需要任何额外的库来做到这一点。 Flutter 开箱即用,您可以确保不会在每次击键时重建整棵树。
TextEditingController
extends 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'),
);
},
),
]);
}
}