如何使用TextEditingController使用“清除”按钮创建TextField？

Question

我试图用清除按钮创建一个TextField，但是当我输入一些值时，没有按我想要的方式显示清除按钮。似乎无法检测到_firstNameController.text的更改。我该如何解决这个问题？

class TextFieldWithClearBtn extends StatefulWidget {
  @override
  _TextFieldWithClearBtnState createState() => _TextFieldWithClearBtnState();
}

class _TextFieldWithClearBtnState extends State<TextFieldWithClearBtn> {
  final TextEditingController _firstNameController = TextEditingController();

  @override
  void dispose {
    super.dispose();
    _firstNameController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextFormField(
        controller: _firstNameController,
        decoration: InputDecoration(
          labelText: "First name",
          suffixIcon: _firstNameController.text.isNotEmpty
            ? GestureDetector(
              onTap: () {
                WidgetsBinding.instance.addPostFrameCallback((_) => _firstNameController.clear());
              },
              child: Icon(Icons.clear, color: Colors.black38),
            )
            : null
        ),
      ),
    );
  }
}

Answer 1

您suffixIcon代替了suffix。这样，如果clear不在焦点上，则textformfield按钮将不可见，并且在您点击该字段时将显示icon。此外，键入内容后点击clear图标时，它将清除该字段。下面的工作示例代码：

TextFormField(
      controller: _firstNameController,
                      textAlign: TextAlign.left,
                      cursorColor: Colors.white,
                      onChanged: (value) {

                      },
                      style: TextStyle(color: Colors.white),
                      decoration: InputDecoration(    
                        labelText: 'First Name',
                        suffix: GestureDetector(
                        onTap: () {
                          _firstNameController.clear();
                        },
                          child: Icon(Icons.clear)
                        )
                      ),
                    ),

希望这会有所帮助。