Flutter搜索栏插件flutter_easy_search_bar的使用

当然，以下是一个关于如何使用 flutter_easy_search_bar 插件的示例代码。这个插件提供了一个简单且功能强大的搜索栏组件，适用于Flutter应用程序。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_easy_search_bar 的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_easy_search_bar: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Dart 文件中使用 FlutterEasySearchBar。以下是一个简单的示例，展示了如何设置和使用搜索栏：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Easy Search Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 模拟数据列表
  final List<String> items = List.generate(100, (index) => 'Item $index');
  String? searchQuery = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Easy Search Bar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            // 使用 FlutterEasySearchBar
            FlutterEasySearchBar(
              hintText: 'Search...',
              onChanged: (query) {
                setState(() {
                  searchQuery = query;
                });
              },
              onSearchPressed: () {
                // 当用户点击搜索按钮时执行的逻辑
                print('Search for: $searchQuery');
              },
              suggestions: searchQuery == null || searchQuery!.isEmpty
                  ? []
                  : items
                      .where((item) =>
                          item.toLowerCase().contains(searchQuery!.toLowerCase()))
                      .toList(),
              suggestionBuilder: (context, suggestion) {
                return ListTile(
                  leading: Icon(Icons.label),
                  title: Text(suggestion),
                );
              },
            ),
            // 显示搜索结果（如果有的话）
            Expanded(
              child: searchQuery == null || searchQuery!.isEmpty
                  ? Center(child: Text('No search results'))
                  : ListView.builder(
                      itemCount: items
                          .where((item) =>
                              item.toLowerCase().contains(searchQuery!.toLowerCase()))
                          .toList()
                          .length,
                      itemBuilder: (context, index) {
                        final item = items
                            .where((item) =>
                                item.toLowerCase().contains(searchQuery!.toLowerCase()))
                            .toList()[index];
                        return ListTile(
                          title: Text(item),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 依赖导入：确保在 pubspec.yaml 中添加了 flutter_easy_search_bar 依赖。
2. 数据列表：创建一个包含100个字符串项的模拟数据列表。
3. 搜索栏：使用 FlutterEasySearchBar 组件，并设置相关属性，如 hintText、onChanged 和 onSearchPressed。
4. 搜索建议：根据用户的输入动态生成搜索建议列表。
5. 搜索结果：在搜索栏下方显示搜索结果列表。如果没有输入查询，则显示 “No search results”。

这个示例展示了如何使用 flutter_easy_search_bar 插件创建一个基本的搜索功能，包括搜索建议的显示和搜索结果的过滤。你可以根据自己的需求进一步定制和扩展这个示例。