必備單品，FSearch

FWidget 用心提供精緻的組件，助您構建精美的應用。

說到 居家旅行，bi~bi~bi~bi~ 的必備單品，相信開發者們總能在腦子 🧠 中從本身過去積累的知識庫中蹦出那麼幾個心儀的單品。

然而，就在今天，咱們試圖向開發者們的知識庫中添加一個全新的 必備單品 —— F~~Search 🎊。

FSearch 是有神聖使命的，它要力圖幫助開發者以最溫馨的方式，構建出屬於本身的，精美的 搜索欄 🔍。

在信息 💥 的今天，咱們總會想要在本身的應用中加上一個搜索欄，應用的使用者們須要它，所以開發者們也須要它。

那麼如今，請調整好聚光燈角度，把 BGM 放一下，有請 F~~Search～～ 👏👏👏。

✨ 特性

請容許我爲各位開發者介紹 FSearch 的驚人特性。

• 支持精美的邊框效果

• 提供豐富的邊角配置

• 支持驚豔的漸變效果

• 提供簡單易用的陰影能力

• 支持任意數量的前綴、後綴動做按鈕

• 提供豐富多彩的、靈活強大 Hint 效果

• 給開發者更易用的控制器

🛸 傳送區

🛸 【傳送門：FSearch Github 主頁】

📖 【傳送門：FSearch 文檔】

🔩 Base Demo

甩開束縛，重新出發

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 來構建一個搜索欄是一件十分怡然自得的事。

經過一些簡單的參數，開發者可以很容易去改變搜索欄的大小、顏色、字體。

當用戶點擊鍵盤的搜索 Action 時，會觸發 onSearch，使得開發者能夠在這裏進行一些搜索操做。

🌖 Prefixes & Suffixes

高度靈活，高度可控

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 參數，爲搜索欄分別配置任意個數的前綴或後綴動做按鈕。

這樣的高度靈活可控，也許是史無前例的。

🌈 Gradient

彩色就是神馬

FSearch(
 height: 30.0,  backgroundColor: mainBackgroundColor,  style: style,   /// 配置漸變色  ///  /// Set gradient  gradient: _gradient,  prefixes: [ buildAction() ], ) 複製代碼

FSearch 可以支持開發者建立一個漂亮的漸變色搜索欄。

只須要經過 gradient 參數進行配置就行。

🍄 Corner & Stroke & Shadow

想怎麼變，就怎麼變

/// #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，能夠實現更加複雜精美的效果。

📍 Cursor

細節可控

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 支持經過對搜索欄輸入框的光標進行修改。你想改爲什麼樣，就改爲什麼樣。

🗂 Hint

一步，便可炫！

/// #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 交換動畫，直到用戶開始輸入.

💻 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 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 爲開發者們提供了簡單好用的、肯定的控制器，經過控制器開發者能夠在任意的位置對搜索欄的內容進行修改，或者獲取。

想要了解更多詳細內容？請訪問 FSearch 官方主頁 (PS：別忘了投出一個你承認的 Star 哦 😘)。

😃 如何使用？

在項目 pubspec.yaml 文件中添加依賴：

🌐 pub 依賴方式

dependencies:
  fsearch: ^<版本號>
複製代碼

⚠️ 注意，請到 pub 獲取 FSearch 最新版本號

🖥 git 依賴方式

dependencies:
  fsearch:
    git:
      url: 'git@github.com:Fliggy-Mobile/fsearch.git'
      ref: '<分支號 或 tag>'
複製代碼

⚠️ 注意，分支號 或 tag 請以 FSearch 官方項目爲準。

感受還不錯？請到 《FSearch》的 Github 主頁投出您承認的一個 Star 🌟 吧！

更多精彩組件

• 《FSuper》- 幫助開發者快速構建精美的複雜視圖

• 《FButton》- 爲開發者準備了諸多美妙的配置項

• 《FSwitch》- 具備優良交互和視效的精美開關元素

• 《FRadio》- 一個適用於幾乎任意單選場景的單選組件

• 《FFloat》- 知足你對浮動元素的一切想象

• 《FRefresh》- 輕鬆構建下拉刷新效果

• 《FDottedLine》- 輝煌的虛線效果