时间戳

首页 > 解决方案 > 如何在 textField 小部件上快速输入？

flutter - 如何在 textField 小部件上快速输入？

问题描述

每次输入更改时都会调用这种方式。问题是当用户快速输入时，每次调用 api 并且搜索结果总是在变化。（称为谷歌地图自动完成API）

用户停止输入时如何调用api？（不关闭键盘或onSaved）

TextField(
      decoration: _inputStyle(),
      cursorColor: Palette.defaultColor,
      controller: _textEditingController,
     onChanged: (value) => setState(() => _autocompletePlace(value)),
 )

标签： flutterdart

解决方案

我会创建Debouncer，它会通过选择的计时器延迟你的代码的执行。

例如，用户输入“123”——执行将延迟 200 毫秒，用户输入“4”，最后一次执行被取消并创建另一个延迟。如果用户在 200 毫秒内没有输入新数据，_autocompletePlace("1234")将被执行

import 'package:flutter/foundation.dart';
import 'dart:async';

class Debouncer {
  final int milliseconds;
  VoidCallback action;
  Timer _timer;

  Debouncer({ this.milliseconds });

  run(VoidCallback action) {
    if (_timer != null) {
      _timer.cancel();
    }

    _timer = Timer(Duration(milliseconds: milliseconds), action);
  }
}

final _debouncer = Debouncer(milliseconds: 200);


onTextChange(String text) {
  _debouncer.run(() => _autocompletePlace(value));
}

推荐阅读