在iOS原生項目中使用Flutter,熱重載

前言:
Flutter 因其自建的渲染引擎,背靠谷歌的支持,近來俘獲了不少的開發小伙伴,越來越多的開發者嘗試使用Flutter進行開發,在原生項目中嵌入Flutter來完成復雜度不高的頁面成為了一個不錯的選擇。本篇文章記錄了一次在原生項目中嵌入Flutter的過程。

準備工作:搭建好 Flutter 的開發環境
[簡書抽風可能無法顯示]

在原生項目中加入Flutter模塊

之前網上對混合開發有一些現成的庫,目前效果不是很理想,本文采用的是官方文檔中的方法。

1. 創建 Flutter 模塊

到需要創建模塊的文件夾下(本文為原生項目下),執行創建模塊的命令:

$: flutter create --template module flutter_moudle
// 此處根據網絡狀況可能會耗時很久,耐心等待即可。

創建成功后,能在目下看到一個 flutter_moudle 的文件:

flutter_moudle文件結構

Tips:

  1. 使用"shift+cmd+."可查看文件夾隱藏文件


2. 配置 Flutter 模塊

官方在項目中啟用Flutter模塊提供了多種方法,本文主要介紹其中兩種:


(1)方法1: CocoaPods

在Podfile中添加定義,并配置對應的Target

添加如下兩句到定義:
# flutter模塊的路徑(本文的flutter模塊與Podfile在同一目錄下)
flutter_application_path = 'flutter_moudle' 

# 加載podhelper.rb
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb’)

# 配置對應Target:
target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

添加完畢后執行更新項目的pod

$: pod install

完成后打開原生項目的 xxx.xcworkspace ,可以看到Pods新增DevelopmentPods文件:


DevelopmentPods

(2)方法2: Framework
進入到我們第一步創建的Flutter組件的文件中,將相應的模塊添加到原生項目的Framework即可,對應模塊為:

  • flutter.framework (路徑:/flutter_moudle/.ios/Flutter/App.framework)
  • app.framework (路徑:/flutter_moudle/.ios/Flutter/engine/Flutter.framework)
Framework

使用兩種方法任何一種均可,配置完成后執行編譯(cmd+b),編譯成功后表示我們已經成功將Flutter加入到了原生項目中。

Tips1:
【Bitcode 相關】
默認情況下,原生項目是開啟了Bitcode選項的,而 Flutter 目前并不支持,需要手動關閉(Build Setting -> Enable Bitcode 設置為 NO)

Tips2:**
【編譯報錯:Command PhaseScriptExecution failed with a nonzero exit code】**:
這個錯誤發生在原生項目的文件名改變后,錯誤信息還提示了“flutter/XXXX/XXX no such file found”的內容,說明找不到Flutter路徑了,我們看到在 .ios/Flutter/Generated.xcconfig 中看到了Flutter的各種路徑,而我們改變文件名后,還需要更新Flutter配置,可在 “.ios” 目錄下使用自動更新命令:
$: flutter pub get

Tips3:**
【編譯卡死在:/Users/xurenjie/Desktop/AppStore/ProjectName/flutter_moudle/.ios/Flutter/flutter_export_environment.sh: line 8: inherited: command not found】**
該問題在多次編譯項目后出現,頻率較高,可臨時通過清除項目緩存解決。


使用Flutter

預熱并配置 Flutter 引擎
AppDelegate
調用Flutter頁面

然后在需要展示 Flutter 頁面的時候使用 FlutterViewController:


跳轉Flutter頁面

至此,我們就完成了在原生應用中加入Flutter模塊的配置


熱重載

熱重載是 Flutter 的一大特性,在VSCode,AndroidStudio中開發時可以很容易的使用,而在Xcode下,打開熱重載的方式:

[方法1]

此方法必須等APP中成功啟動了FlutterEngin后才能生效,本文的FlutterEngin在AppDelegate中項目啟動時就啟動了,所以運行項目后,可直接在flutter模塊的文件中(本文模塊文件為flutter_moudle)運行命令:

$ flutter attach

調試時需要使用:

$ flutter attach --isolate-filter='debug'
[方法2]

此方法可以等待項目中的flutter engin啟動,不同1那種需要在啟動的情況下才可以啟用:
在VSCode中運行:

$ Attach to Flutter on Device

Tips:
【isolate相關錯誤】
需要在main.dart的main函數添加如下設置:

isolate錯誤解決方式


總結

  • 可以看到,將Flutter加入到原生項目中非常簡單。
  • Flutter 也給項目的開發增加了復雜度,一方面使得開發團隊必須形成規范,以在Android、iOS、Flutter、Web均存在的項目中不會發生混合開發的坑。
  • Flutter的優點在于一次開發,多處使用,且借助其自建引擎在不同平臺上都有接近于原生的表現。
  • 明顯的是,引入Flutter會明顯直接增大包體積
  • 加入Flutter的原生項目的編譯速度降低,尤其是初次編譯非常明顯,不嚴謹的用小項目測試多次,加入前初次編譯不到20s左右,而加入后最長的一次等待了5分鐘,(可能是提醒我該換電腦了)。
  • 鑒于上述情況,將Flutter加入開發中,需要根據項目當下的實際情況(團隊成員技術構成,項目業務特點等等)確定,不可一概而論,也不可能一勞永逸
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
禁止轉載,如需轉載請通過簡信或評論聯系作者。

推薦閱讀更多精彩內容