開源項(xiàng)目專題系列(八)1.開源項(xiàng)目名稱：magpie_fly2.github地址：

https://github.com/wuba/magpie_fly

3.簡(jiǎn)介：magpie_fly 是58集體出品組件庫(kù)，統(tǒng)一管理日常開發(fā)中的基礎(chǔ)組件及高階組件，并提供了相對(duì)友好的方式介紹組件的具體使用方式。旨在降低日常開發(fā)中對(duì)組件的查找和學(xué)習(xí)成本，實(shí)現(xiàn)技術(shù)組件的統(tǒng)一，提升開發(fā)效率。全文大綱如下：

• 背景
• 簡(jiǎn)介
• 整體效果展示
• 特點(diǎn)與優(yōu)勢(shì)
• 實(shí)現(xiàn)方式
• 現(xiàn)有組件list
• 后期規(guī)劃

• 作者介紹

背景

相信很多公司都已經(jīng)在研究flutter，甚至已經(jīng)把flutter運(yùn)用到了自己的項(xiàng)目中，它的流暢性，熱加載以及其豐富，高效的UI表現(xiàn)力相信很多人都有體會(huì)。
在開始magpie項(xiàng)目之前，為了更多的了解flutter，我們首先用安居客的有料界面做了嘗試，但是在開發(fā)有料界面的時(shí)候，我們遇到了一些問題：

從上面的圖中可以看出，我們?cè)诂F(xiàn)實(shí)開發(fā)中難免會(huì)遇到以下的問題：

flutter提供的組件不滿足我們的開發(fā)需求，我們需要自己封裝或者使用第三方組件滿足我們的開發(fā)需求。

在不同平臺(tái)上搜到很多相似組件的不同實(shí)現(xiàn)方式，難以抉擇。

需要本地運(yùn)行才能看見組件的真正樣式，因?yàn)樽髡呓榻B的效果圖跟實(shí)際效果可能有偏差。

需要把demo down下來之后，才能找到組件效果實(shí)現(xiàn)的具體代碼。

沒有符合我們集團(tuán)內(nèi)部統(tǒng)一風(fēng)格的整套UI樣式。

寫UI的同學(xué)重復(fù)造輪子。比如一個(gè)button的創(chuàng)建，一個(gè)imageView的使用。

magpie_fly要做什么：

我們希望統(tǒng)一組件管理，以最友好的方式去介紹組件，降低組件的查找和學(xué)習(xí)成本。所以我們需要一個(gè)組件庫(kù)，當(dāng)然這個(gè)組件庫(kù)是開放的，我們希望更多的開發(fā)者將自己的組件貢獻(xiàn)到組件庫(kù)中。

同一個(gè)集團(tuán)下就應(yīng)該要考慮體驗(yàn)一致性的問題，所以我們希望像material-ui和fusion.design一樣，用flutter實(shí)現(xiàn)一整套統(tǒng)一UI風(fēng)格的組件。

聚集現(xiàn)有最優(yōu)的高階組件。

我們希望通過設(shè)計(jì)圖就能生成出對(duì)應(yīng)的UI代碼，這樣不但能解決UI圖跟實(shí)際開發(fā)效果不一致性的問題，同時(shí)能降低設(shè)計(jì)與開發(fā)的溝通成本，解放了開發(fā)同學(xué)重復(fù)寫UI代碼的擔(dān)子。

目前我們只做了第一點(diǎn)，剩下三個(gè)方面將是我們組件庫(kù)后期開發(fā)的重點(diǎn)。

整體效果展示

• 58公眾號(hào)：動(dòng)態(tài)顯示58最新技術(shù)文章，方便向外界宣傳58技術(shù)

• widget：庫(kù)中管理的所有組件列表，便于開發(fā)者進(jìn)行查找

• 組件詳情：組件介紹界面，markdown+效果+代碼的顯示方式

• 使用文檔：詳細(xì)的描述了用源碼的方式跑magpie_fly App的具體方法

• 貢獻(xiàn)流程：詳細(xì)的描述了我們應(yīng)該怎么樣去把自己寫好的組件接入到組件庫(kù)中

特點(diǎn)與優(yōu)勢(shì)

1、特點(diǎn)

• ? 集合所有日常開發(fā)中常用組件，統(tǒng)一管理
• ? 文檔、組件效果和代碼同時(shí)顯示
• ? 支持快速接入新的widget

2、優(yōu)勢(shì)

與Flutter-Go對(duì)比

實(shí)現(xiàn)方式

1、組件詳情頁(yè)

?1.1 方案選擇

• 文檔+圖片

通常情況下，都會(huì)想到用文本的方式去介紹一個(gè)組件的使用方式，如果想要顯示組件的樣式，基本都是通過嵌入圖片或者gif的方式去顯示一個(gè)組件的具體效果，這樣做的弊端是，如果我修改了組件的樣式，就算只改了一點(diǎn)點(diǎn)，我們都需要重新截圖或者錄gif動(dòng)圖。很顯然這是很麻煩的。

• 專門用widget實(shí)現(xiàn)一個(gè)完整的詳情頁(yè)

開發(fā)者針對(duì)不同的組件自己去用widget實(shí)現(xiàn)一套自己的組件詳情頁(yè)，但是我們這是一個(gè)組件庫(kù)，就希望統(tǒng)一詳情頁(yè)樣式和風(fēng)格，所以讓開發(fā)者自己實(shí)現(xiàn)自己的詳情頁(yè)是不可取的，并且開發(fā)者自己全部開發(fā)一個(gè)詳情頁(yè)，其實(shí)消耗的精力也是比較大的。

• 文檔+組件效果+代碼

我們希望在給開發(fā)者介紹組件的同時(shí)，開發(fā)者能對(duì)組件進(jìn)行操作，增加開發(fā)者對(duì)組件的理解，并且能直接看見實(shí)現(xiàn)該組件效果的對(duì)應(yīng)代碼，方便開發(fā)者學(xué)習(xí)的同時(shí)，還能一鍵復(fù)制到自己的工程中直接使用。這樣大大降低了開發(fā)者的學(xué)習(xí)成本，從而提高開發(fā)效率。于是我們借鑒了material-ui的思想，實(shí)現(xiàn)了一套markdown + widget效果(可以交互) + 代碼的方案。

1.2 方案文檔+組件效果+代碼顯示實(shí)現(xiàn)方式

我們先來看下效果：

可以看出，我們中間嵌入的組件是可以手動(dòng)進(jìn)行操作的，而該組件是由下面的代碼渲染出來的。那我們是怎么樣實(shí)現(xiàn)這樣的效果的呢？

雖然詳情頁(yè)看起來是由三部分組成，實(shí)際上開發(fā)者只需要編寫markdown文檔，并且在文檔中添加我們規(guī)定的代碼，我們通過解析特定markdown文檔的方式得到這樣的效果。

我們來看下需要嵌入組件的markdown的格式：

框出來的地方，就是我們需要在.md中對(duì)應(yīng)位置嵌入組件時(shí)的固定嵌入代碼。我們會(huì)在解析markdown的時(shí)候，專門對(duì)嵌入的代碼進(jìn)行處理。

參數(shù)詳解：

demo：需要引入的樣式的代碼路徑
code：默認(rèn)true，是否要展示widget對(duì)應(yīng)的代碼
jump：默認(rèn)false，在當(dāng)前頁(yè)面展示效果+對(duì)應(yīng)代碼；true則替換為占位符，跳到二級(jí)頁(yè)面展示

我們拿到demo的value值，從config.dart中得到對(duì)應(yīng)的demo實(shí)例，也就是自己組件的widget，而正常的文檔通過第三方庫(kù)flutter_markdown轉(zhuǎn)換成對(duì)應(yīng)的flutter原生widget。于是整個(gè)markdown文檔就全部轉(zhuǎn)換成了多個(gè)widget組合的列表，然后放到ListView中進(jìn)行顯示。

那我們是怎么樣把渲染組件的代碼嵌入到markdown中的呢？
再來看下我們嵌入的代碼：

{{"demo": "lib/demo/horizonal_scroll/HorizontalScrollDefault.dart", "code": true}}

這樣，我們就只需要修改代碼，效果和對(duì)應(yīng)的代碼都會(huì)同步展示出來。

另外，如果展示的效果是全屏的，只需要加個(gè)"jump":true的參數(shù)，特殊代碼就會(huì)解析成一個(gè)占位符，點(diǎn)擊跳轉(zhuǎn)到二級(jí)頁(yè)面展示效果，點(diǎn)擊右上角菜單即可查看對(duì)應(yīng)的代碼。

代碼關(guān)鍵字高亮展示，方便閱讀，支持代碼折疊、復(fù)制功能。

2、快速接入組件

既然是組件庫(kù)，就支持不斷的往庫(kù)中新增組件，為了讓開發(fā)者接入組件的時(shí)候更加簡(jiǎn)單方便，我們提供了接入腳本，腳本會(huì)根據(jù)輸入的組件信息，會(huì)自動(dòng)在example/lib/demo文件創(chuàng)建一個(gè)組件模版，接入方只需要修改自己組件相關(guān)的信息，就能在界面中進(jìn)行顯示。

• 具體設(shè)計(jì)

參數(shù)詳解：

.md文件：組件詳細(xì)描述markdown文件，其中可插入組件效果的特定代碼塊，需開發(fā)者自行編輯
.dart文件：對(duì)應(yīng)組件的效果實(shí)現(xiàn)文件，需提供組件的開發(fā)者自行實(shí)現(xiàn)相應(yīng)效果
.page.json：根據(jù)執(zhí)行腳本自動(dòng)生成的組件信息文件，供ListData讀取顯示在列表頁(yè)中，不需要開發(fā)者操作

腳本主要做了兩件個(gè)事情：

在example/lib/demo中生成對(duì)應(yīng)組件的文件夾

自動(dòng)在ListDatas中加入需要在list中顯示的組件

然后在assets中配置自己的文件夾路徑

- lib/demo/test_wdiget/

并且需要在util/config.dart中配置自己的demo數(shù)據(jù)

'lib/demo/test_widget/test_widget': () => TestWidget(),

至此就完成了一個(gè)簡(jiǎn)單的接入工作，運(yùn)行工程，會(huì)在列表頁(yè)看見加入的demo。

現(xiàn)有組件list

我們從安居客有料中提取了多個(gè)高階組件，下面我們來介紹下這些組件。

1. video：視頻Feed流滾動(dòng)探測(cè)播放插件

我們經(jīng)常會(huì)遇到這樣的需求，當(dāng)視頻滑動(dòng)到列表的某一個(gè)位置時(shí)，視頻自動(dòng)播放。甚至列表存在視頻和其他帖子參差的數(shù)據(jù)，這個(gè)時(shí)候我們就需要去動(dòng)態(tài)的檢測(cè)可視范圍內(nèi)符合條件的視頻數(shù)據(jù)，該組件就是在feed流中探測(cè)視頻控件進(jìn)行操作的插件。

使用方式：

? 1.1 使用ScrollDetectListener包裹ListView，ListView為業(yè)務(wù)相關(guān)的視頻流帖子。

? 1.2 視頻帖子使用MetaConsumer包裹；

2. pinned_sliver： 混合嵌套列列表中的吸頂安全區(qū)解決?方案

在Flutter中使用AppBarLayout和SliverPersistentHeader都可以做出基本的吸頂效果。AppBarLayout內(nèi)部使用的也是SliverPersistentHeader，可以把它理解為一個(gè)Framework定制好的狀態(tài)欄控件，支持較多設(shè)置屬性，包括吸頂和float等。

當(dāng)吸頂遇到劉海屏?xí)r，事情就會(huì)變得有些復(fù)雜，一般來說我們希望：

? 2.1 在沒有吸頂前，盡可能多的利用屏幕，也就是需要使用沉浸式；

? 2.2 當(dāng)吸頂?shù)臅r(shí)，吸頂塊需要在劉海之下，也就是空出安全區(qū)；

而flutter本身的組件是不支持吸頂前后UI樣式不一樣的情況，該組件就是為了解決這種情況誕生的。

3. bannder_round： 一個(gè)支持多種形式的高性能輪播組件

滾播組件算是在日常開發(fā)中很常見的一種組件了，該組件支持默認(rèn)滾播圖片和自定義滾播item樣式，可設(shè)置定時(shí)滾動(dòng)等功能。

4. horizonal_scroll： 帶尾部加載更多樣式的橫滑scrollview

在日常開發(fā)中，經(jīng)常會(huì)遇到右滑加載更多的需求，但是flutter提供的Scrollview是不提供底部加載更多效果的。為了減少開發(fā)時(shí)間，提供了一個(gè)帶阻尼回彈效果的橫向加載更多組件，底部加載更多可用自定義組件，也可用組件內(nèi)提供的默認(rèn)樣式和顯示文字的樣式。

5. draggable_btn： 一個(gè)跟隨手指全屏拖動(dòng)的按鈕

DraggableBtn是一個(gè)跟隨手指全屏拖動(dòng)的組件，當(dāng)手指按住時(shí)放大，隨著手指移動(dòng)，放開恢復(fù)原來大小，停留在手指彈起的位置。

可適用于懸浮廣告位和debug時(shí)調(diào)試的懸浮按鈕。

6. popup_window： 一個(gè)任意位置，箭頭跟蹤View的彈層效果組件，可指定上下左右方向，彈出對(duì)應(yīng)方向的彈層，一般適用于彈出。

后期規(guī)劃

希望更多開發(fā)者能積極的參與到我們的組件庫(kù)中，我們會(huì)不斷豐富我們的內(nèi)容，使magpie_fly成為日常開發(fā)中必不可少的工具之一。作者介紹

吳丹，58同城二手車技術(shù)部-iOS高級(jí)開發(fā)工程師，主要負(fù)責(zé)58同城App的二手車相關(guān)研發(fā)工作。金修博，58同城商業(yè)智能中心-iOS高級(jí)開發(fā)工程師，主要負(fù)責(zé)美事App的相關(guān)研發(fā)工作。李義新，58安居客二手房經(jīng)紀(jì)人Android高級(jí)開發(fā)工程師，主要負(fù)責(zé)移動(dòng)經(jīng)紀(jì)人App的相關(guān)研發(fā)工作。Live58對(duì)外技術(shù)沙龍第五期

Flutter專場(chǎng)——Flutter在58的應(yīng)用實(shí)踐系列話題

系列2已準(zhǔn)備就緒

本周日晚7:00準(zhǔn)時(shí)開幕掃碼添加“58技術(shù)小秘書”微信?: jishu-58添加小秘書微信后由小秘書拉您進(jìn)項(xiàng)目交流群

END

閱讀推薦

1. 詳解站點(diǎn)壓測(cè)利器——nGrinder
2. 開源｜Magpie：混合開發(fā)工程化框架
3. Go服務(wù)在容器內(nèi)CPU使用率異常問題排查手記
4. 開源｜Magpie：平臺(tái)工具鏈開發(fā)實(shí)踐5. 開源｜Magpie：58跨平臺(tái)技術(shù)應(yīng)用及Flutter實(shí)踐概覽

總結(jié)

以上是生活随笔為你收集整理的ionic 修改组件默认样式_开源Magpie：组件库详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。