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);
});

事件侦听器如下所示：

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);
});

---

因此，实时更新的文本确实会出现在控制台中。但是，

subfixicon

从未显示。由于TextFormField没有一个

onChange

事件，如何显示/隐藏这个

supplexicon

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

---

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

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