2021-12-23 flutter module源碼方式集成流程分析

官方文檔

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、成都做網(wǎng)站、趙縣網(wǎng)絡(luò)推廣、成都小程序開發(fā)、趙縣網(wǎng)絡(luò)營銷、趙縣企業(yè)策劃、趙縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供趙縣建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

將 Flutter module 集成到 iOS 項(xiàng)目

（1）這時候還沒有App.framework ， podspec文件是有了

（2）有engine，F(xiàn)lutter.framework。

（3）有插件列表 podspec FlutterPluginRegistrant.podspec，這時沒有symlinks/plugins目錄軟鏈接

（4）導(dǎo)出當(dāng)前的環(huán)境變量 flutter_export_environment.sh

flutter-plugins-dependencies

執(zhí)行 podHelper.rb 腳本

做2件事情：

/Volumes/huc/opt/fvm/versions/2.2.0/packages/flutter_tools/bin/xcode_backend.sh build

多了.symlinks 和App.framework，重新拷貝了Flutter.xcframework

Pods-HouseCommercialCube-frameworks.sh

執(zhí)行 xcode_backend.sh

做3件事情：

AppFrameworkInfo.plist

assets_path 這個后面也沒有人用??！

放到.ios下面

.ios/Flutter/engine/Flutter.xcframework

編譯前， 把這個下面添加一個空文件， engine被覆蓋了，那么那個空文件就沒了？

對比了一下大小。 release

debug 版本的Flutter.xcframework 255M

ios-release 1.03 GB

一開始是1.03G， run之后， 變成了255M

說明確實(shí)拷貝到這里了

.ios下面App.framework 沒有變

App.framework 61Mb

Flutter.framework 35Mb

"${PODS_ROOT}/Target Support Files/Pods-HouseCommercialCube/Pods-HouseCommercialCube-frameworks.sh"

Flutter開發(fā)--如何布局？

相對于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個頁面設(shè)計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應(yīng)該如何去布局，我覺得不現(xiàn)實(shí)，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項(xiàng)目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。

根據(jù)設(shè)計圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因?yàn)樯婕暗蒋B加，因此考慮用Stack；

系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴(kuò)展；載放logo圖標(biāo)在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。

登錄內(nèi)容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。

第一行為Image，

第二行為Text，

第三行可以看成一個小Column，分兩塊進(jìn)行布局

第四行可以看成一個小Column，分兩塊進(jìn)行布局

第五行可以看作一個TextButton，

第六行可以看作一個Row，分三塊進(jìn)行布局

通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實(shí)現(xiàn)的話，就是復(fù)雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復(fù)的或者覺得可以封裝出來的部分，則進(jìn)行下一步。

每一行的拆解，大致也是按照這個思路來進(jìn)行，因此筆者在這里就不做講解了。

在做到第三第四行的時候，發(fā)現(xiàn)這兩個很相似，而且設(shè)計到一些交互邏輯，筆者就想對第三第四行的這種展示進(jìn)行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實(shí)現(xiàn)這種輸入操作，具體的實(shí)現(xiàn)筆者不再詳細(xì)的描述了。

經(jīng)過這一步，整體的規(guī)劃設(shè)計圖已經(jīng)有了，各個組件也都有了，接下來的工作就是組裝了。

具體布局設(shè)計到一些細(xì)節(jié)的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點(diǎn)擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。

像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區(qū)域。

對文字顏色大小等，可以用TextStyle直接設(shè)置。

對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。

[Flutter] Golden File Test 的原理

測試的重要性就不在這里贅述了，本篇重點(diǎn)想聊一下Flutter的Widget測試（其他框架稱為組件測試）中的Golden File test。

那么什么是Golden File Test呢？

Golden File Testing are like unit tests, except the expected output is stored in a separate file. -- Max Grigorev at ZuriHac

如果有前端經(jīng)驗(yàn)的童鞋可以理解Flutter的Golden File Testing相當(dāng)于Jest的快照測試。Flutter將期望的結(jié)果存儲在圖片文件（Golden Image）中。

Widget測試的目標(biāo)是驗(yàn)證小部件的UI如預(yù)期那樣的外觀和交互。所以Golden File Testing 不等價Widget測試，但通過它可以很方便的測試Widget的UI是否如預(yù)期的外觀一致。

Golden File Test怎么寫，官方有很多例子，這里就不細(xì)講。

和快照測試類似，工作流程如下：

在整個工作流程中，有3個關(guān)鍵點(diǎn)：

那我們接下來一個一個的看這三個問題。

生成和更新基線，F(xiàn)lutter提供了命令行:

flutter test --update-goldens

只跑某個測試文件可以指定文件路徑:

flutter test --update-goldens path_to_test_file

不實(shí)用 --update-goldens 參數(shù)，會直接生成新的圖片

通過它，可以在運(yùn)行測試的同時，生成/更新圖片。

理解以下內(nèi)容，需要對Flutter 渲染流程及相關(guān)的概念有了解，此處贅述，如果不了解請移步

architectural-overview

element

render object

isRepaintBoundary , layer

scene

當(dāng)測試在執(zhí)行斷言的過程：

根據(jù)需要，可以繼承 LocalFileComparator 并復(fù)寫的 compare 和 update 方法得到你想要的對比器，并通過 flutter_test_config.dart 指定對比器。

了解Flutter Golden File Test的原理，可以幫組我們更好的去思考什么時候需要使用它。