一健爬、iOS 集成 Flutter Module
此處使用的是 CocoaPod 集成 Flutter Module 的方案
前提條件：
- 本地配置了 Flutter 和 Dart 的開發(fā)環(huán)境
- 安裝了 CocoaPod
優(yōu)點(diǎn)
- 集成簡(jiǎn)單快捷抑党，
- 方便 Flutter 項(xiàng)目與 iOS 項(xiàng)目的聯(lián)調(diào)(更改完 Flutter 項(xiàng)目之后直接重新運(yùn)行 Xcode 即可看到效果 )
集成步驟
# Flutter
flutter_application_path = './flutter_module_test/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'IntegrateFlutter' do
use_frameworks!
# Flutter
install_all_flutter_pods(flutter_application_path)
end
- 在主項(xiàng)目根目錄下創(chuàng)建 Podfile 文件匙铡，并將下面的 CocoaPod 配置復(fù)制到 Podfile 中。
- 將
flutter_application_path改成自己的 Flutter Module 的路徑 - 將
IntegrateFlutter改成自己的 iOS 項(xiàng)目的 Target - 運(yùn)行
pod install命令拉取依賴和編譯集成 flutter module 項(xiàng)目
此時(shí) flutter module 項(xiàng)目編譯后的產(chǎn)物已經(jīng)被集成到 iOS 項(xiàng)目中伯顶，下面就是開始使用 flutter 中的功能囚灼。
二呛踊、 加載 Flutter 頁面的一點(diǎn)研究
iOS 原生頁面彈出 Flutter 頁面，以及彈出頁面體驗(yàn)性能優(yōu)化
在 ViewController 彈出 Flutter 頁面卡頓的原因：
/// 彈出 Flutter 頁面
@objc func presentFlutterAction() {
testPerformance(name: "present flutter page") {
// 在彈出頁面的時(shí)候才開始創(chuàng)建執(zhí)行 FlutterEngine 造成頁面卡頓
let engine = FlutterEngine(name: "flutter engine", project: nil)
engine.run(withEntrypoint: "main")
GeneratedPluginRegistrant.register(with: engine)
let flutterVC = FlutterViewController(engine: engine, nibName: nil, bundle: nil)
present(flutterVC, animated: true, completion: nil)
}
}
/// 彈出 Native 頁面
@objc func presentNative() {
testPerformance(name: "present 原生頁面耗時(shí)") {
let view = UIViewController()
view.view.backgroundColor = .blue
present(view, animated: true, completion: nil)
}
}
/// 耗時(shí)測(cè)試
func testPerformance(name: String, action: () -> Void) {
let begin = Date.timestamp
action()
let end = Date.timestamp
print("\(name):\(end - begin)ms")
}
上面的彈出 flutter 頁面時(shí)才開始創(chuàng)建執(zhí)行 FlutterEngine啦撮，此過過程太過耗時(shí)會(huì)造成頁面的卡頓谭网。從下面的加載 Flutter 頁面和加載原生頁面的耗時(shí)來看加載 flutter 頁面耗時(shí)還是挺多的，用戶可以明顯的感覺到卡頓
present flutter page:43ms
present flutter page:20ms
present flutter page:24ms
present flutter page:21ms
present flutter page:23ms
present 原生頁面耗時(shí):1ms
present 原生頁面耗時(shí):1ms
present 原生頁面耗時(shí):1ms
present 原生頁面耗時(shí):1ms
優(yōu)化：將 FlutterEngine 提前創(chuàng)建好并運(yùn)行
// 懶加載創(chuàng)建 FlutterEngine
lazy var engine: FlutterEngine = FlutterEngine(name: "flutter engine")
override func viewDidLoad() {
super.viewDidLoad()
// 運(yùn)行 Engine
engine.run(withEntrypoint: "main")
GeneratedPluginRegistrant.register(with: engine)
}
/// 彈出 Flutter 頁面
@objc func presentFlutterAction() {
testPerformance(name: "present flutter page") {
// 彈出 Flutter 頁面
let flutterVC = FlutterViewController(engine: engine, nibName: nil, bundle: nil)
present(flutterVC, animated: true, completion: nil)
}
}
從下面的耗時(shí)測(cè)試中也可以看出時(shí)間彈出 Flutter 頁面的時(shí)間大大的縮短赃春，用也察覺不到彈出頁面時(shí)的卡頓
present flutter page:6ms
present flutter page:2ms
present flutter page:2ms
present flutter page:2ms
present 原生頁面耗時(shí):1ms
present 原生頁面耗時(shí):1ms
present 原生頁面耗時(shí):1ms
present 原生頁面耗時(shí):1ms
缺點(diǎn)：提前創(chuàng)建 FlutterEngine 造成內(nèi)存暴增愉择，居高不下。而用戶后面可能不會(huì)跳轉(zhuǎn)到 Flutter 實(shí)現(xiàn)的頁面织中，這就會(huì)造成內(nèi)存的浪費(fèi)锥涕。
