Flutter TextFormField 带有动态后缀图标答案

【问题标题】：Flutter TextFormField with dynamic suffixIconFlutter TextFormField 带有动态后缀图标
【发布时间】：2019-10-07 07:37:48
【问题描述】：

目标是显示/隐藏一个 suffixIcon，用于清除 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？

【问题讨论】：

标签： flutter

【解决方案1】：

清理并工作：

_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
  ),
)

【讨论】：

【解决方案2】：

使用后缀，而不是后缀图标。后缀小部件的行为与您预期的一样。如果 TextField 不为空，则会显示。

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

【讨论】：