Flutter搜索动画插件searchbar_animation的使用

概述

Searchbar Animation 提供了一个带有水平滑动动画的搜索栏，并且是完全可定制的。以下是该插件的详细介绍、参数说明和一个完整的示例代码。

动图演示

• 无自动键盘聚焦 (enableKeyboardFocus: false)

• 有自动键盘聚焦 (enableKeyboardFocus: true)

使用方法

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  searchbar_animation: any

然后导入包：

import 'package:searchbar_animation/searchbar_animation.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用 SearchbarAnimation 插件：

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

void main() {
  runApp(
    const MaterialApp(
      title: 'Searchbar Animation',
      home: SearchbarAnimationExample(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class SearchbarAnimationExample extends StatefulWidget {
  const SearchbarAnimationExample({Key? key}) : super(key: key);

  @override
  _SearchbarAnimationExampleState createState() => _SearchbarAnimationExampleState();
}

class _SearchbarAnimationExampleState extends State<SearchbarAnimationExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildSearchbarAnimation(),
    );
  }

  Widget _buildSearchbarAnimation() {
    return SafeArea(
      child: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color.fromRGBO(0, 169, 191, 1),
                Colors.greenAccent,
              ],
            ),
          ),
          child: Column(
            children: [
              const Padding(
                padding: EdgeInsets.only(top: 100.0),
                child: Text(
                  'Searchbar Animation',
                  style: TextStyle(color: Colors.white, fontSize: 25.0),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                    top: 85.0, left: 8.0, right: 8.0, bottom: 8.0),
                child: Container(
                  height: 660.0,
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(.8),
                    borderRadius: const BorderRadius.all(
                      Radius.circular(20.0),
                    ),
                  ),
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: SearchBarAnimation(
                          textEditingController: TextEditingController(),
                          isOriginalAnimation: true,
                          enableKeyboardFocus: true,
                          onExpansionComplete: () {
                            debugPrint('do something just after searchbox is opened.');
                          },
                          onCollapseComplete: () {
                            debugPrint('do something just after searchbox is closed.');
                          },
                          onPressButton: (isSearchBarOpens) {
                            debugPrint('do something before animation started. It\'s the ${isSearchBarOpens ? 'opening' : 'closing'} animation');
                          },
                          trailingWidget: const Icon(
                            Icons.search,
                            size: 20,
                            color: Colors.black,
                          ),
                          secondaryButtonWidget: const Icon(
                            Icons.close,
                            size: 20,
                            color: Colors.black,
                          ),
                          buttonWidget: const Icon(
                            Icons.search,
                            size: 20,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

必需参数

• textEditingController: 需要传递给搜索栏的 TextEditingController。
• isOriginalAnimation: 是否启用按钮动画，默认为 true。如果设置为 false，可以自定义按钮阴影和边框。

可选参数

• searchBoxWidth: 搜索框的宽度，默认为屏幕宽度。
• trailingWidget: 搜索框末尾的控件。
• secondaryButtonWidget: 搜索框打开时的按钮控件。
• buttonWidget: 搜索框关闭时的按钮控件。
• hintText: 搜索框的提示文本。
• searchBoxColour: 搜索框的背景颜色。
• buttonColour: 按钮的背景颜色。
• cursorColour: 光标的颜色。
• hintTextColour: 提示文本的颜色。
• searchBoxBorderColour: 搜索框的边框颜色。
• buttonShadowColour: 按钮的阴影颜色。
• buttonBorderColour: 按钮的边框颜色。
• durationInMilliSeconds: 动画持续时间（毫秒）。
• textInputType: 输入类型（例如：数字、文本等）。
• isSearchBoxOnRightSide: 搜索框是否在右侧。
• enableKeyboardFocus: 是否自动聚焦键盘。
• enableSearchBoxBorder: 是否启用搜索框边框。
• enableButtonBorder: 是否启用按钮边框。
• enableButtonShadow: 是否启用按钮阴影（仅当 isOriginalAnimation 为 false 时有效）。
• enableBoxShadow: 是否启用搜索框阴影。
• textAlignToRight: 是否右对齐（适用于阿拉伯语等从右到左的语言）。
• onSaved: 文本保存回调（需要将此组件包裹在 Form 组件中）。
• onChanged: 文本变化回调。
• onFieldSubmitted: 字段提交回调。
• onEditingComplete: 编辑完成回调。
• onExpansionComplete: 搜索框展开完成回调。
• onCollapseComplete: 搜索框折叠完成回调。
• onPressButton: 按钮点击回调。
• enteredTextStyle: 输入文本样式。
• buttonElevation: 按钮的阴影高度。
• inputFormatters: 输入格式化器。

贡献指南

欢迎贡献者向我们的仓库提交拉取请求，请确保创建到 development 分支。

报告问题或功能请求

如果您遇到问题或有功能请求，请提供以下信息：

• 库版本
• 代码片段
• 日志（如适用）
• 设备规格（制造商、操作系统版本等）
• 复现问题的截图或视频及步骤

许可证

Searchbar Animation 是 MIT 许可证授权的。