Flutter動(dòng)態(tài)化方案調(diào)研

騰訊課堂14M

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),墾利企業(yè)網(wǎng)站建設(shè),墾利品牌網(wǎng)站建設(shè),網(wǎng)站定制,墾利網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,墾利網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

今日頭條3M

閑魚(yú)22M

百度貼吧13M

螞蟻財(cái)富56.8M

百度網(wǎng)盤(pán)14M

手機(jī)淘寶15M

貝殼找房8M

由粗粒度小組件動(dòng)態(tài)拼裝出頁(yè)面，Native端已經(jīng)有很多成熟的框架，如天貓的Tangram。

開(kāi)發(fā)語(yǔ)言：iOS、Android

適用場(chǎng)景：快速迭代的活動(dòng)營(yíng)銷(xiāo)頁(yè)面

優(yōu)點(diǎn)：無(wú)侵入，更新簡(jiǎn)單

缺點(diǎn)：提前預(yù)埋，擴(kuò)展性差，靈活性差

以webview作為容器的app，歷史悠久，最早到2011年。

開(kāi)發(fā)語(yǔ)言：HTML

適用場(chǎng)景：雙端嚴(yán)格一致的銀行類(lèi)app，容器類(lèi)的支付寶小程序等

優(yōu)點(diǎn)：動(dòng)態(tài)更新，跨平臺(tái)

缺點(diǎn)：性能，加載速度

UI用Xml+JS表達(dá)，用Native View渲染。

開(kāi)發(fā)語(yǔ)言：Xml+JS

適用場(chǎng)景：雙端嚴(yán)格一致的銀行類(lèi)app，容器類(lèi)的支付寶小程序等

優(yōu)點(diǎn)：native組件，生態(tài)成熟

缺點(diǎn)：三方庫(kù)crash，性能缺陷

UI用Dart表達(dá)，用Dart engine渲染。

Flutter官方不支持動(dòng)態(tài)化。原因是Flutter在 Release 模式下構(gòu)建的是 AOT 編譯產(chǎn)物，在 Debug 模式下構(gòu)建的是 JIT ，AOT 依賴的 Dart VM 和 JIT 并不一樣， JIT Release 并不支持 iOS 設(shè)備?？尚械姆桨甘牵篈OT 需要一個(gè)編譯后的 “Dart VM”。抽離一份 DartVM 獨(dú)立編譯，再以動(dòng)態(tài)庫(kù)的形式引入項(xiàng)目。

開(kāi)發(fā)語(yǔ)言：Dart

適用場(chǎng)景：iOS、Android、Web、Desktop、Embed

優(yōu)點(diǎn)：性能最佳

缺點(diǎn)：增大包體積 20MB+

大廠的主流方案。UI用JS表達(dá)，用Dart engine渲染。

開(kāi)發(fā)語(yǔ)言：JS、類(lèi)JS

適用場(chǎng)景：iOS、Android

優(yōu)點(diǎn)：性能最佳

缺點(diǎn)：需要掌握J(rèn)S、Dart兩個(gè)語(yǔ)言和框架

大廠的主流方案。UI用Dart表達(dá)，用Dart engineX渲染。

開(kāi)發(fā)語(yǔ)言：Dart

適用場(chǎng)景：iOS、Android

優(yōu)點(diǎn)：性能最佳

缺點(diǎn)：需要改造Dart engine

1、 美團(tuán)外賣(mài)Flutter動(dòng)態(tài)化實(shí)踐

2、 攜程App 首頁(yè)動(dòng)態(tài)化探索

3、 Flutter 動(dòng)態(tài)化在最右 App 中的實(shí)踐

4、 Flutter 動(dòng)態(tài)化熱更新的思考與實(shí)踐

5、 NOW直播Flutter動(dòng)態(tài)搜索列表頁(yè)實(shí)現(xiàn)

6、 Flutter動(dòng)態(tài)化的方案對(duì)比及最佳實(shí)現(xiàn)-閑魚(yú)

7、 基于JavaScript 的MXFlutter

Flutter：手把手教你使用滾動(dòng)型列表組件：ListView

ListView的基礎(chǔ)創(chuàng)建使用有三種方式：

通過(guò)默認(rèn)構(gòu)造函數(shù)來(lái)創(chuàng)建列表，應(yīng)用場(chǎng)景 = 短列表

這種方式創(chuàng)建的列表存在一個(gè)問(wèn)題：對(duì)于那些長(zhǎng)列表或者需要較昂貴渲染開(kāi)銷(xiāo)的子組件，即使還沒(méi)有出現(xiàn)在屏幕中但仍然會(huì)被ListView所創(chuàng)建，這將是一項(xiàng)較大的開(kāi)銷(xiāo)，使用不當(dāng)可能引起性能問(wèn)題甚至卡頓。

長(zhǎng)列表

列表子項(xiàng)之間需要分割線

ListView的進(jìn)階使用主要包括：下拉刷新 上拉加載

在Flutter中，ListView結(jié)合RefreshIndicator組件實(shí)現(xiàn)下拉刷新

通過(guò)包裹一層RefreshIndicator，自定義onRefresh回調(diào)方法實(shí)現(xiàn)

方式有兩種：

通過(guò)ListView.controller屬性可以判斷ListView是否滑動(dòng)到了底部，再進(jìn)行上拉加載

NotificationListener是一個(gè)Widget，可監(jiān)聽(tīng)子Widget發(fā)出的Notification

ListView在滑動(dòng)時(shí)中會(huì)發(fā)出ScrollNotification類(lèi)型的通知，可通過(guò)監(jiān)聽(tīng)該通知得到ListView的滑動(dòng)狀態(tài)，判斷是否滑動(dòng)到了底部，從而進(jìn)行上拉加載

NotificationListener有一個(gè)onNotification屬性，定義了監(jiān)聽(tīng)的回調(diào)方法，通過(guò)它來(lái)處理加載更多邏輯

不定期分享關(guān)于 安卓開(kāi)發(fā) 的干貨，追求 短、平、快 ，但 卻不缺深度 。

Flutter 網(wǎng)絡(luò)請(qǐng)求類(lèi)封裝及搜索框?qū)崿F(xiàn)

在 Flutter 中定時(shí)器相對(duì) iOS 來(lái)說(shuō)比較好的一點(diǎn)就是定時(shí)器事件的執(zhí)行不會(huì)受視圖拖拽的影響，不涉及到模式。但是需要注意一點(diǎn)的是在頁(yè)面離開(kāi)的時(shí)候要對(duì)定時(shí)器進(jìn)行銷(xiāo)毀。

開(kāi)始的時(shí)候我們是在頁(yè)面中直接使用三方框架 http 進(jìn)行網(wǎng)絡(luò)的請(qǐng)求，這里不好的一點(diǎn)就是如果將來(lái)我們更換了網(wǎng)絡(luò)請(qǐng)求框架的話，項(xiàng)目中涉及到網(wǎng)絡(luò)的請(qǐng)求的地方都需要改動(dòng)，對(duì)項(xiàng)目的影響會(huì)比較大。所以這里我們自己封裝了一個(gè)網(wǎng)絡(luò)請(qǐng)求類(lèi)，定義自己的網(wǎng)絡(luò)請(qǐng)求方法，即使將來(lái)更換三方框架的話，我們只需要在我們自己網(wǎng)絡(luò)請(qǐng)求類(lèi)里面更換就好，項(xiàng)目的其他地方不用改動(dòng)。對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行封裝，相信不管是 iOS 項(xiàng)目還是安卓項(xiàng)目肯定也都是這樣做的。

這里我們是基于 Dio 這個(gè)三方框架進(jìn)行封裝的，在 HttpManager 類(lèi)中我們定義了 Dio 的單例對(duì)象 _dioInstance ，通過(guò)單例方法 _getDioInstance 來(lái)獲取單例對(duì)象。我們定義了 post 跟 get 兩個(gè)靜態(tài)方法，在這兩個(gè)方法中我們都調(diào)用了私有方法 _sendRequest ， _sendRequest 方法中通過(guò)該傳入的枚舉參數(shù) HttpMethod 來(lái)區(qū)分 Dio 單例對(duì)象是調(diào)用 get 還是 post 請(qǐng)求。這里需要注意的是方法中一定要使用 async ，返回值前要加 await 。

在聊天頁(yè)面中我們可以看到頂部的搜索框，這個(gè)搜索框是跟列表一起滾動(dòng)的，所以比較好的實(shí)現(xiàn)方式就是把搜索框定義為一個(gè) cell 。其實(shí)這個(gè)搜索框只有點(diǎn)擊事件，點(diǎn)擊之后跳轉(zhuǎn)一個(gè)新的頁(yè)面，所以我們只需要使用小部件來(lái)實(shí)現(xiàn)搜索框的展示就好。搜索框由白色底視圖跟圖片和文本組成，所以這里我們通過(guò) Stack 部件來(lái)實(shí)現(xiàn)， children 的第一個(gè)元素為白色底視圖，圖片跟搜索文字用 Row 部件來(lái)實(shí)現(xiàn)，圖片跟文字布局左右排列。

Flutter 自定義SearchDelegate搜索頁(yè)面

日常開(kāi)發(fā)中 我們可能會(huì)用到 SearchDelegate 來(lái)實(shí)現(xiàn)一個(gè)搜索頁(yè)面

但是對(duì)外只暴露了以下幾個(gè)接口

如果我們想自定義 TextField , 修改hintText內(nèi)容

或者AppBar下還想添加一個(gè)bottom怎么辦呢, 這邊提供一個(gè)方法以供參考

定義一個(gè)ASearchDelegate 繼承自 SearchDelegate, 把SearchDelegate 源碼都拷進(jìn)來(lái)(material\search.dart)?

showSearch方法也換個(gè)名?showASearch(內(nèi)部類(lèi)可以都加個(gè)A前綴以區(qū)分, 同時(shí)繼承一下原有類(lèi))

接著 找到_ASearchPageState 的build方法?

會(huì)返回一個(gè)Semantics 對(duì)象, 其實(shí)整個(gè)搜索頁(yè)面就在這里定義的啦

ok, 就在這里自由發(fā)揮了

下圖是題主的改動(dòng)

對(duì)應(yīng)調(diào)用處則調(diào)整為:?showASearch(context, ASearchDelegate());

效果圖:

Flutter-02編譯器選擇

1.打開(kāi) VS Code。

2.打開(kāi) 查看 命令面板…。

3.輸入 “install”，然后選擇 擴(kuò)展: 安裝擴(kuò)展(就是點(diǎn)擊選擇第一行內(nèi)容)。

4.在擴(kuò)展搜索輸入框中輸入 “flutter”，然后在列表中選擇 Flutter 并單擊 安裝。此過(guò)程中會(huì)自動(dòng)安裝必需的 Dart 插件。（選擇第一行并安裝）

5.退出然后重新啟動(dòng) VS Code。

1.打開(kāi) 查看 命令面板…。

2.輸入 “doctor”，選擇 Flutter: Run Flutter Doctor。

3.打開(kāi) 輸出 (OUTPUT) 面板查看是否有錯(cuò)誤，確保在不同的輸出選項(xiàng) (Output Options) 的下拉列表中選擇了 Flutter。

我們?cè)谏掀恼乱呀?jīng)用命令行創(chuàng)建了一個(gè) my_app 的flutter項(xiàng)目了，這里我們就可以使用 vscode 打開(kāi)看看了

創(chuàng)建新項(xiàng)目 ，則是在命令面板輸 flutter , 選擇 Flutter: New Application Project

運(yùn)行項(xiàng)目 ，找到 VS Code 的狀態(tài)欄(窗口底部藍(lán)色的條)

1.打開(kāi) Android Studio。

2.打開(kāi)插件設(shè)置（在 v3.6.3.0 以上的系統(tǒng)打開(kāi) Configure Plugins）。

這里需要先改一下網(wǎng)絡(luò)請(qǐng)求的設(shè)置

3.然后搜索Flutter 插件，選擇并點(diǎn)擊 安裝。

4.當(dāng)彈出安裝 Dart 插件提示時(shí)，點(diǎn)擊 Yes。

5.退出重新啟動(dòng)編譯器，然后在編譯器主頁(yè)面就可以看到多了了 create new flutter project 可供選擇，代表flutter插件安裝成功，我們?cè)囍c(diǎn)擊來(lái)創(chuàng)建一個(gè)新項(xiàng)目。