Flutter搜索功能插件simple_search_bar的使用

simple_search_bar 是一个非常简单且实用的搜索栏插件。它可以帮助开发者快速实现搜索功能，并与现有的 AppBar 集成。

使用步骤

以下是使用 simple_search_bar 插件的基本步骤：

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  simple_search_bar: ^版本号

然后运行以下命令安装依赖：

flutter pub get

2. 创建搜索栏

接下来，我们通过一个完整的示例展示如何使用 simple_search_bar 插件。

示例代码

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

// 定义一个控制器来管理搜索状态
class MySearchBar extends StatelessWidget {
  final AppBarController appBarController = AppBarController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SearchAppBar(
        // 设置主颜色
        primary: Theme.of(context).primaryColor,
        appBarController: appBarController,
        // 自动激活搜索模式
        autoSelected: true,
        // 设置搜索提示文字
        searchHint: "在这里搜索...",
        // 主文字颜色
        mainTextColor: Colors.white,
        // 搜索框内容变化时的回调函数
        onChange: (String value) {
          // 在这里处理搜索逻辑，例如过滤列表
          print("当前输入值: $value");
        },
        // 搜索模式未激活时的默认 AppBar
        mainAppBar: AppBar(
          title: Text("我的应用标题"),
          actions: [
            // 点击图标切换到搜索模式
            InkWell(
              child: Icon(Icons.search),
              onTap: () {
                // 切换到搜索模式
                appBarController.stream.add(true);
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text("搜索页面内容"),
      ),
    );
  }
}

3. 运行效果

运行上述代码后，您将看到一个带有搜索功能的 AppBar。点击搜索图标或直接激活搜索模式后，搜索框会显示出来，用户可以输入关键字进行搜索。

关键点解析

1. appBarController 控制器
   appBarController 是一个核心组件，用于管理搜索模式的状态。通过 stream.add(true) 可以切换到搜索模式，而 false 则隐藏搜索框。

2. onChange 回调函数
   当用户输入内容时，onChange 回调函数会被触发。您可以在此处实现搜索逻辑，例如过滤数据列表。

3. 自定义样式
   通过设置 primary 和 mainTextColor 等属性，您可以轻松定制搜索栏的外观。

完整示例代码

以下是完整的示例代码，您可以直接复制并在项目中运行：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MySearchBar(),
    );
  }
}

class MySearchBar extends StatelessWidget {
  final AppBarController appBarController = AppBarController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SearchAppBar(
        primary: Theme.of(context).primaryColor,
        appBarController: appBarController,
        autoSelected: true,
        searchHint: "在这里搜索...",
        mainTextColor: Colors.white,
        onChange: (String value) {
          print("当前输入值: $value");
        },
        mainAppBar: AppBar(
          title: Text("我的应用标题"),
          actions: [
            InkWell(
              child: Icon(Icons.search),
              onTap: () {
                appBarController.stream.add(true);
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text("搜索页面内容"),
      ),
    );
  }
}