抑郁症健康 > 必备单品 FSearch

必备单品 FSearch

时间：2022-10-19 19:52:14

相关推荐

FWidget用心提供精致的组件，助您构建精美的应用。

说到居家旅行，bibibibi的必备单品，相信开发者们总能在脑子 🧠 中从自己过去积累的知识库中蹦出那么几个心仪的单品。

然而，就在今天，我们试图向开发者们的知识库中添加一个全新的必备单品——F~~Search🎊。

FSearch是有神圣使命的，它要力图帮助开发者以最舒适的方式，构建出属于自己的，精美的搜索栏🔍。

在信息 💥 的今天，我们总会想要在自己的应用中加上一个搜索栏，应用的使用者们需要它，因此开发者们也需要它。

那么现在，请调整好聚光灯角度，把 BGM 放一下，有请F~~Search～～👏👏👏。

✨ 特性

请允许我为各位开发者介绍FSearch的惊人特性。

支持精美的边框效果

提供丰富的边角配置

支持惊艳的渐变效果

提供简单易用的阴影能力

支持任意数量的前缀、后缀动作按钮

提供丰富多彩的、灵活强大 Hint 效果

给开发者更易用的控制器

🛸 传送区

🛸 【传送门：FSearch Github 主页】

📖 【传送门：FSearch 文档】

🔩 Base Demo

甩开束缚，从新出发

FSearch(/// 设置高////// Set heightheight: 30.0,/// 设置背景颜色////// Set background colorbackgroundColor: color,/// 设置输入内容样式////// Set input text stylestyle: style,/// 点击键盘搜索时触发////// Fired when you click on the keyboard to searchonSearch: (value) {/// do something},prefixes: [buildAction()],)

使用FSearch来构建一个搜索栏是一件十分悠然自得的事。

通过一些简单的参数，开发者能够很容易去改变搜索栏的大小、颜色、字体。

当用户点击键盘的搜索Action时，会触发onSearch，使得开发者可以在这里进行一些搜索操作。

🌖 Prefixes & Suffixes

高度灵活，高度可控

FSearch(height: 30.0,backgroundColor: mainBackgroundColor,style: style,/// 前缀 Widget////// prefix widgetprefixes: [ buildAction() ],/// 后缀 Widget////// suffix widgetsuffixes: [buildAction_1(),buildAction_2(),buildAction_3(),],onSearch: _onSearch,)

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

这样的高度灵活可控，也许是前所未有的。

🌈 Gradient

彩色就是神马

FSearch(height: 30.0,backgroundColor: mainBackgroundColor,style: style,/// 配置渐变色////// Set gradientgradient: _gradient,prefixes: [ buildAction() ],)

FSearch能够支持开发者创建一个漂亮的渐变色搜索栏。

只需要通过gradient参数进行配置就行。

🍄 Corner & Stroke & Shadow

想怎么变，就怎么变

/// #1FSearch(height: 30.0,backgroundColor: color,style: style,/// 边角////// Cornercorner: FSearchCorner(leftTopCorner: 15.0,leftBottomCorner: 15.0,rightBottomCorner: 15.0),/// 边框宽////// border widthstrokeWidth: 1.0,/// 边框颜色////// border colorstrokeColor: mainTextTitleColor,/// 阴影////// shadowshadowColor: Colors.black38,shadowBlur: 5.0,shadowOffset: Offset(2.0, 2.0),prefixes: [buildAction()],)

FSearch的边框和阴影效果和其它的FWidget成员一样，简单易用。

通过corner参数，开发者可以使用FSearchCorner随意的控制FSearch的表边角大小。

/// #2FSearch(height: 30.0,backgroundColor: color,style: style,/// 边角////// Cornercorner: FSearchCorner.all(6.0),/// 边角风格////// Corner stylecornerStyle: FSearchCornerStyle.bevel,prefixes: [buildAction()],)

如果配合cornerStyle，可以实现更加复杂精美的效果。

📍 Cursor

细节可控

FSearch(/// 光标配置////// CursorcursorColor: Colors.red[200],cursorRadius: 5.0,cursorWidth: 5.0,height: 36.0,style: style,gradient: _gradient,corner: _corner,prefixes: [ buildAction() ],suffixes: [ buildAction() ],)

FSearch支持通过对搜索栏输入框的光标进行修改。你想改成什么样，就改成什么样。

🗂 Hint

一步，即可炫！

/// #1FSearch(height: 36.0,style: style,color: _color,corner: _corner,prefixes: [ buildAction() ],suffixes: [ buildAction() ],/// Hintshints: ["FSuper is awesome 👍","Come to use FButton","You will love FRefresh",],/// 开启 hint 交换动画////// Turn on hint exchange animationhintSwitchEnable: true,/// 配置 hint 交换动画类型////// Configure hint exchange animation typehintSwitchType: FSearchAnimationType.Fade,)

FSearch为开发者提供了非常强大的Hint效果。

开发者可以很容易的为FSearch设置多条Hint，而且可以通过配置hintSwitchEnable: true来开启多Hint交换动画。

当用户开始输入时，Hint 将会被自动隐藏，同时交换动画也会被停止。

当搜索输入框内容再次变为空时，Hint 将会再次出现，且开始播放交换动画。

/// #2FSearch(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,)

FSearch为开发者准备了丰富的交换动画。默认情况下，FSearch会使用最常见的翻滚交换动画，即FSearchAnimationType.Scroll。

当然，开发者可以通过hintSwitchType参数来配置自己喜欢的动画类型。

💡 注意，当hints.length == 1时，将不会播放 Hint 交换动画。此时仅仅会展示一个普通的 Hint。

/// #3FSearch(height: 36.0,style: style,color: _color,corner: _corner,prefixes: [ buildAction() ],suffixes: [ buildAction() ],/// Hintshints: ["Embrace FWidget 👬","We care about your app 🥰","Want to build beautiful apps 🤨 ?",],hintSwitchEnable: true,/// 配置 hint 交换动画类型////// Configure hint exchange animation typehintSwitchType: FSearchAnimationType.Scale,/// 获得焦点时是否停止交换动画////// Whether to stop exchanging animation when focus is obtainedstopHintSwitchOnFocus: false,)

默认情况下，当FSearch获得输入焦点，FSearch会自动暂停Hint交换动画；再次获得焦点时，又会自动恢复。

通过配置stopHintSwitchOnFocus: false，可以让FSearch获得焦点的情况下，依旧继续播放Hint交换动画，直到用户开始输入.

💻 Controller

你的程序，你说了算

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,)/// 获取输入框内容////// Get the input box contentString input = controller.text;/// 清空输入框内容////// Clear the contents of the input boxcontroller.text = null;/// 获取当前 hint，如果有的话////// Get the current hint, if anyString hint = controller.hint;/// 移除焦点/// /// Remove focuscontroller.clearFocus();/// 获取焦点////// Request focuscontroller.requestFocus();

FSearch为开发者们提供了简单好用的、确定的控制器，通过控制器开发者可以在任意的位置对搜索栏的内容进行修改，或者获取。