Flutter搜索功能插件fsearch的使用

特性

支持美丽的边框效果
提供丰富的圆角配置
支持炫酷的渐变效果
提供易于使用的阴影功能
支持任意数量的前缀和后缀操作按钮
提供色彩丰富、灵活且强大的提示效果
提供更易用的控制器给开发者

参数与接口

FSearch Param

参数名	类型	必要性	默认值	描述
controller	FSearchController	否	null	控制器。详情见[FSearchController]
width	double	否	null	宽度
height	double	否	null	高度
enable	bool	否	true	是否启用
onTap	VoidCallback	否	null	输入框点击回调
text	String	否	null	输入内容
onSearch	ValueChanged	否	null	键盘搜索按钮点击回调
corner	FSearchCorner	否	null	圆角效果。详情见[FSearchCorner]
cornerStyle	FSearchCornerStyle	否	null	圆角样式。默认[FSearchCornerStyle.round]。详情见[FSearchCornerStyle]
strokeColor	Color	否	null	边框颜色
strokeWidth	double	否	null	边框宽度
backgroundColor	Color	否	null	背景颜色
gradient	Gradient	否	null	背景渐变。会覆盖[backgroundColor]
shadowColor	Color	否	null	设置组件阴影颜色
shadowOffset	Offset	否	null	设置组件阴影颜色
shadowBlur	double	否	null	设置组件高斯模糊和阴影形状卷积的标准差
cursorColor	Color	否	null	光标颜色
cursorWidth	double	否	null	光标宽度
cursorRadius	double	否	null	光标圆角大小
prefixes	List	否	null	前缀动作控件
suffixes	List	否	null	后缀动作控件
padding	EdgeInsets	否	null	实际输入区域与[FSearch]边缘的距离
margin	EdgeInsets	否	null	[FSearch]外间距
style	TextStyle	否	null	输入文本样式
hintStyle	TextStyle	否	null	提示文本样式
hints	List	否	null	提示。如果只有一个提示，提示交换动画不能启用。
hintSwitchDuration	Duration	否	null	提示交换间隔
hintSwitchAnimDuration	Duration	否	null	提示交换动画时间
hintSwitchEnable	bool	否	null	是否启用提示交换动画
hintSwitchType	FSearchAnimationType	否	null	提示交换动画类型。默认[FSearchAnimationType.Scroll]。详情见[FSearchAnimationType]
stopHintSwitchOnFocus	bool	是	null	当获得焦点时，是否自动停止提示交换动画。
hintPrefix	Widget	否	null	提示前缀控件
center	bool	否	null	居中

FSearchController

FSearchController 是 FSearch 的控制器，可以返回输入文本、Hint、焦点状态等信息。同时提供了多种监控和文本更新能力。

参数

参数名	类型	描述
text	String	输入文本
hint	String	当前提示文本
focus	bool	焦点状态

接口

setListener(VoidCallback listener)：设置输入监听
setOnFocusChangedListener(ValueChanged<bool> listener)：设置焦点变化监听
requestFocus()：请求焦点
clearFocus()：移除焦点

FSearchAnimationType

FSearchAnimationType 用于指定 FSearch 提示交换动画类型。

enum FSearchAnimationType {
  /// 渐变动画
  ///
  /// Alpha animation
  Fade,

  /// 缩放动画
  ///
  /// Scale animation
  Scale,

  /// 上下滚动动画
  ///
  /// Scroll up and down animation
  Scroll,
}

示例

基础示例

FSearch(
  /// 设置高度
  height: 30.0,
  
  /// 设置背景颜色
  backgroundColor: color,

  /// 设置输入内容样式
  style: style,

  /// 点击键盘搜索时触发
  onSearch: (value) {
    /// do something
  },
  prefixes: [buildAction()],
)

使用 FSearch 构建搜索栏非常轻松。通过一些简单的参数，开发者可以轻松改变搜索栏的尺寸、颜色和字体。当用户点击键盘搜索时，onSearch 将被触发，允许开发者执行一些搜索操作。

前缀和后缀

FSearch(
  height: 30.0,
  backgroundColor: mainBackgroundColor,
  style: style,

  /// 前缀控件
  prefixes: [ buildAction() ],

  /// 后缀控件
  suffixes: [
    buildAction_1(),
    buildAction_2(),
    buildAction_3(),
  ],
  onSearch: _onSearch,
)

在 FSearch 中，开发者可以通过 prefixes 和 suffixes 参数为搜索栏配置任意数量的前缀或后缀操作按钮。

渐变

FSearch(
  height: 30.0,
  backgroundColor: mainBackgroundColor,
  style: style,

  /// 配置渐变
  gradient: _gradient,
  prefixes: [ buildAction() ],
)

FSearch 可以帮助开发者创建一个漂亮的渐变搜索栏。只需通过 gradient 参数进行配置即可。

角度、边框和阴影

/// #1
FSearch(
  height: 30.0,
  backgroundColor: color,
  style: style,

  /// 角度
  corner: FSearchCorner(
      leftTopCorner: 15.0,
      leftBottomCorner: 15.0,
      rightBottomCorner: 15.0),

  /// 边框宽度
  strokeWidth: 1.0,

  /// 边框颜色
  strokeColor: mainTextTitleColor,

  /// 阴影
  shadowColor: Colors.black38,
  shadowBlur: 5.0,
  shadowOffset: Offset(2.0, 2.0),
  prefixes: [buildAction()],
)

/// #2
FSearch(
  height: 30.0,
  backgroundColor: color,
  style: style,

  /// 角度
  corner: FSearchCorner.all(6.0),

  /// 角度样式
  cornerStyle: FSearchCornerStyle.bevel,
  prefixes: [buildAction()],
)

FSearch 的边框和阴影效果与其他 FWidget 成员相同，简单易用。通过 corner 参数，开发者可以自由控制 FSearch 的表格角大小。如果结合 cornerStyle，可以实现更复杂精美的效果。

光标

FSearch(
  /// 光标配置
  cursorColor: Colors.red[200],
  cursorRadius: 5.0,
  cursorWidth: 5.0,

  height: 36.0,
  style: style,
  gradient: _gradient,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction() ],
)

FSearch 支持修改搜索栏输入框中的光标。您可以将其更改为您想要的样子。

提示

/// #1
FSearch(
  height: 36.0,
  style: style,
  color: _color,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction() ],

  /// 提示
  hints: [
    "FSuper is awesome 👍",
    "Come to use FButton",
    "You will love FSearch",
  ],

  /// 开启提示交换动画
  hintSwitchEnable: true,

  /// 配置提示交换动画类型
  hintSwitchType: FSearchAnimationType.Fade,
)

/// #2
FSearch(
  height: 36.0,
  style: style,
  color: _color,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction1(),  buildAction2()],
  hints: [
    "Do you want to try FFloat?😃",
    "FRadio can do more 😱 !",
    "I heard that you have been waiting for FDottedLine for a long time...",
  ],
  hintSwitchEnable: true,
)

/// #3
FSearch(
  height: 36.0,
  style: style,
  color: _color,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction() ],

  /// 提示
  hints: [
    "Embrace FWidget 👬",
    "We care about your app 🥰",
    "Want to build beautiful apps 🤨 ?",
  ],
  hintSwitchEnable: true,

  /// 配置提示交换动画类型
  hintSwitchType: FSearchAnimationType.Scale,

  /// 获得焦点时是否停止交换动画
  stopHintSwitchOnFocus: false,
)

FSearch 为开发者提供了非常强大的提示效果。开发者可以轻松地为 FSearch 设置多个提示，并通过配置 hintSwitchEnable: true 来配置多个提示交换动画。

控制器

FSearch(
  controller: _controller,
  height: 36.0,
  style: style,
  gradient: _gradient,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction() ],
  hints: [
    "Want more beautiful widgets 🤨 ?",
    "We will launch the official website of FWidget",
    "Will you expect it?",
  ],
  hintStyle: hintStyle,
  hintSwitchEnable: true,
)

/// 获取输入框内容
String input = controller.text;

/// 清空输入框内容
controller.text = null;

/// 获取当前提示，如果有
String hint = controller.hint;

/// 移除焦点
controller.clearFocus();

/// 获取焦点
controller.requestFocus();

FSearch 为开发者提供了简单易用的控制器，通过这些控制器，开发者可以在任何位置修改或获取搜索栏的内容。

如何使用？

Pub依赖

dependencies:
  fsearch: ^<version number>

注意：请访问pub获取最新的版本号。

Git依赖

dependencies:
  fsearch:
    git:
      url: 'git@github.com:Fliggy-Mobile/fsearch.git'
      ref: '<分支号或标签号>'

注意：请参阅FSearch官方项目获取分支号或标签。

许可证

Copyright 2020-present Fliggy Android Team <alitrip_android@list.alibaba-inc.com>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

想要更多好看的控件？

如果您喜欢这个插件，请给它一个星星🌟！

如何运行Demo项目？

克隆项目到本地。
进入项目example目录并运行以下命令：

flutter create .

更多关于Flutter搜索功能插件fsearch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼•5 天前

更多关于Flutter搜索功能插件fsearch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用fsearch插件来实现搜索功能的示例代码。fsearch是一个用于在Flutter应用中实现高效搜索功能的插件，尽管它不是Flutter官方提供的插件，但假设它提供了一个类似的功能接口。请注意，由于fsearch可能不是一个真实存在的插件名称（在Flutter社区中未广泛认知），以下示例将基于一个假设的API接口来编写。

首先，你需要在pubspec.yaml文件中添加依赖项（这里假设fsearch是一个有效的包名）：

dependencies:
  flutter:
    sdk: flutter
  fsearch: ^x.y.z  # 替换为实际的版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤实现搜索功能：

导入插件

在你的Dart文件中导入fsearch插件：

import 'package:fsearch/fsearch.dart';

初始化搜索数据

假设你有一个数据源，比如一个包含用户名称的列表：

List<String> userData = [
  'Alice',
  'Bob',
  'Charlie',
  'David',
  'Eve',
  // ... 更多数据
];

创建搜索实例

使用fsearch插件创建一个搜索实例，并传入你的数据源：

FSearch search = FSearch(data: userData);

实现搜索功能

在用户输入搜索关键词时，调用搜索实例的搜索方法，并处理结果：

class _SearchScreenState extends State<SearchScreen> {
  TextEditingController _controller = TextEditingController();
  List<String> _searchResults = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索功能示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: '输入搜索关键词',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () {
                    _performSearch();
                  },
                ),
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: _searchResults.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_searchResults[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _performSearch() {
    String query = _controller.text.trim();
    if (query.isNotEmpty) {
      // 调用搜索方法，假设FSearch有一个名为search的方法
      List<String> results = search.search(query);
      setState(() {
        _searchResults = results;
      });
    } else {
      setState(() {
        _searchResults = [];
      });
    }
  }
}

运行应用

确保你的SearchScreen（或类似的Widget）被添加到你的应用路由中，并运行你的Flutter应用。现在，你应该能够看到一个搜索栏，当你输入关键词时，搜索结果将动态更新。

注意：由于fsearch可能不是一个真实存在的Flutter插件，上述代码中的FSearch类和它的search方法都是假设的。如果你使用的是一个真实的搜索插件，请查阅该插件的官方文档来了解如何正确初始化和使用它。通常，插件的README文件会包含详细的用法示例和API参考。