时间戳

首页 > 解决方案 > Flutter onChange 执行了两次

android - Flutter onChange 执行了两次

问题描述

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

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

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

标签： androidflutter

解决方案

解决方案之一是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. 演示

API 只调用一次

callApi 方法只调用一次

注意：您可能会在演示中看到，它只打印一次“Saved data to API”

4. 完整回购

你可以查看这个 repo 并在本地构建它。Github

推荐阅读