前言

Flutter和iOS支持兩種形式的混編，一種是某一些頁面全是用flutter去繪制，另外一只是flutter頁面作為iOS某個(gè)控制器頁面的一部分去展示，后面會(huì)逐步去介紹這兩種方式的實(shí)現(xiàn)

本篇文章主要介紹在iOS項(xiàng)目中添加Futter模塊

1、如果你還沒開始在macOS上搭建Flutter開發(fā)環(huán)境可以參考官方文檔：入門: 在macOS上搭建Flutter開發(fā)環(huán)境。

2、在flutter和iOS混編過程中我們需要用到Android Studio或者Visual Studio Code 來編寫dart相關(guān)的代碼及第三方庫的管理，具體的配置步驟可以參考官方文檔： 配置編輯器。

3、如果你對(duì)flutter和iOS的區(qū)別還不是很了解可以先了解下官方文檔 Flutter for iOS 開發(fā)者。

一、創(chuàng)建Xcode項(xiàng)目

用Xcode創(chuàng)建一個(gè)iOS項(xiàng)目命名為Flutter_iOS

iOS項(xiàng)目.png

然后cd到項(xiàng)目的根目錄Flutter_iOS

執(zhí)行命令 flutter create -t module my_flutter

創(chuàng)建flutter模塊.png

二、將 Flutter 模塊以 pods 的方式加入到已有項(xiàng)目中

在我們的已有項(xiàng)目 Flutter_iOS 中初始化 pods ，如果你的項(xiàng)目中已初始化過 pods ，請(qǐng)忽略。

cd 項(xiàng)目根目錄

pod init

這時(shí)我們項(xiàng)目中會(huì)多一個(gè) Podfile 文件，我們?cè)谠撐募詈竺嫣砑用钊缦?#xff1a;

vim podfile

target 'Flutter_iOS' do

# Uncomment the next line if you're using Swift or would like to use dynamic frameworks

# use_frameworks!

# Pods for Flutter_iOS

end

# 新加命令

flutter_application_path = '../flutter_module'

eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

注意：flutter_application_path 是 Flutter 模塊的路徑，記得修改為你的模塊名稱。

添加后保存退出，運(yùn)行命令

pod install

三、配置 Dart 編譯腳本

Xcode->Build Phases ->點(diǎn)擊左上角?號(hào)按鈕->選擇 New Run Script Phase ，添加如下腳本：

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

四、設(shè)置BitCode

Flutter 目前還不支持 BitCode,點(diǎn)擊將我們項(xiàng)目 BitCode 選項(xiàng)設(shè)置為 NO

Xcode->Build Settings ->Build Options->將BitCode 選項(xiàng)設(shè)置為 NO

五、添加跳轉(zhuǎn)代碼

使用 FlutterViewController

所有的 Flutter 頁面公用一個(gè)Flutter實(shí)例 (FlutterViewController) 。

#import "ViewController.h"

#import

#import

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view.

}

- (IBAction)pushToFlutterVC:(UIButton *)sender

{

FlutterViewController *flutterVC = [[FlutterViewController alloc] init];

[self presentViewController:flutterVC animated:YES completion:nil];

}

@end

六、運(yùn)行和熱更新

項(xiàng)目可以在Android Studio上進(jìn)行dart相關(guān)語言的編寫，但是需要使用Xcode運(yùn)行整個(gè)項(xiàng)目的代碼

混編后原先的熱更新不能用，但是我們可以通過如下方式實(shí)現(xiàn)：

首先退出模擬器上運(yùn)行的項(xiàng)目

cd到flutter_module工程路徑，執(zhí)行

flutter attach

attach成功之后，運(yùn)行xcode，更新直接press 'r'

在Android Studio中修改dart文件，press 'r'直接可以看到修改之后的顯示

總結(jié)

以上是生活随笔為你收集整理的dart和python混编,Flutter与iOS混编(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。