当 TextField 不为空时显示图标

Question

我正在尝试做简单的事情。当 TextField 不为空时显示清除按钮以清除内容并在内容为空时隐藏它。这是代码

   final TextEditingController _controller = TextEditingController();
       ...

                   TextFormField(
                      controller: _controller,
                      decoration: InputDecoration(
                          suffixIcon: _controller.text.length > 0
                              ? IconButton(
                                  icon: Icon(Icons.clear, size: 16),
                                  onPressed: () {
                                    _controller.clear();
                                  },
                                )
                              : null))

这可以工作，但不能在激活键盘的情况下使用。您必须关闭键盘才能使其工作。如何在使用控制器打字时实时进行操作？

Answer 1

每次输入更改时都需要更新状态：

TextEditingController _controller = TextEditingController();

@override
void initState() {
  super.initState();

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: TextFormField(
        controller: _controller,
        decoration: InputDecoration(
          suffixIcon: _controller.text.isNotEmpty
              ? IconButton(
                  icon: Icon(Icons.clear, size: 16),
                  onPressed: () {
                    _controller.clear();
                  },
                )
              : null,
        ),
      ),
    ),
  );
}