searchkit_ui 是一个用于 Flutter 的搜索界面插件，它可以帮助你快速构建一个功能强大的搜索界面。searchkit_ui 是基于 SearchKit 构建的，SearchKit 是一个用于构建搜索界面的库，支持多种搜索功能和过滤器。

安装

首先，你需要在 pubspec.yaml 文件中添加 searchkit_ui 依赖：

dependencies:
  flutter:
    sdk: flutter
  searchkit_ui: ^0.0.1 # 请查看最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

1. 初始化 SearchKit
   在使用 searchkit_ui 之前，你需要初始化 SearchKit。通常你需要在应用的入口处进行初始化。

   import 'package:searchkit/searchkit.dart';
   import 'package:searchkit_ui/searchkit_ui.dart';
   
   void main() {
     SearchKit.initialize(
       client: SearchKitClient(
         endpoint: 'https://your-search-endpoint.com', // 你的搜索服务端点
         index: 'your-index-name', // 你的索引名称
       ),
     );
   
     runApp(MyApp());
   }

2. 创建搜索界面
   你可以使用 SearchKitUI 提供的组件来构建搜索界面。以下是一个简单的搜索界面示例：

   import 'package:flutter/material.dart';
   import 'package:searchkit_ui/searchkit_ui.dart';
   
   class SearchPage extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Search'),
         ),
         body: Column(
           children: [
             SearchBar(
               onSearch: (query) {
                 // 处理搜索逻辑
                 print('Search query: $query');
               },
             ),
             Expanded(
               child: SearchResults(
                 builder: (context, results) {
                   if (results.isEmpty) {
                     return Center(
                       child: Text('No results found'),
                     );
                   }
   
                   return ListView.builder(
                     itemCount: results.length,
                     itemBuilder: (context, index) {
                       final result = results[index];
                       return ListTile(
                         title: Text(result['title']),
                         subtitle: Text(result['description']),
                       );
                     },
                   );
                 },
               ),
             ),
           ],
         ),
       );
     }
   }

3. 处理搜索逻辑
   在 SearchBar 组件中，你可以通过 onSearch 回调来处理用户输入的搜索查询。你可以在回调中执行搜索操作，并更新 SearchResults 组件。

   SearchBar(
     onSearch: (query) {
       // 执行搜索操作
       SearchKit.search(query).then((results) {
         // 更新搜索结果
         SearchResults.update(results);
       });
     },
   ),

4. 自定义搜索过滤器
   searchkit_ui 还支持自定义搜索过滤器。你可以使用 FilterPanel 组件来添加过滤器。

   FilterPanel(
     filters: [
       Filter(
         field: 'category',
         label: 'Category',
         options: ['Electronics', 'Books', 'Clothing'],
       ),
       Filter(
         field: 'price',
         label: 'Price',
         type: FilterType.range,
       ),
     ],
   ),

完整示例

以下是一个完整的搜索界面示例：

import 'package:flutter/material.dart';
import 'package:searchkit/searchkit.dart';
import 'package:searchkit_ui/searchkit_ui.dart';

void main() {
  SearchKit.initialize(
    client: SearchKitClient(
      endpoint: 'https://your-search-endpoint.com',
      index: 'your-index-name',
    ),
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SearchKit UI Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchPage(),
    );
  }
}

class SearchPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search'),
      ),
      body: Column(
        children: [
          SearchBar(
            onSearch: (query) {
              SearchKit.search(query).then((results) {
                SearchResults.update(results);
              });
            },
          ),
          FilterPanel(
            filters: [
              Filter(
                field: 'category',
                label: 'Category',
                options: ['Electronics', 'Books', 'Clothing'],
              ),
              Filter(
                field: 'price',
                label: 'Price',
                type: FilterType.range,
              ),
            ],
          ),
          Expanded(
            child: SearchResults(
              builder: (context, results) {
                if (results.isEmpty) {
                  return Center(
                    child: Text('No results found'),
                  );
                }

                return ListView.builder(
                  itemCount: results.length,
                  itemBuilder: (context, index) {
                    final result = results[index];
                    return ListTile(
                      title: Text(result['title']),
                      subtitle: Text(result['description']),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}