Flutter自动补全插件flutter_autocompleter的使用

功能

• 支持TextField、CupertinoTextField、TextFormField甚至自定义文本字段小部件
• 可定制列表项、内边距、外边距和装饰
• 可定制加载、空状态和错误状态的内容
• 在建议回调前后安装钩子
• 设置监听文本更改时的防抖持续时间
• 自动翻转当列表超出视口时

示例

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("示例"),
        ),
        body: Autocompleter<String>(
          debounce: 300, // 防抖持续时间（毫秒）
          flip: true, // 是否自动翻转
          controller: _textEditingController, // 文本控制器
          callback: (q) async {
            var data = ['apple', 'banana', 'cat', 'dog', 'app', '1234'];
            return Future.value(
                data.where((element) => element.contains(q)).toList());
          },
          errorBuilder: (_) {
            return const Padding(
              padding: EdgeInsets.all(16.0),
              child: Text('发生错误'),
            );
          },
          itemBuilder: (_, s) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(s),
            );
          },
          loadingBuilder: (_) => const Center(
                child: Padding(
                  padding: EdgeInsets.all(16.0),
                  child: SizedBox(
                      width: 24,
                      height: 24,
                      child: CircularProgressIndicator(
                        strokeWidth: 2,
                      )),
                ),
              ),
          onTap: (s) {
            setState(() {
              _textEditingController.text = s;
              _textEditingController.selection = TextSelection.fromPosition(
                  TextPosition(offset: _textEditingController.text.length));
            });
            Navigator.of(context).push(MaterialPageRoute(
                builder: (_) => Scaffold(
                      body: Center(child: Text(s)),
                    )));
          },
          decorationBuilder: (direction) => BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(
                    top: direction == VerticalDirection.up
                        ? const Radius.circular(16.0)
                        : Radius.zero,
                    bottom: direction == VerticalDirection.down
                        ? const Radius.circular(16.0)
                        : Radius.zero,
                  ),
                  boxShadow: const [
                    BoxShadow(blurRadius: 3.0, color: Colors.black12)
                  ]),
          child: TextField(
            controller: _textEditingController,
          ),
          direction: VerticalDirection.down // 列表方向
        ),
      ),
    );
  }
}

上述代码展示了一个使用flutter_autocompleter插件的基本示例。在这个示例中，我们创建了一个具有自动补全功能的文本输入框。当用户在文本框中输入内容时，插件会根据输入的内容动态显示匹配的选项。

主要参数解释

• debounce: 控制输入框的防抖持续时间，防止频繁触发查询。
• flip: 当列表超出口界时是否自动翻转。
• controller: 文本控制器，用于管理文本框的内容。
• callback: 返回一个包含建议数据的Future，用于生成补全建议。
• errorBuilder: 当发生错误时，用于显示错误提示的Widget。
• itemBuilder: 用于构建每个补全建议项的Widget。
• loadingBuilder: 用于显示加载状态的Widget。
• onTap: 当用户选择某个建议项时触发的回调函数。
• decorationBuilder: 用于设置补全列表的装饰。
• child: 显示在文本框中的Widget。
• direction: 补全列表的方向。

通过这些配置，您可以轻松地为您的Flutter应用添加强大的自动补全功能。