【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】：