FWidget 用心提供精致的组件,助您构建精美的应用。
说到 居家旅行,bi~bi~bi~bi~ 的必备单品,相信开发者们总能在脑子 🧠 中从本身过去积累的知识库中蹦出那么几个心仪的单品。html
然而,就在今天,咱们试图向开发者们的知识库中添加一个全新的 必备单品 —— F~~Search 🎊。git
FSearch 是有神圣使命的,它要力图帮助开发者以最温馨的方式,构建出属于本身的,精美的 搜索栏 🔍。github
在信息 💥 的今天,咱们总会想要在本身的应用中加上一个搜索栏,应用的使用者们须要它,所以开发者们也须要它。web
那么如今,请调整好聚光灯角度,把 BGM 放一下,有请 F~~Search~~ 👏👏👏。app
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
请容许我为各位开发者介绍 FSearch 的惊人特性。字体
甩开束缚,重新出发
FSearch( /// 设置高 /// /// Set height height: 30.0, /// 设置背景颜色 /// /// Set background color backgroundColor: color, /// 设置输入内容样式 /// /// Set input text style style: style, /// 点击键盘搜索时触发 /// /// Fired when you click on the keyboard to search onSearch: (value) { /// do something }, prefixes: [buildAction()], )
使用 FSearch 来构建一个搜索栏是一件十分怡然自得的事。动画
经过一些简单的参数,开发者可以很容易去改变搜索栏的大小、颜色、字体。ui
当用户点击键盘的搜索 Action 时,会触发 onSearch
,使得开发者能够在这里进行一些搜索操做。url
高度灵活,高度可控
FSearch( height: 30.0, backgroundColor: mainBackgroundColor, style: style, /// 前缀 Widget /// /// prefix widget prefixes: [ buildAction() ], /// 后缀 Widget /// /// suffix widget suffixes: [ buildAction_1(), buildAction_2(), buildAction_3(), ], onSearch: _onSearch, )
在 FSearch 中,开发者能够经过 prefixes
和 suffixes
参数,为搜索栏分别配置任意个数的前缀或后缀动做按钮。spa
这样的高度灵活可控,也许是史无前例的。
彩色就是神马
FSearch( height: 30.0, backgroundColor: mainBackgroundColor, style: style, /// 配置渐变色 /// /// Set gradient gradient: _gradient, prefixes: [ buildAction() ], )
FSearch 可以支持开发者建立一个漂亮的渐变色搜索栏。
只须要经过 gradient
参数进行配置就行。
想怎么变,就怎么变
/// #1 FSearch( height: 30.0, backgroundColor: color, style: style, /// 边角 /// /// Corner corner: FSearchCorner( leftTopCorner: 15.0, leftBottomCorner: 15.0, rightBottomCorner: 15.0), /// 边框宽 /// /// border width strokeWidth: 1.0, /// 边框颜色 /// /// border color strokeColor: mainTextTitleColor, /// 阴影 /// /// shadow shadowColor: Colors.black38, shadowBlur: 5.0, shadowOffset: Offset(2.0, 2.0), prefixes: [buildAction()], )
FSearch 的 边框 和 阴影 效果和其它的 FWidget 成员同样,简单易用。
经过 corner
参数,开发者可使用 FSearchCorner 随意的控制 FSearch 的表边角大小。
/// #2 FSearch( height: 30.0, backgroundColor: color, style: style, /// 边角 /// /// Corner corner: FSearchCorner.all(6.0), /// 边角风格 /// /// Corner style cornerStyle: FSearchCornerStyle.bevel, prefixes: [buildAction()], )
若是配合 cornerStyle
,能够实现更加复杂精美的效果。
细节可控
FSearch( /// 光标配置 /// /// Cursor 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 hints: [ "FSuper is awesome 👍", "Come to use FButton", "You will love FRefresh", ], /// 开启 hint 交换动画 /// /// Turn on hint exchange animation hintSwitchEnable: true, /// 配置 hint 交换动画类型 /// /// Configure hint exchange animation type hintSwitchType: FSearchAnimationType.Fade, )
FSearch 为开发者提供了很是强大的 Hint 效果。
开发者能够很容易的为 FSearch 设置多条 Hint ,并且能够经过配置 hintSwitchEnable: true
来开启多 Hint 交换动画。
当用户开始输入时,Hint 将会被自动隐藏,同时交换动画也会被中止。
当搜索输入框内容再次变为空时,Hint 将会再次出现,且开始播放交换动画。
/// #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, )
FSearch 为开发者准备了丰富的交换动画。默认状况下, FSearch 会使用最多见的翻滚交换动画,即 FSearchAnimationType.Scroll
。
固然,开发者能够经过 hintSwitchType
参数来配置本身喜欢的动画类型。
💡 注意,当
hints.length == 1
时,将不会播放 Hint 交换动画。此时仅仅会展现一个普通的 Hint。
/// #3 FSearch( height: 36.0, style: style, color: _color, corner: _corner, prefixes: [ buildAction() ], suffixes: [ buildAction() ], /// Hints hints: [ "Embrace FWidget 👬", "We care about your app 🥰", "Want to build beautiful apps 🤨 ?", ], hintSwitchEnable: true, /// 配置 hint 交换动画类型 /// /// Configure hint exchange animation type hintSwitchType: FSearchAnimationType.Scale, /// 得到焦点时是否中止交换动画 /// /// Whether to stop exchanging animation when focus is obtained stopHintSwitchOnFocus: false, )
默认状况下,当 FSearch 得到输入焦点, FSearch 会自动暂停 Hint 交换动画;再次得到焦点时,又会自动恢复。
经过配置 stopHintSwitchOnFocus: false
,可让 FSearch 得到焦点的状况下,依旧继续播放 Hint 交换动画,直到用户开始输入.
你的程序,你说了算
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 content String input = controller.text; /// 清空输入框内容 /// /// Clear the contents of the input box controller.text = null; /// 获取当前 hint,若是有的话 /// /// Get the current hint, if any String hint = controller.hint; /// 移除焦点 /// /// Remove focus controller.clearFocus(); /// 获取焦点 /// /// Request focus controller.requestFocus();
FSearch 为开发者们提供了简单好用的、肯定的控制器,经过控制器开发者能够在任意的位置对搜索栏的内容进行修改,或者获取。
在项目 pubspec.yaml
文件中添加依赖:
dependencies: fsearch: ^<版本号>
⚠️ 注意,请到 pub 获取 FSearch 最新版本号
dependencies: fsearch: git: url: 'git@github.com:Fliggy-Mobile/fsearch.git' ref: '<分支号 或 tag>'
⚠️ 注意,分支号 或 tag 请以 FSearch 官方项目为准。