Flutter中,有几种方式实现使一个TextFiled在无文本输入时,右侧的清空按钮隐藏,有文本输入时,右侧的清空按钮显示。
时间: 2023-02-12 09:21:28 浏览: 78
Flutter中可以使用TextField的"suffixIcon"属性实现这个功能。可以在TextField的"onChanged"回调中监听文本输入变化,根据文本长度是否大于0来判断是否显示清空按钮。可以使用"IconButton"组件来实现清空按钮。
示例代码如下:
```
TextField(
onChanged: (text) {
setState(() {
_hasText = text.isNotEmpty;
});
},
suffixIcon: _hasText ? IconButton(
icon: Icon(Icons.clear),
onPressed: () {
setState(() {
_controller.clear();
_hasText = false;
});
},
) : null,
)
```
另外还可以使用TextEditingController的clear() 方法清空文本。
另外可以使用TextField 的clearButtonMode属性来实现。
```
TextField(
clearButtonMode: TextInputAction.done,
)
```
clearButtonMode 可以接受五种参数,分别为:
- never 不显示
- whileEditing 当正在编辑时显示
- always 总是显示
- done 当编辑完成时显示
- go 仅当textField是用于输入URL或电子邮件地址时显示
这种方式相比上面的会更简单。
阅读全文