带有动态后缀Icon的Flutter TextFormField

时间:2019-05-20 23:19:05

标签: flutter

目标是显示/隐藏一个后缀图标,以清除Flutter TextFormField上的字段。只有在框中有文本的情况下,它才应该可见。

该字段如下:

TextFormField(                  
  controller: _usernameController,
  decoration: InputDecoration(
    labelText: 'Username',
    suffixIcon: usernameNotEmpty == true ? IconButton(
      onPressed: () {
        _usernameController.clear();
      },
      icon: Icon(Icons.cancel, color: Colors.grey)
    ) : null
  ),                  
)

事件监听器如下:

var usernameNotEmpty;
_usernameController.addListener(() {
   usernameNotEmpty = _usernameController.text.length > 0 ? true : false; 
   print(_usernameController.text);
});

因此实时更新的文本确实出现在控制台中。但是suffixIcon从未显示。由于TextFormField没有onChange事件,如何显示/隐藏此suffixIcon

2 个答案:

答案 0 :(得分:1)

使用suffix,而不是suffixIcon。后缀小部件的行为与您预期的一样。如果 TextField 不为空,它将显示。

TextFormField(                  
  controller: _usernameController,
  decoration: InputDecoration(
    labelText: 'Username',
    suffix: IconButton(
      onPressed: () {
        _usernameController.clear();
      },
      icon: Icon(Icons.cancel, color: Colors.grey)
    )
  ),

答案 1 :(得分:0)

清理并工作:

_usernameController.addListener(() {
  setState(() {}); 
});

TextFormField(                  
  controller: _usernameController,
  decoration: InputDecoration(
    labelText: 'Username',
    suffixIcon: _usernameController.text.length > 0 ? IconButton(
      onPressed: () {
        _usernameController.clear();
      },
      icon: Icon(Icons.cancel, color: Colors.grey)
    ) : null
  ),
)