FWidget 用心提供精致的組件尿贫，助您構(gòu)建精美的應(yīng)用电媳。
對(duì)于一個(gè) Flutter 開發(fā)者而言，要實(shí)現(xiàn)下圖中的虛線效果可不是一個(gè)容易的事情 ??庆亡。
由于官方?jīng)]有準(zhǔn)備有關(guān)于虛線的 Widget 供開發(fā)者們食用匾乓。
很多時(shí)候，開發(fā)者們不得不自己手動(dòng)繪制或是使用一些特別的方式去實(shí)現(xiàn)又谋，但過程總是不那么容易的拼缝。
現(xiàn)在， FDottedLine 要來改變目前的狀況了彰亥。為開發(fā)者提供足夠優(yōu)雅的方式咧七，去完成虛線視圖的構(gòu)建。
FDottedLine 被作為由 【阿里巴巴-飛豬-FliggyMobile 技術(shù)團(tuán)隊(duì)】 開發(fā)維護(hù)的 FWidget 系列組件中的第 7 個(gè)組件任斋，獻(xiàn)給社區(qū)的開發(fā)者們继阻。希望幫助開發(fā)者們更易于創(chuàng)建精美的應(yīng)用程序。
在過去的幾周中，已經(jīng)開放的 FWidget 組件獲得了社區(qū)開發(fā)者們的持續(xù)關(guān)注瘟檩，開發(fā)者們目前已為其投出了近 800 個(gè) Star 抹缕。
今天，我們?yōu)殚_發(fā)者們帶來了強(qiáng)大的墨辛，支持靈活構(gòu)建虛線效果的組件 —— FDottedLine 卓研。
? 特性
看看 FDottedLine 都帶來了些什么改變吧：
同時(shí)支持水平、垂直兩個(gè)方向的虛線
支持創(chuàng)建虛線形狀
提供超簡(jiǎn)單的方式為 Widget 添加虛線邊框
支持創(chuàng)建靈活的虛線邊角效果
?? 傳送區(qū)
?? 【傳送門：FDottedLine Github 主頁】
?? 【傳送門：FDottedLine 文檔】
?? 水平虛線
一貫的簡(jiǎn)潔
FDottedLine(
color: color,
width: 160.0,
)
通過 FDottedLine 創(chuàng)建一個(gè)水平虛線睹簇，異常簡(jiǎn)單 ??奏赘。
停止對(duì)虛線視圖的恐懼！
? 垂直虛線
換種效果太惠，也同樣簡(jiǎn)單
FDottedLine(
color: color,
height: 160.0,
)
和 水平虛線 一樣簡(jiǎn)單磨淌。
到這，也許留心的開發(fā)者會(huì)發(fā)現(xiàn)垛叨。構(gòu)建 水平虛線 和 垂直虛線 的唯一差別就是：
當(dāng)需要構(gòu)建 水平虛線 時(shí)伦糯，只需要給
width參數(shù)賦值；而當(dāng)需要構(gòu)建 垂直虛線 時(shí)嗽元，只需要給height參數(shù)賦值敛纲。
天吶，這可太便捷了 ??剂癌。
?? 虛線圖形
永遠(yuǎn)要淤翔，不僅如此
FDottedLine(
color: Colors.lightBlue[600],
height: 100.0,
width: 50,
strokeWidth: 2.0,
dottedLength: 10.0,
space: 2.0,
)
如果給 width 和 height 同時(shí)賦值，開發(fā)者們會(huì)驚訝的發(fā)現(xiàn)佩谷，一個(gè)虛線圖形出現(xiàn)了旁壮。
是的， FDottedLine 不僅僅能夠幫助開發(fā)者十分簡(jiǎn)潔的構(gòu)建一維虛線視圖谐檀，還能用同樣簡(jiǎn)潔的方式構(gòu)建二維虛線圖形抡谐。
?? 邊角
再善變一點(diǎn)
FDottedLine(
color: Colors.lightBlue[600],
height: 70.0,
width: 70.0,
space: 2.0,
/// 設(shè)置邊角
corner: FDottedLineCorner.all(50),
)
通過 FDottedLine ，開發(fā)者甚至可以創(chuàng)建出虛線圖形的邊角效果桐猬。比如：虛線圓角矩形麦撵，虛線圓形..
而且構(gòu)建起來一貫的簡(jiǎn)單，僅僅配置一個(gè) corner 參數(shù)溃肪，就能完成諸多驚人的效果免胃。
?? Child
讓事情變得簡(jiǎn)單
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"),
),
)
相信開發(fā)者們都深有感受，在過去惫撰，想要為一個(gè) Widget 添加虛線邊框羔沙，是件十分困難的事情有巧。
但 FDottedLine 會(huì)讓事情變得空前簡(jiǎn)單郭蕉。開發(fā)者只需要將自己的 Widget 作為 FDottedLine 的 child 就完成了所有的工作了箩张。
在 FDottedLine 的背后放可，FDottedLine 會(huì)幫助開發(fā)者計(jì)算 Widget 的大小难裆，從而進(jìn)一步確定應(yīng)該如何創(chuàng)建正確的虛線邊框觉义。
這項(xiàng)工作黑毅，為開發(fā)者們開辟了一條新的路徑暑中。
?? 探索更多樂趣
看看 FDottedLine 都能干些什么棍郎！
當(dāng)擁有了如此簡(jiǎn)單的方式創(chuàng)建虛線其障，開發(fā)者可以自由構(gòu)建出更多精彩絕倫的視圖。
接下來關(guān)于 FDottedLine 的更多應(yīng)用涂佃，就期待開發(fā)者們的探索吧 ??励翼。
想要了解更多詳細(xì)內(nèi)容？請(qǐng)?jiān)L問 FDottedLine 官方主頁 (PS：別忘了投出一個(gè)你認(rèn)可的 Star 哦 ??)辜荠。
?? 如何使用汽抚？
在項(xiàng)目 pubspec.yaml 文件中添加依賴：
?? pub 依賴方式
dependencies:
fdottedline: ^<版本號(hào)>
?? 注意，請(qǐng)到 pub 獲取 FDottedLine 最新版本號(hào)
?? git 依賴方式
dependencies:
fdottedline:
git:
url: 'git@github.com:Fliggy-Mobile/fdottedline.git'
ref: '<分支號(hào) 或 tag>'
?? 注意伯病，分支號(hào) 或 tag 請(qǐng)以 FDottedLine 官方項(xiàng)目為準(zhǔn)造烁。
