flutter文本输入框TextFormField后如何显示清除按钮,点击后清除输入内容?

码云
2020-11-09 09:33

flutter中的文本输入框TextFormField可以通过suffixIcon实现输入内容的清除,示例代码如下:

//_usernameController是输入框的控制对象
_usernameController.addListener(() {
  setState(() {}); 
});

TextFormField(                  
  controller: _usernameController,
  decoration: InputDecoration(
    labelText: '用户名',
    //文本框的尾部图标
    suffixIcon: _usernameController.text.length > 0 ? IconButton(  //如果文本长度不为空则显示清除按钮
      onPressed: () {
        _usernameController.clear();
      },
      icon: Icon(Icons.cancel, color: Colors.grey)
    ) : null
  ),
)

 

全部评论