不为空时在 TextField 中显示图标答案

【问题标题】：Display icon in TextField when not empty不为空时在 TextField 中显示图标
【发布时间】：2020-06-17 16:37:00
【问题描述】：

我正在尝试做简单的事情。当 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))

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

【问题讨论】：

标签： flutter dart

【解决方案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,
        ),
      ),
    ),
  );
}

【讨论】：

谢谢朋友！你是最棒的?

【解决方案2】：

这是因为您的 UI 在您关闭键盘之前不会重新构建，这将触发重新构建，为此，您可以使用以下小技巧：

  final TextEditingController controller = TextEditingController();

  changesOnField() {
    setState(() {}); // Will re-Trigger Build Method
  }

  @override
  void initState() {
    super.initState();
    controller.addListener(changesOnField);
  }```

【讨论】：