Flutter onChange 执行两次

Question

我有一个文本字段，它有 onChange 属性，当它检测到文本有一个 \n 执行一个函数时，问题是这个函数被执行了两次，应该提到，在那个函数中，我清理了文本的文本控制器。

TextField(
  maxLines: null,
  controller: codigoController,
  autofocus: true,
  onChanged: (text) {
    if (text.contains('\n')) {
      test();
    }
  },
),

 _test() {
    print("hello");
    codigoController.clear();
  }

Answer 1

其中一个解决方案是使用listener上TextController

1. 添加监听器

我们可以在第一次渲染屏幕时添加监听器。稍后我们需要按照文档的说明处理它

class _AutoCallApiState extends State<AutoCallApi> {
  TextEditingController codigoController = TextEditingController();

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

  @override
  void dispose() {
    codigoController.dispose(); // release unused memory in RAM
    super.dispose();
  }

2. 处理变更和 API 调用

  Future callApi(String textToSent) async {
    await Future.delayed(Duration(seconds: 5));
    print("Received OK from API");
    codigoController.clear();
  }

  void changesOnField() {
    print("Changes Called");
    String text = codigoController.text;

    if (text.isNotEmpty) {
      print('$text');
      if (text.contains('\n')) {
        callApi(text);
      }
    }
  }

3. 演示

callApi 方法只调用一次

注意：您可能会在演示中看到，它只打印一次“已保存数据到 API”

4. 完整回购

您可以查看此 repo 并在本地构建它。GitHub