Flutter Autocomplete组件怎么做防抖处理?

14 min read
import 'dart:async';
import 'package:flutter/material.dart';

class AutocompleteDemo extends StatefulWidget {
  @override
  _AutocompleteDemoState createState() => _AutocompleteDemoState();
}

class _AutocompleteDemoState extends State<AutocompleteDemo> {
  Timer _debounce;
  List<String> _suggestions = [];
  TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _debounce.cancel();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextField(
            controller: _controller,
            onChanged: (value) {
              _debounce?.cancel();
              _debounce = Timer(const Duration(milliseconds: 500), () {
                setState(() {
                  _suggestions = _getSuggestions(value);
                });
              });
            },
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _suggestions.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_suggestions[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  List<String> _getSuggestions(String query) {
    // 这里模拟了自动完成处理的过程,实际情况中需要根