Flutter搜索自动补全插件search_autocomplete的使用

概述

search_autocomplete 是一个Flutter包，提供了一个 SearchAutocomplete 小部件，用于实现带有下拉菜单的自动完成功能。该包提供了对搜索字段和下拉项的广泛自定义选项，并包括用于搜索逻辑的钩子。

安装

要在项目中使用此包，请在 pubspec.yaml 文件中添加 search_autocomplete 作为依赖项：

dependencies:
  search_autocomplete: ^0.0.7

功能

• 可自定义的搜索字段
• 可自定义的下拉项
• 搜索逻辑的钩子
• 支持初始值
• 支持占位符文本
• 当下拉菜单为空时显示的Widget

状态管理兼容性

该包设计为与Cubit/Bloc和其他正统的状态管理器无缝协作。由于列表更新逻辑位于小部件树的更高级别，因此可以实现UI和逻辑之间的干净分离。

使用示例

以下是一个快速示例，展示了如何使用 SearchAutocomplete 小部件：

SearchAutocomplete<String>(
  options: ['Apple', 'Banana', 'Orange'], // 下拉选项
  initValue: 'Apple', // 初始值
  onSearch: (query) {
    // 实现你的搜索逻辑
  },
  onSelected: (item) {
    // 处理选择
  },
  getString: (item) => item, // 将选项转换为字符串
)

自定义

你可以使用 fieldBuilder 和 dropDownBuilder 分别自定义搜索字段和下拉项：

SearchAutocomplete<String>(
  // ...
  fieldBuilder: (controller, onFieldTap, showDropdown) {
    return TextFormField(
      controller: controller,
      onTap: onFieldTap,
      decoration: InputDecoration(
        hintText: 'Custom search...', // 自定义提示文本
        suffixIcon: IconButton(
          onPressed: () => showDropdown(),
          icon: Icon(
            showDropdown ? Icons.arrow_drop_down : Icons.arrow_drop_up,
          ),
        ),
      ),
    );
  },
  dropDownBuilder: (options, onSelected) {
    return ListView.builder(
      itemCount: options.length,
      itemBuilder: (context, index) {
        final option = options[index];
        return ListTile(
          leading: const Icon(Icons.star), // 自定义图标
          title: Text(option),
          onTap: () => onSelected(option),
        );
      },
    );
  },
)

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用 search_autocomplete 包。该示例包括自定义搜索字段和默认搜索字段的实现。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SearchPage(),
    );
  }
}

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

  [@override](/user/override)
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final List<String> _allOptions = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango'];
  String _current = '';
  List<String> _filteredOptions = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    _filteredOptions = _allOptions;
  }

  void _search(String query) {
    setState(() {
      _filteredOptions = _allOptions
          .where((option) => option.toLowerCase().contains(query.toLowerCase()))
          .toList();
    });
  }

  void _select(String item) {
    setState(() {
      _current = item;
      _filteredOptions = _allOptions; // 重置过滤选项
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Search Example')),
      body: ListView(
        children: [
          const SizedBox(height: 120),
          _buildCustomizeField(),
          const SizedBox(height: 200),
          _buildDefaultField(),
          const SizedBox(height: 800),
        ],
      ),
    );
  }

  Widget _buildDefaultField() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: SearchAutocomplete<String>(
        options: _filteredOptions,
        initValue: _current,
        onSearch: _search,
        onSelected: _select,
        getString: (value) => value,
        hintText: 'Default search...',
      ),
    );
  }

  Widget _buildCustomizeField() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: SearchAutocomplete<String>(
        options: _filteredOptions,
        initValue: _current,
        onSearch: _search,
        onSelected: _select,
        getString: (value) => value,
        fieldBuilder: (controller, onFieldTap, showDropdown, onPressed) {
          return TextFormField(
            controller: controller,
            onTap: onFieldTap,
            decoration: InputDecoration(
              hintText: 'Custom search...',
              suffixIcon: IconButton(
                onPressed: () => onPressed(showDropdown),
                icon: Icon(
                  showDropdown ? Icons.arrow_drop_down : Icons.arrow_drop_up,
                ),
              ),
            ),
          );
        },
        dropDownBuilder: (options, onSelected) {
          return ListView.builder(
            itemCount: options.length,
            itemBuilder: (context, index) {
              final option = options[index];
              return ListTile(
                leading: const Icon(Icons.star),
                title: Text(option),
                onTap: () => onSelected(option),
              );
            },
          );
        },
      ),
    );
  }
}