【Flutter 混合開發】添加 Flutter 到 iOS-有解無憂

Flutter 混合開發系列包含如下：

嵌入原生View-Android

嵌入原生View-iOS

與原生通信-MethodChannel

與原生通信-BasicMessageChannel

與原生通信-EventChannel

添加 Flutter 到 Android Activity

添加 Flutter 到 Android Fragment

添加 Flutter 到 iOS

每個作業日分享一篇，歡迎關注、點贊及轉發，

Flutter 可以作為 frameworks 添加到 iOS 專案，iOS專案引入Flutter module需要安裝Xcode，另外Flutter支持iOS8及以上，

創建 Flutter module

由于 Xcode 無法像 Android Studio 一樣安裝插件，因此只能通過命令創建 Flutter module，打開終端，輸入如下：

cd ios 專案根目錄
flutter create --template module my_flutter

執行完畢后，Flutter module將會創建在 ios專案/my_flutter目錄下，目錄結構如圖：

.ios 是隱藏目錄，可以單獨運行Flutter module，測驗此模塊的功能，iOS代碼添加到現有應用程式的專案或插件中，而不是添加到模塊的.ios /目錄中，

由于.ios /目錄是自動生成的，因此請勿對其進行源代碼控制，在新機器上構建模塊之前，請先在my_flutter目錄中運行flutter pub get來重新生成.ios /目錄，然后再使用Flutter模塊構建iOS專案，

將Flutter模塊嵌入到現有應用程式中

將Flutter模塊嵌入到現有iOS應用程式中有兩種方式：

使用CocoaPods和已安裝的Flutter SDK（推薦），
為Flutter引擎，已編譯的Dart代碼和所有Flutter插件創建 frameworks，手動嵌入 frameworks，并在Xcode中更新現有應用程式的構建設定，

應用程式無法在 Release 模式下的模擬器上運行，因為Flutter尚不支持為Dart代碼提前輸出x86 / x86_64二進制（AOT）二進制檔案，在模擬器或真實設備上以除錯模式運行，而在真實設備上以Release模式運行，

下面的兩種方式是將 Release frameworks 添加到 iOS 應用程式，因此編譯的時候設備不能選擇模擬器，否則編譯失敗，

編譯成功：

選擇模擬器編譯失敗：

使用CocoaPods和已安裝的Flutter SDK

此方法需要所有的相關開發的人員安裝 Flutter 環境，

假設現有應用程式和Flutter模塊位于同級目錄中，如果您使用其他目錄結構，則可能需要調整相對路徑，目錄如下：

修改iOS應用程式中 Podfile 檔案，如果沒有則手動創建，內容如下：

flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'My App' do
 install_all_flutter_pods(flutter_application_path)
end

CocoaPods 相關請參考官網，

執行 pod install 命令：

當在my_flutter / pubspec.yaml中更改Flutter插件的依賴性或者第一次運行時，請在Flutter模塊目錄中運行flutter pub get來重繪podhelper.rb腳本讀取的插件串列，然后，從應用程式目錄再次運行pod install，

podhelper.rb腳本將插件Flutter.framework和App.framework嵌入到專案中，

用 Xcode 打開 My App.xcworkspace，如果已經打開則需要關閉重新打開，使用 ?B 編譯專案，編譯成功，

在Xcode中嵌入 Flutter Frameworks

通過命令生成必要的 Frameworks，并通過手動編輯現有的Xcode專案將它們嵌入到應用程式中，如果團隊成員無法在本地安裝Flutter SDK和CocoaPods，或者您不想在現有應用程式中將CocoaPods用作依賴項管理器，則可以使用此方式，每次在Flutter模塊中進行代碼更改時，都必須運行 flutter build ios ，

運行如下命令生成 Frameworks：

flutter build ios-framework --output=./Flutter/

執行完畢后在對應的目錄下生成相關編譯產物：

frameworks 已經生成，將 frameworks 鏈接到 iOS 應用程式有很多中方法，下面介紹一種，打開 Xcode，

將 App.framework 和 Flutter.framework 拖入Build Settings > Build Phases > Link Binary With Libraries：

此時在專案的左側增加 Frameworks 目錄：

在 Build Settings -> Search Paths -> Framework Search Paths 中添加 ${PODS_ROOT}/../my_flutter/Flutter/Release

使用 ?B 編譯專案，編譯成功，

創建 FlutterEngine 和 FlutterViewController

將 Flutter 頁面嵌入 iOS 應用程式需要創建 FlutterEngine（Flutter 引擎）和 FlutterViewController，FlutterEngine 是Dart VM和Flutter運行時的 host，FlutterViewController 附著于 FlutterEngine，作用是通信和顯示 Flutter UI，

創建 FlutterEngine：

import UIKit
import Flutter

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
  lazy var flutterEngine = FlutterEngine(name: "my flutter engine")

  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    
    flutterEngine.run();
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions);
  }
}

添加一個按鈕，跳轉到 Flutter 頁面：

import UIKit
import Flutter

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let button = UIButton(type:UIButton.ButtonType.custom)
        button.addTarget(self, action: #selector(showFlutter), for: .touchUpInside)
        button.setTitle("顯示 Flutter", for: UIControl.State.normal)
        button.frame = CGRect(x: 80.0, y: 210.0, width: 160.0, height: 40.0)
        button.backgroundColor = UIColor.blue
        self.view.addSubview(button)
    }
    
    @objc func showFlutter() {
      let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
      let flutterViewController =
          FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
      present(flutterViewController, animated: true, completion: nil)
    }


}

上面的代碼使用了快取 FlutterEngine，當然這也是推薦的一種方式，

還有一種方式是是使用隱含的FlutterEngine，使用隱含的FlutterEngine會明顯增加顯示Flutter UI的時間，通常不建議這樣做，如果很少顯示 Flutter 螢屏，沒有好的方法來確定何時啟動Dart VM以及何時Flutter不需要在視圖控制器之間保持狀態，則這可能很有用，

func showFlutter() {
  let flutterViewController = FlutterViewController(project: nil, nibName: nil, bundle: nil)
  present(flutterViewController, animated: true, completion: nil)
}

指定入口點

默認情況下 FlutterEngine 加載 lib/main.dart 檔案中的 main() 方法，也可以指定其他檔案的方法：

flutterEngine.run(withEntrypoint: "newEntrypoint", libraryURI: "main.dart")

初始化路由

從Flutter 1.22版開始，可以指定路由

let flutterEngine = FlutterEngine()
flutterEngine.run(
  withEntrypoint: FlutterDefaultDartEntrypoint, initialRoute: "/one_page")

交流

老孟Flutter博客（330個控制元件用法+實戰入門系列文章）：http://laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/200483.html

標籤：Dart

上一篇：經典面試題決議：這道 C 編程面試題居然有如此多的解法！

下一篇：分享一個小清新的論壇原始碼