全新技能，FDottedLine

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

對於一個 Flutter 開發者而言，要實現下圖中的虛線效果可不是一個容易的事情 🤔。

因爲官方沒有準備有關於虛線的 Widget 供開發者們食用。

不少時候，開發者們不得不本身手動繪製或是使用一些特別的方式去實現，但過程老是不那麼容易的。

如今， FDottedLine 要來改變目前的情況了。爲開發者提供足夠優雅的方式，去完成虛線視圖的構建。

FDottedLine 被做爲由 【阿里巴巴-飛豬-FliggyMobile 技術團隊】 開發維護的 FWidget 系列組件中的第 7 個組件，獻給社區的開發者們。但願幫助開發者們更易於建立精美的應用程序。

在過去的幾週中，已經開放的 FWidget 組件得到了社區開發者們的持續關注，開發者們目前已爲其投出了近 800 個 Star 。

今天，咱們爲開發者們帶來了強大的，支持靈活構建虛線效果的組件 —— FDottedLine 。

✨ 特性

看看 FDottedLine 都帶來了些什麼改變吧：

• 同時支持水平、垂直兩個方向的虛線

• 支持建立虛線形狀

• 提供超簡單的方式爲 Widget 添加虛線邊框

• 支持建立靈活的虛線邊角效果

🛸 傳送區

🛸 【傳送門：FDottedLine Github 主頁】

📖 【傳送門：FDottedLine 文檔】

🔩 水平虛線

一向的簡潔

FDottedLine(
 color: color,  width: 160.0, ) 複製代碼

經過 FDottedLine 建立一個水平虛線，異常簡單 😱。

中止對虛線視圖的恐懼！

⛓ 垂直虛線

換種效果，也一樣簡單

FDottedLine(
 color: color,  height: 160.0, ) 複製代碼

和 水平虛線 同樣簡單。

到這，也許留心的開發者會發現。構建 水平虛線 和 垂直虛線 的惟一差異就是：

當須要構建 水平虛線 時，只須要給 width 參數賦值；而當須要構建 垂直虛線 時，只須要給 height 參數賦值。

天吶，這可太便捷了 😱。

🔹 虛線圖形

永遠要，不只如此

FDottedLine(
 color: Colors.lightBlue[600],  height: 100.0,  width: 50,  strokeWidth: 2.0,  dottedLength: 10.0,  space: 2.0, ) 複製代碼

若是給 width 和 height 同時賦值，開發者們會驚訝的發現，一個虛線圖形出現了。

是的， FDottedLine 不單單可以幫助開發者十分簡潔的構建一維虛線視圖，還能用一樣簡潔的方式構建二維虛線圖形。

🌏 邊角

再善變一點

FDottedLine(
 color: Colors.lightBlue[600],  height: 70.0,  width: 70.0,  space: 2.0,   /// 設置邊角  corner: FDottedLineCorner.all(50), ) 複製代碼

經過 FDottedLine ，開發者甚至能夠建立出虛線圖形的邊角效果。好比：虛線圓角矩形，虛線圓形..

並且構建起來一向的簡單，僅僅配置一個 corner 參數，就能完成諸多驚人的效果。

🧩 Child

讓事情變得簡單

FDottedLine(
 color: color,  corner: FDottedLineCorner.all(6.0),   /// 添加 widget  child: Container(  color: Colors.blue[100],  width: 130,  height: 70,  alignment: Alignment.center,  child: Text("0873"),  ), ) 複製代碼

相信開發者們都深有感覺，在過去，想要爲一個 Widget 添加虛線邊框，是件十分困難的事情。

但 FDottedLine 會讓事情變得空前簡單。開發者只須要將本身的 Widget 做爲 FDottedLine 的 child 就完成了全部的工做了。

在 FDottedLine 的背後，FDottedLine 會幫助開發者計算 Widget 的大小，從而進一步肯定應該如何建立正確的虛線邊框。

這項工做，爲開發者們開闢了一條新的路徑。

💡 探索更多樂趣

看看 FDottedLine 都能幹些什麼！

當擁有了如此簡單的方式建立虛線，開發者能夠自由構建出更多精彩絕倫的視圖。

接下來關於 FDottedLine 的更多應用，就期待開發者們的探索吧 🔆。

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

😃 如何使用？

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

🌐 pub 依賴方式

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

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

🖥 git 依賴方式

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

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

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

更多精彩組件

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

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

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

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

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

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