如何处理TextField快速输入？实现停止输入时调用Google Maps AutoComplete API

这个场景太常见了！快速输入时频繁触发API不仅浪费请求配额，还会让搜索结果跳来跳去，用户体验很差。咱们用**防抖（Debounce）**就能完美解决——核心思路就是：等用户停止输入一小段时间后，再执行API调用，期间如果用户继续输入，就重置等待时间。

具体实现步骤： #

1. 引入Timer并定义防抖变量
   在你的Widget的State类里，添加一个Timer?类型的变量，用来管理延迟执行的任务。

2. 修改onChanged的逻辑
   每次输入变化时，先取消之前还没执行的延迟任务，然后重新设置一个新的延迟，等延迟时间到了再调用你的API方法。

3. 清理Timer避免内存泄漏
   在组件销毁的dispose方法里，记得取消Timer，防止组件销毁后任务还在后台执行。

完整代码示例： #

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

class LocationSearchWidget extends StatefulWidget {
  const LocationSearchWidget({super.key});

  @override
  State<LocationSearchWidget> createState() => _LocationSearchWidgetState();
}

class _LocationSearchWidgetState extends State<LocationSearchWidget> {
  final _textEditingController = TextEditingController();
  Timer? _debounceTimer; // 防抖用的Timer

  @override
  void dispose() {
    _textEditingController.dispose();
    _debounceTimer?.cancel(); // 销毁时务必取消Timer
    super.dispose();
  }

  // 你的Google Maps AutoComplete API调用方法
  void _autocompletePlace(String value) {
    if (value.trim().isEmpty) {
      // 空输入可以提前处理，避免无效API调用
      return;
    }
    // 这里写实际调用API的逻辑
    print('正在调用AutoComplete API搜索：$value');
  }

  InputDecoration _inputStyle() {
    return const InputDecoration(
      hintText: '搜索地点',
      border: OutlineInputBorder(),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.blue),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: _inputStyle(),
      cursorColor: Colors.blue, // 对应你的Palette.defaultColor
      controller: _textEditingController,
      onChanged: (value) {
        // 取消之前的延迟任务，避免旧输入触发API
        _debounceTimer?.cancel();
        // 设置500ms延迟，用户停止输入半秒后再调用API
        _debounceTimer = Timer(const Duration(milliseconds: 500), () {
          setState(() {
            _autocompletePlace(value);
          });
        });
      },
    );
  }
}

关键细节说明： #

• 延迟时间调整：示例里用了500毫秒，你可以根据需求改——比如300ms更灵敏，1000ms更保守，找到适合你场景的平衡点。
• 空输入过滤：在_autocompletePlace里加了空输入判断，避免用户删除所有内容后还触发无效API调用。
• Timer清理：dispose里的_debounceTimer?.cancel()一定要加，不然组件销毁后Timer还在跑，会导致内存泄漏和不必要的错误。

这样修改后，用户快速输入时只会在停止输入的500ms后触发一次API调用，完美解决频繁请求的问题～

内容的提问来源于stack exchange，提问作者BIS Tech