Flutter算法搜索插件algorithmic_search的使用

algorithmic_search 是一个 Flutter 插件，提供了一个灵活且可定制的搜索表单小部件。SearchSheet 小部件支持单选和多选模式，适用于移动应用中的各种搜索和选择场景。

特性

• 单选和多选模式：使用 SearchSheetController 轻松切换 singleSelect 和 multiSelect 模式。
• 可定制的UI：修改内边距、间距、搜索字段装饰等，以适应您的应用设计。
• 已选项显示：在 multiSelect 模式下可选显示已选项。
• 通用搜索功能：定义自定义搜索条件，根据用户输入过滤项目。
• 示例应用：包含示例代码，演示如何在 Flutter 应用中实现和使用 SearchSheet 小部件。

入门指南

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

dependencies:
  algorithmic_search: ^0.0.1

使用方法

基本设置

导入插件并创建一个 SearchSheetController 来管理已选项。

import 'package:algorithmic_search/algorithmic_search.dart';

// 初始化控制器，指定选择类型
final controller = SearchSheetController<String>(type: SearchSheetType.multiSelect);

示例用法

以下是如何在 Flutter 应用中使用 SearchSheet 小部件的示例：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Search Sheet Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SearchExamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Search Sheet Example")),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                _openSearchSheet(
                  context,
                  SearchSheetType.singleSelect,
                  'Single Select Search',
                );
              },
              child: const Text("Open Single Select Search Sheet"),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _openSearchSheet(
                  context,
                  SearchSheetType.multiSelect,
                  'Multi Select Search',
                  showSelectedItems: true,
                );
              },
              child: const Text("Open Multi Select Search Sheet"),
            ),
          ],
        ),
      ),
    );
  }

  void _openSearchSheet(
    BuildContext context,
    SearchSheetType type,
    String title, {
    bool showSelectedItems = false,
  }) {
    final List<String> items = [
      "Apple",
      "Banana",
      "Cherry",
      "Date",
      "Elderberry"
    ];
    final controller = SearchSheetController<String>(type: type);

    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (_) {
        return SearchSheet<String>(
          items: items,
          controller: controller,
          searchCriteria: (item, query) =>
              item.toLowerCase().contains(query.toLowerCase()),
          itemBuilder: (context, item) => ListTile(
            title: Text(item),
            trailing: Consumer<SearchSheetController<String>>(
              builder: (context, controller, child) {
                return Icon(
                  Icons.check_circle,
                  color: controller.selectedItems.contains(item)
                      ? Colors.green
                      : Colors.grey,
                );
              },
            ),
          ),
          onItemSelected: (item) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text("Selected item: $item")),
            );
          },
          searchFieldDecoration: InputDecoration(
            labelText: title,
            border: const OutlineInputBorder(),
          ),
          labelText: title,
          padding: const EdgeInsets.all(16.0),
          spacing: 10.0,
          runSpacing: 6.0,
          showSelectedItems: showSelectedItems,
        );
      },
    );
  }
}

参数

• items：要显示和搜索的项目列表。
• controller：管理选择状态的 SearchSheetController。
• searchCriteria：根据用户输入过滤项目的函数。
• itemBuilder：构建每个项目小部件的函数。
• onItemSelected：项目被选中时的回调。
• searchFieldDecoration：搜索字段的自定义装饰。
• labelText：搜索字段的标签。
• padding：小部件周围的内边距。
• spacing 和 runSpacing：multiSelect 模式下已选项的间距选项。
• showSelectedItems：控制是否在顶部显示已选项。

许可证

本项目采用 MIT 许可证。详情请参阅 LICENSE 文件。