search_field_autocomplete 是一个 Flutter 包，提供了一个带有自动完成建议的可自定义搜索字段。它旨在让您轻松地在 Flutter 应用程序中实现自动完成功能。

功能

  • 在用户键入时显示自动完成建议。
  • 自定义建议列表的外观。
  • 控制视口中显示的建议数量。
  • 支持 iOS 风格的搜索字段（Cupertino）和 Material Design 搜索字段。
  • 自定义建议的排序和过滤。
  • 长建议列表的可选滚动条。
  • 用于处理用户与建议交互的回调。
  • 通过各种样式选项高度可定制。

用法

在您的 Dart 代码中导入该包

import 'package:search_field_autocomplete/search_field_autocomplete.dart';

SearchFieldAutoComplete<String>(
      suggestions: [
        SearchFieldAutoCompleteItem<String>('Apple', item: 'apple'),
        SearchFieldAutoCompleteItem<String>('Banana', item: 'banana'),
        SearchFieldAutoCompleteItem<String>('Cherry', item: 'cherry'),
        SearchFieldAutoCompleteItem<String>('Date', item: 'date'),
        SearchFieldAutoCompleteItem<String>('Fig', item: 'fig'),
      ],
      onSuggestionSelected: (value) {
        // Handle the selected suggestion
        print('Selected: $value');
      },
);
  • 更多详情和示例，请参阅
  • 示例 1

重要参数

focusNode

  • 用于管理搜索字段焦点的 [FocusNode]。

suggestions

  • SearchFieldAutoComplete 的建议列表。每个建议都应有一个唯一的 searchKey。

sorter

  • 用于对搜索建议进行排序的自定义排序函数。此函数负责根据用户的输入来排序和过滤搜索建议。[sorter] 函数接受两个参数：

  • [value]: 表示用户输入的字符串。

  • [suggestions]: SearchFieldAutoCompleteItem 的列表，表示搜索建议。该函数应根据提供的 [value] 返回一个排序后的建议列表。

  • 该函数应根据提供的 [value] 返回一个排序后的建议列表。

      SearchFieldAutoComplete<T>(
  sorter: (query, suggestions) {
    // You can customize the sorting logic here.
    // Sort and filter suggestions based on 'value'.
    // Return the sorted list of suggestions.
  },
)

  • 更多详情和示例，请参阅

  • 示例 3

itemHeight

  • 列表中每个建议项的高度。

maxSuggestionsInViewPort

  • 要在视口中显示的建议数量。默认为 5，但如果建议少于 5 个，则会自适应。

控制器

  • SearchFieldAutoComplete 的 TextEditingController。

输入类型

  • 搜索字段的键盘类型。

offset

  • 建议列表相对于 SearchFieldAutoComplete 的偏移量。

emptyBuilder

Dark

Light

  • noResultFound 和 try Different Search term 将根据用户的语言环境以不同语言显示。

  • 更多详情和示例，请参阅

  • 示例 2

autoCorrect

  • 控制是否启用自动更正，默认为 true。

suggestionDirection

  • 建议出现的方向，默认为 [SuggestionDirection.down]。

suffixIcon

  • 显示在 [TextField] 右侧的可选后缀图标。

onSuffixTap

  • 当 [suffixIcon] 被点击时触发的回调函数。

suffixInsets

  • 应用于 [suffixIcon] 的内边距。您可以使用它来控制 [suffixIcon] 周围的间距。

searchStyle

  • 搜索输入的 [TextStyle]。

suggestionStyle

  • 当没有提供子项时，建议的 [TextStyle]。

suggestionState

  • 建议的状态，默认为 SuggestionState.expand。

suggestionAction

  • 点击建议时执行的操作。

suggestionsDecoration

  • 建议列表的装饰，包括 [BoxShadow] 等属性。

suggestionItemBuilder

-此属性允许您提供一个函数，该函数构建并自定义列表中每个建议项的 widget。该函数提供两个参数。

onSuggestionSelected

  • 点击建议时触发的回调函数。

enabled

  • 用于启用或禁用 SearchFieldAutoComplete 的标志。

onSubmitted

  • SearchFieldAutoComplete 提交时触发的回调函数。

onChanged

  • SearchFieldAutoComplete 更改时触发的回调函数。

onTap

  • SearchFieldAutoComplete 被点击时触发的回调函数。

placeholder

  • 在搜索字段中显示的提示文本。

initialValue

  • SearchFieldAutoComplete 的初始值。它必须存在于 [suggestions] 中。

scrollbarProperties

  • 表示滚动条的可选属性。

示例

要更详细地了解如何使用此包，请查看此存储库中的 example 目录。

贡献

欢迎贡献！如果您遇到任何问题或有改进建议，请在 GitHub 上打开一个 issue 或创建一个 pull request。

许可证

此包已获得 MIT 许可证 – 更多详情请参阅 LICENSE 文件。

GitHub

查看 Github