ios開發 自定義btn_Flutter 混合開發
技術標籤:ios開發 自定義btn
目前大多數公司都有自己開發多年的專案,不可能直接用
Flutter
從頭開發一套,那樣不實現,除非是小專案,因此只能是在原有的基礎上用Flutter
來開發新業務或重構舊業務,而這裡就需要用到Flutter
的混合開發
一、建立Flutter模組
使用混合開發就不能像之前一樣直接上來就建立一個Flutter
專案,而是要使用Flutter模板
|
|
創建出來的Flutter
模組依然是可以像之前建立的Flutter專案
一樣開啟和執行的。
目錄下有也有ios
和android
目錄,只不過前面加了個點 ,成了點目錄。
二、iOS
整合
通過
Cocoapods
,將Flutter
模組編譯成一個庫,再到原生專案中進行引入和使用即可
在Podfile
中新增兩行配置
|
|
在每個需要引用Flutter
的Target
下,都需要新增一行配置
|
|
新增後如下所示:
|
|
新增完成後,執行一次pod install
混合開發混合開發
使用
兩個步驟
獲取 Flutter引擎
FlutterEngine
通過
FlutterEngine
建立FlutterViewController
基本使用
AppDelegate
類中宣告一個FlutterEngine
變數,在didFinishLaunchingWithOptions
方法中啟動Flutter引擎
|
|
ViewController
中新增一個按鈕,點選彈出Flutter模組
|
|
如果遇到報Command PhaseScriptExecution failed with a nonzero exit code
錯誤,如下圖所示:
請先用Android Studio
或VSCode
開啟Flutter模組
專案並執行到iOS裝置上,讓其幫我們對iOS專案進行一些初始化配置。成功執行後就可以關閉Flutter模組
專案的運行了,接著再用Xcode
開啟原生專案執行即可。
修改初始路由
官方文件裡面提到,修改初始路由,需要在Flutter引擎
在run
之前,通過invokeMethod
呼叫setInitialRoute
方法進行設定,程式碼如下
|
|
但是,我發現這樣寫並沒有起任何作用,在Flutter
的官方issue
上也有人提到這個問題,目前只能官方進行修復和調整API
【setInitialRoute is broken for iOS add-to-app #59895】: https://github.com/flutter/flutter/issues/59895
臨時可以使用如下方式實現:
|
|
雖然這麼寫可以實現這個功能,但是會有明顯的類似卡頓的現象,因為使用這種方式去建立FlutterViewController
之前,會隱式建立和啟動一個FlutterEngine
,而我們彈出FlutterViewController
時FlutterEngine
還沒載入完畢,所以我們會看到先彈出了一個透明的介面,再顯示/other
路由對應的介面檢視。
使用 FlutterAppDelegate
使用FlutterAppDelegate
這個不是必要的操作,但是如果你想讓Flutter模組
也能使用原生的功能的話,建議使用
原生功能
處理
openURL
的回撥列表檢視在點選狀態列後滾到頂部
|
|
更具體的使用,請閱讀官方文件
https://flutter.dev/docs/development/add-to-app/ios/add-flutter-screen?tab=no-engine-vc-swift-tab#using-the-flutterappdelegate
三、Android
修改安卓專案 根目錄下的settings.gradle
檔案
|
|
修改安卓專案app
目錄下的build.gradle
檔案
|
|
如果在編譯的時候遇到如下錯誤
|
|
請確認是否指定了使用Java 8
進行編譯【官方文件 - Java 8 requirement】
https://flutter.dev/docs/development/add-to-app/android/project-setup#java-8-requirement
修改安卓專案app
目錄下的build.gradle
檔案
|
|
修改app/src/main/AndroidManifest.xml
檔案
|
|
新增一個按鈕,點選彈出Flutter模組
|
|
|
|
四、除錯與熱過載
由於當前我們是使用原生開發工具(如:Xcode)來執行專案,每次修改我們的
Flutter模組
的程式碼,也就需要重新執行才能看到效果,不像之前按下Cmd + s
就能進行熱過載。這樣Flutter模組
的開發效率極其低下,那有沒有辦法可以讓我們像之前開發Flutter
專案時那樣進行熱過載
呢?答案是有的
Flutter
官方提供了flutter attach
,以輔助我們開發,到終端下執行
|
|
如果當前有多個裝置,會提示我們需要指定attach
哪個裝置
按要求加上指定引數即可
|
|
如圖,這樣就關聯上了,你在dart
檔案裡面對介面進行任何修改後,按r
進行熱過載,按R
進行熱啟動。
如果你使用的是Android Studio
,可以直接選擇對應的裝置後,點選右邊的Flutter Attach
按鈕,執行成功後就可以跟之前一樣按Cmd + s
進行熱過載了。
五、資料
GitHub
LXFFlutterHybridDemo
https://github.com/LinXunFeng/LXFFlutterHybridDemo
官方文件
add-to-app
https://flutter.dev/docs/development/add-to-app
add-to-app/ios
https://flutter.dev/docs/development/add-to-app/ios
add-to-app/android
https://flutter.dev/docs/development/add-to-app/android
Debugging & hot reload
https://flutter.dev/docs/development/add-to-app/debugging