足夠好用，FFloat

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

你好開發者，來見識一下，這是由咱們精心爲開發者烘培 🍩 的全新組件，F～～～Float。

FFloat 是由 【阿里巴巴-飛豬-FliggyMobile 技術團隊】 開發維護的 FWidget 系列組件中的第 5 個成員。

正如咱們的 Slogan："用心提供精緻的組件，助您構建精美的應用。"

咱們正在用心的嘗試雕琢出一套好用的精美的組件，來幫助開發者們更易構建出 Beautiful App。

在過去的幾週中，咱們已經陸續向社區開放了 4 個精緻的基礎功能性組件，收到了來自開發者們投出的 333 個 Star，很是感謝開發者們的承認和支持 🥰。

現在，咱們迎來了 FWidget 的第 5 個成員， FFloat 。

FFloat 的誕生，來源於咱們平常開發中一直棘手的 浮動元素 問題。

咱們幾乎很難計算出，在 FFloat 出現之前，當須要開發以下交互元素時，咱們的焦慮能讓咱們喝掉幾罐可口可樂🥤

固然，就這個例子🌰而言，算是十分簡單的 浮動元素 示例了。

FFloat 的出現，將會讓一切的難題都迎刃而解。

如今，時間點將會分爲兩個部分， FFloat 出現前 和 FFloat 出現後 。

FFloat 在化簡爲繁方面是天生的好手。

這得益於咱們在 FFloat 內部進行了大量繁瑣的邏輯處理和計算，使得開發者在使用時，可以以最天然的，最簡單的方式去 還原創造 。

✨ 特性

這是 FFloat 爲開發者們帶來的一些特性：

• 同時支持 錨點模式 和 絕對模式 雙定位模式

• 夠靈活，夠簡單的 位置控制

• 支持配置 背景遮罩

• 自帶 精美動效 ，可以根據位置關係智能調整

• 豐富的 裝飾三角 配置

• 外層容器支持 圓角、邊框、漸變、陰影 等諸多配置

• 便捷的 顯示/隱藏控制

🛸 傳送區

🛸 【傳送門：FFloat Github 主頁 - 感謝您的 Star 🌟】

📖 【傳送門：FFloat 文檔】

📍 基於錨點元素的位置控制

足夠簡單，足夠有效

FFloat(
  /// 浮動元素內容
  (setter) => createContent(),
  alignment: _alignment,
  margin: _margin

  /// 錨點元素
  anchor: buildAnchor(),
)
複製代碼

FFloat 最難以想象的地方在於，開發者只須要經過 anchor 參數提供一個錨點， FFloat 就能知道如何在正確的地方顯示 浮動元素。

並且 FFloat 不會對本來的錨點元素及可見視圖樹結構產生任何不利影響，這很神奇吧！

對於所要展現的內容， FFloat 經過 FloatBuilder 函數來構建。開發者只須要在該函數中返回須要展現的浮動內容，剩下的事情， FFloat 會處理好。

此外，在 FloatBuilder 函數中，開發者可以經過函數的參數獲取到刷新函數 StateSetter ，這樣能夠將刷新範圍限制在浮動內容區域中，而不是去刷新整個頁面區域。這對於構建一個精美絲滑的應用來講，相當重要。

FFloat(
  (setter){
    return FButton(text: _text, 
      onClick: (){

        /// 更新浮動內容
        setter((){
          updateText();
        })            
      });
  },
  ...
)
複製代碼

若是對浮動元素出現的位置不滿意， FFloat 提供了 alignment 和 margin 參數，使開發者可以以難以置信的簡單的方式調整浮動元素的位置，直到滿意爲止。

alignment 提供了十分全面的相對位置選項：

類型	說明
topLeft	在錨點元素【上方】，且【左邊緣】與錨點元素對齊
topCenter	在錨點元素【上方】，且水平居中
topRight	在錨點元素【上方】，且【右邊緣】與錨點元素對齊
bottomLeft	在錨點元素【下方】，且【左邊緣】與錨點元素對齊
bottomCenter	在錨點元素【下方】，且水平居中
bottomRight	在錨點元素【下方】，且【右邊緣】與錨點元素對齊
leftTop	在錨點元素【左側】，且【上邊緣】與錨點元素對齊
leftCenter	在錨點元素【左側】，且垂直居中
leftBottom	在錨點元素【左側】，且【下邊緣】與錨點元素對齊
rightTop	在錨點元素【右側】，且【上邊緣】與錨點元素對齊
rightCenter	在錨點元素【右側】，且垂直居中
rightBottom	在錨點元素【右側】，且【下邊緣】與錨點元素對齊

在此基礎上，margin 參數可以讓開發者基於當前的相對位置關係，進一步微調浮動元素的偏移量。

在過去，要實現這些效果，須要耗費開發者大量的精力去處理複雜的位置關係邏輯，編寫不一樣的算法以肯定浮動元素的最終位置。

而如今，一切就是這麼簡單 😎。

📌 基於絕對座標的位置控制

多一種模式，多一種可能

GestureDetector(
  onPanDown: (details) {
    FFloat(
      (setter) => createContent(),
      autoDismissDuration: Duration(milliseconds: 2000),
      alignment: _alignment,
      canTouchOutside: false,

      /// 經過絕對座標配置浮動元素位置
      location: Offset(details.globalPosition.dx, details.globalPosition.dy),
    ).show(context); /// 顯示
  },
  child: FSuper(...),
)
複製代碼

在一些狀況下，咱們的浮動元素不須要基於一個錨點出現，而是但願它出如今一個肯定的位置。

若是開發者知道一個這樣的位置的話，就可使用 location 參數來設置浮動元素的位置。

此時，開發者徹底不須要將 FFloat 放到視圖樹中包裹任何的組件元素。這意味着開發者能夠隨時隨地，在任何回調或者函數中建立一個浮動元素。

經過 FFloat.show(context) 和 FFloat.dismiss()，開發者能夠隨時輕鬆的控制浮動元素 顯示/隱藏 。

而 FFloat 的其它一切配置都依舊有效。

💫 背景遮罩及動效

將效果豐富，將實現簡化

# 背景遮罩演示
FFloat(
  (_) => buildSearchWidget(),
  color: Colors.black.withOpacity(0.95),

  /// 配置背景遮罩顏色
  backgroundColor: Colors.black26,
  corner: FFloatCorner.all(20),
  margin: EdgeInsets.only(bottom: 10, left: 10),
  anchor: buildAnchor(),
  alignment: FFloatAlignment.topRight, 
 
  /// 配置點擊非浮動元素區域是否隱藏
  canTouchOutside: false,
)
複製代碼

在 FFloat 中，只需經過 backgroundColor 一個參數，就能實現浮動元素出現時的背景遮罩效果。

默認狀況下，當浮動元素出現時，會攔截全部事件，開發者能夠經過 canTouchOutside 這一參數關閉該模式。

# 動效配置
FFloat(
  (_) => FSuper(text: "Surprise😃 !"),
  anchor: buildAnchor(),

  /// 當該參數不爲 null 時，FFloat 會在指定時長後自動消失
  autoDismissDuration: Duration(milliseconds: 2000),

  /// 配置動效時長
  animDuration: Duration(milliseconds: 800),
),
複製代碼

FFloat 自帶精美的交互動效，根據浮動元素位置的不一樣，動效可以自動的進行調整，以呈現最優雅的視覺效果。

經過 animDuration 參數，開發者能夠自行定義動效時長。固然，若是不須要任何動效，只需傳入 null 便可。

在不少場景中，咱們每每但願一個浮動元素出現後，可以在持續一段時間後自動消失。

一般，要實現這樣的效果，開發者須要建立獨立的計時器，以及狀態機，在特殊的情況下，還須要額外的進行狀態邏輯校驗，以確保這一效果完美無缺。須要考慮的邏輯實在太多。

而 FFloat 可以讓開發者只需經過 autoDismissDuration 一個參數，就可以實現這一功能。

🔺 裝飾三角

省力，省心，省內存

FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),

  /// 配置裝飾三角的相對位置
  triangleAlignment: TriangleAlignment.start,

  /// 配置裝飾三角的相對偏移量
  triangleOffset: Offset(10, 10),

  /// 配置裝飾三角的寬
  triangleWidth: 20,

  /// 配置裝飾三角的高
  triangleHeight: 15,
)
複製代碼

在 FFloat 出現以前， Tooltips 風格的浮動元素的實現每每過於繁瑣。

而真正難住開發者的倒是浮動元素上的一個 小三角 😲。相信經驗豐富的開發者必定知道這背後的心酸。

因爲平臺系統沒有提供三角或帶有三角的組件支持，開發者不得不在使用 Canvas 繪製或使用圖片替代的方案中做出抉擇。

前者靈活高效，但實現十分繁瑣，這可不只僅是在 Canvas 上 draw 個三角形那麼簡單，還須要考慮與真正的浮動元素的融合問題。

後者實現方便，但對於不一樣顏色，不一樣位置、不一樣尺寸的三角，開發者須要爲它們配置多套圖片，內存也會隨時間逐步累加。但考慮到開發成本和效率，開發者們每每都會選擇這種實現方式。

FFloat 完全解決了這些問題，兼具高效與靈活，甚至比開發者們的指望更進一步。

在上面的 Code 演示中，展現了 FFloat 在小三角方面的經常使用配置，包括簡單的相對位置關係、尺寸、及可微調的位置偏移。

如今，開發者能夠清理掉應用程序中全部相似的圖片資源了 👏。

除了解決過去的問題， FFloat 更進一步的可以根據浮動元素以及錨點元素的相對位置關係，自動調整自身的三角形到合理的位置。這一過程，對於開發者而言是毫無感知的。

FFloat(
  (setter) => buildContent(),

  /// 配置是否隱藏裝飾三角
  hideTriangle: true,
  anchor: buildAnchor(),
),
複製代碼

默認狀況下，FFloat 會展現裝飾三角。若是不須要，開發者只用配置 hideTriangle: true，就能夠將它隱藏。

🔆 圓角 & 邊框

雖然簡單，但不簡陋

FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),
  alignment: FFloatAlignment.bottomLeft,
  hideTriangle: true,

  /// 加上圓角
  corner: FFloatCorner.all(6),

  /// 加上邊框
  strokeColor: mainShadowColor,
  strokeWidth: 1.0,
)
複製代碼

在上面的例子 🌰 中，咱們可以清晰的看到，一個漂亮的帶邊框的圓角浮層，構建起來如此的簡單。

FFloat 提供了 FWidget 系列組件一脈相承的，簡單的設置圓角的方式，僅僅經過一個簡單的 corner 參數就能靈活的配置圓角效果。

與 corner 配套的 cornerStyle 屬性，容許開發者隨時切換圓角的風格（圓角 or 斜切角）。

對於 FWidget 的老粉而言，相信已經知道，咱們爲組件配置邊框效果，僅僅須要經過 strokeWidth 和 strokeColor 這樣兩個簡單的屬性便可。

咱們的初心始終是，幫助開發者更簡單、更高效的構建出精美的應用。

🌔 漸變 & 陰影

要簡潔，也要出彩

FFloat(
  (setter) => buildContent(),
  anchor: buildAnchor(),
  hideTriangle: true,
  alignment: FFloatAlignment.bottomCenter,

  /// 配置漸變
  gradient: SweepGradient(
    colors: [
      Color(0xffE271C0),
      Color(0xffC671EB),
      Color(0xff7673F3),
      Color(0xff8BEBEF),
      Color(0xff93FCA8),
      Color(0xff94FC9D),
      Color(0xffEDF980),
      Color(0xffF0C479),
      Color(0xffE07E77),
    ],
  ),
  
  /// 添加陰影
  shadowColor: Colors.black38,
  shadowBlur: 3,
  shadowOffset: Offset(3, 2),
)
複製代碼

是的，FFloat 在兼具了諸多能力以後，仍然對漸變進行了支持。

僅僅是經過一個簡單的 gradient 屬性，開發者就能得到驚豔的漸變效果。

此外，做爲一個現代化的組件，FFloat 固然會對陰影做出支持。

開發者只須要配置 shadowColor 參數就能得到一個基礎的陰影效果。

若是想要更進一步對陰影做出調整的，可使用 shadowBlur 和 shadowOffset 參數來完成。

👏 更多的精彩

浮動元素的問題，就讓 FFloat 來解決好了，開發者只須要關心如何把應用變得更加精美就夠了。

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

😃 如何使用？

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

🌐 pub 依賴方式

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

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

🖥 git 依賴方式

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

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

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

往期組件

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

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

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

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