Flutter应用栏集成搜索与切换功能插件app_bar_with_search_switch的使用

目录

• 简介
• 特性
• 快速概览
• 示例代码
• 截图
• FAQ
• 已知问题

简介

AppBarWithSearchSwitch 是一个可以切换为搜索框的应用栏组件，它是 AppBar 的替代类。它根据是否处于搜索模式返回不同的应用栏。

注意：

• 版本1.5+ 是轻量级版本。
• 版本2.0+ 使用了 SpeechToText 包以支持语音识别。

这个包是 flutter_search_bar 的完全重写，并支持以下特性：

特性

• 支持 StatelessWidget
• 内置 ValueNotifier，可以直接使用或轻松与其他状态管理工具配合使用
• 完全可自定义
• 不需要额外的变量
• 支持自定义动画（如 AppBarAnimationSlideDown 和 AppBarAnimationSlideLeft）
• 提供多个辅助类（如 AppBarSearchButton、AppBarOnEditListener、AppBarOnSubmitListener 等）

快速概览

使用 appBarBuilder 参数构建默认的 AppBar，其中包含：

• 一个搜索按钮，点击时调用 startSearch
• 或者使用标准的搜索按钮 AppBarSearchButton

appBarBuilder 是唯一必需的参数，其他参数均为可选。

获取 TextField 中文本的方式：

• onChanged 回调
• onSubmitted 回调
• 监听 textEditingController
• 使用 ValueNotifier (textNotifier)

其他回调：

• onCleared
• onClosed

示例代码

下面是一个完整的示例代码，展示了如何在应用中使用 AppBarWithSearchSwitch。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AppBarWithSearch demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'AppBarWithSearch widget main'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;
  final searchText = ValueNotifier<String>('');
  final words = ("There is no justice in the laws of nature, no term for fairness in the equations of motion. "
          "The Universe is neither evil, nor good, it simply does not care. "
          "The stars don't care, or the Sun, or the sky. "
          "But they don't have to! WE care! There IS light in the world, and it is US! "
          "Why does any kind of cynicism appeal to people? Because it seems like a mark of maturity, of sophistication, like you’ve seen everything and know better. "
          "Or because putting something down feels like pushing yourself up. "
          "There is light in the world, and it is us! "
          "World domination is such an ugly phrase. I prefer to call it world optimisation. ")
      .split(' ');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarWithSearchSwitch(
        onChanged: (text) {
          searchText.value = text;
        },
        animation: AppBarAnimationSlideLeft.call,
        appBarBuilder: (context) {
          return AppBar(
            title: Text(title),
            actions: const [
              AppBarSearchButton(),
            ],
          );
        },
      ),
      body: Center(
        child: SingleChildScrollView(
          child: AnimatedBuilder(
            animation: Listenable.merge([searchText]),
            builder: (BuildContext context, _) {
              return Wrap(
                children: [
                  for (var i = 0; i < words.length; i++)
                    if (words[i].contains(searchText.value))
                      SizedBox(
                        height: 110,
                        width: 110,
                        child: Card(
                          child: Column(
                            children: [
                              Expanded(
                                child: Center(
                                  child: Text(
                                    words[i],
                                    style: Theme.of(context).textTheme.headlineSmall,
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

截图

FAQ

如何从远处激活搜索字段？

如果 AppBarWithSearchSwitch 在同一个 Scaffold 或其子组件中：

1. 使用 AppBarWithSearchFinder
2. 调用 AppBarWithSearchFinder.of(context)?.triggerSearch()

如果 AppBarWithSearchSwitch 在 Scaffold 外部：

1. 初始化 ValueNotifier 类型的变量
2. 设置 customIsSearchModeNotifier 属性
3. 设置 ValueNotifier 的值为 true 以显示搜索栏

如何使 Android 返回按钮关闭搜索？

1. 初始化 ValueNotifier 类型的 isSearchMode 和 searchText 变量
2. 将这些变量分配给 customIsSearchModeNotifier 和 customTextNotifier
3. 使用 WillPopScope 包裹 Scaffold 并定义 onWillPop 参数

final isSearchMode = ValueNotifier<bool>(false);
final searchText = ValueNotifier<String>(''); 

@override
Widget build(BuildContext context) {

  return WillPopScope(
    onWillPop: () async { // android back button handler
      if (searchText.value != '') {
        isSearchMode.value = false;
        searchText.value = ''; 
        return false;
      }
      return true;
    },
    child: Scaffold(
      appBar: AppBarWithSearchSwitch(
        customIsSearchModeNotifier: isSearchMode,
        customTextNotifier: searchText,
        appBarBuilder: (context) {
          return AppBar(
            // your code here
          );
        },
      ),
    ),
  );
}

已知问题

• 已修复上游问题：keepAppBarColors = true 没有改变文本选择句柄的颜色，这是由于上游问题导致的。
• 如果在同一页面上有多个 AppBarWithSearchSwitch，请为每个实例提供独立的 customIsSearchModeNotifier、customTextNotifier 等。

通过以上内容，您可以更好地理解和使用 app_bar_with_search_switch 插件来增强您的 Flutter 应用程序。