必備單品，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》- 輝煌的虛線效果