button - 如何根据条件将禁用按钮变为启用按钮
问题描述
我是 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)按钮仍然被禁用。
解决方案
你不需要任何额外的库来做到这一点。Flutter 开箱即用,您可以确保不会在每次击键时重建整个树。
TextEditingController
扩展ValueNotifier<TextEditingValue>
这意味着您可以使用ValueListenableBuilder
frommaterial
包来收听文本更改。
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'),
);
},
),
]);
}
}
推荐阅读
- rxjs - Rx.js 可观察订阅 - 按钮点击未捕获
- javascript - 改变数组结构
- python - 如何将namedtuple转换为元组
- php - 如何在php中循环通过web服务获取的参数
- javascript - 获取 API css-loader
- angular - 在组件 service.ts url:“http://localhost:4200/data/products.json”未找到
- angular - 一次只选择一个复选框,并在一个特定复选框被选中或两个复选框都未选中时执行特定任务
- ionic3 - IOS无法拍照或从图库中选择图像
- android - 如何重定向 URL?
- c# - 如何在给定的指定时间(包括 OnTimeEvent)停止此异步功能?