四:Flutter與原生iOS混編

一: 官方建議使用pod方法引入,因此我也采用pod方法引用
二:原生項(xiàng)目接入flutter工程。

不建議使用Android Studio或者VSCode創(chuàng)建伟葫,因?yàn)閲L試創(chuàng)建后發(fā)現(xiàn).iOS/Flutter目錄缺少podhelper.rb腳本命令聂薪,會(huì)導(dǎo)致配置完pod引入后報(bào)錯(cuò),建議使用命令行創(chuàng)建泻帮。

三: 建議使用命令行創(chuàng)建

創(chuàng)建的flutter工程目錄最好和iOS原生項(xiàng)目目錄一個(gè)級(jí)別文件目錄下:

image.png

//其中`my_flutter`為定義的`flutter工程名`  這里我定義為`flutter_project ` 
flutter  create -t  module  flutter_project
四: 使用命令行創(chuàng)建完后 在指定目錄下生成的flutter工程目錄如下
image.png
五: 經(jīng)過(guò)調(diào)研對(duì)比 Android StudioVSCode都可以開(kāi)發(fā)flutter項(xiàng)目,但是個(gè)人建議使用Android Studio计寇,真機(jī)調(diào)試或者log控制臺(tái)以及智能提示Android Studio都有較大優(yōu)勢(shì),極其好用锣杂,我這里用的VSCode

注意:這個(gè)時(shí)候可以去看看 VSCode創(chuàng)建flutter項(xiàng)目哪篇文章,主要看如何先讓VSCode安裝好插件番宁,如何VSCode跑起來(lái)看看效果元莫。最后可以在VSCode的下面的終端里面執(zhí)行:flutter pub get命令,安裝插件蝶押,此命令也可以不執(zhí)行踱蠢。

六: flutter項(xiàng)目創(chuàng)建完畢后。

1播聪,打開(kāi)新建的flutter項(xiàng)目朽基,運(yùn)行項(xiàng)目:

flutter run

確認(rèn)無(wú)報(bào)錯(cuò)。

2离陶,那接下來(lái)SSB-iOS原生項(xiàng)目配置通過(guò)pod接入flutter項(xiàng)目稼虎,SSB-iOS項(xiàng)目的podfile配置如下:
pod目錄上面配置路徑下面配置對(duì)路徑的引用,如圖所示:

image.png

SSB-iOS項(xiàng)目的podfile配置具體代碼如下:

platform :ios, '12.0'

# flutter_application_path 是flutter 工程的項(xiàng)目路徑
flutter_application_path = '../flutter_project'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

# 以及
target 'SSBApp' do
  use_frameworks!
  # 這邊引入
  install_all_flutter_pods(flutter_application_path)
end
七: 原生項(xiàng)目招刨,執(zhí)行即可

1霎俩,原生項(xiàng)目,pod執(zhí)行

// cd 到iOS原生項(xiàng)目目錄下執(zhí)行:
pod install
// 或者
pod update --verbose --no-repo-update

2,原生項(xiàng)目,引入flutter配置

image.png

AppDelegate.h

#import <UIKit/UIKit.h>
#import <CoreData/CoreData.h>

#pragma mark --  flutter配置3
@import Flutter;
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
@interface AppDelegate : FlutterAppDelegate //UIResponder <UIApplicationDelegate>
@property (nonatomic, strong) FlutterEngine *flutterEngine;
@property (readonly, strong) NSPersistentContainer *persistentContainer;
- (void)saveContext;

@end


image.png

AppDelegate.m

#import "AppDelegate.h"

@interface AppDelegate ()
@end

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
   
#pragma mark --  flutter配置4
    self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
    [self.flutterEngine run];
    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

八: 執(zhí)行完畢后 pod目錄下會(huì)引入flutter1.0FlutterPluginRegistrant如圖:
image.png

然后可以在VSCode下面的終端里面執(zhí)行

flutter run 

如果真機(jī)運(yùn)行報(bào)錯(cuò):

image.png

那么需要把flutter里面的iOS工程Runner項(xiàng)目bundle Identifier改下,改成符合你的開(kāi)發(fā)者開(kāi)發(fā)者賬號(hào)格式
image.png

改成示例
image.png

注意:
1打却,flutter工程每次修改后杉适,都需要進(jìn)行

flutter run 

2,flutter工程每次修改后柳击,原生主工程每次運(yùn)行猿推,都需要執(zhí)行一下:

pod install 

運(yùn)行原生主工程,報(bào)錯(cuò)
報(bào)錯(cuò)1:Module 'Flutter' not found

image.png

解決:
image.png

Flutter工程

flutter clean
flutter pub get

SSB-iOS原生項(xiàng)目工程

pod install

報(bào)錯(cuò)2:

Sandbox: rsync.samba(82572) deny(1) file-write-create /Users/yinxia/Library/Developer/
Xcode/DerivedData/iOSProject-dinnfnutvwrmoefkwmfpwlrafovp/Build/Products/Debug-iphonesimulator/Flutter.framework

//以及
[  +5 ms] Flutter failed to write to a file at "/Users/yinxia/Library/Developer/Xcode/DerivedData/
iOSProject-dinnfnutvwrmoefkwmfpwlrafovp/Build/Products/Debug-iphonesimulator/.last_build_id".

解決:在項(xiàng)目的構(gòu)建設(shè)置 > 構(gòu)建選項(xiàng)(BuildSettings)> 沙盒(User Script Sandboxing)' 改成NO

image.png

九: 那么iOS和flutter如何混編呢捌肴?iOS跳轉(zhuǎn)flutter頁(yè)面并傳參蹬叭,flutter跳轉(zhuǎn)iOS頁(yè)面并傳參,如何做状知?

有多種種方式秽五,其中一種就是flutter_boost
,我們用這種就行,看下一篇文章饥悴√勾【五:Flutter與原生通信的方式簡(jiǎn)介】

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市西设,隨后出現(xiàn)的幾起案子瓣铣,更是在濱河造成了極大的恐慌,老刑警劉巖济榨,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坯沪,死亡現(xiàn)場(chǎng)離奇詭異绿映,居然都是意外死亡擒滑,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)叉弦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)丐一,“玉大人,你說(shuō)我怎么就攤上這事淹冰】獬担” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵樱拴,是天一觀的道長(zhǎng)柠衍。 經(jīng)常有香客問(wèn)我,道長(zhǎng)晶乔,這世上最難降的妖魔是什么珍坊? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮正罢,結(jié)果婚禮上阵漏,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好履怯,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布回还。 她就那樣靜靜地躺著,像睡著了一般叹洲。 火紅的嫁衣襯著肌膚如雪柠硕。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,590評(píng)論 1 305
  • 那天运提,我揣著相機(jī)與錄音仅叫,去河邊找鬼。 笑死糙捺,一個(gè)胖子當(dāng)著我的面吹牛诫咱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播洪灯,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼坎缭,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了签钩?” 一聲冷哼從身側(cè)響起掏呼,我...
    開(kāi)封第一講書(shū)人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎铅檩,沒(méi)想到半個(gè)月后憎夷,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡昧旨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年拾给,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片兔沃。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蒋得,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出乒疏,到底是詐尸還是另有隱情额衙,我是刑警寧澤,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布怕吴,位于F島的核電站窍侧,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏转绷。R本人自食惡果不足惜伟件,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望暇咆。 院中可真熱鬧锋爪,春花似錦丙曙、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至拯爽,卻和暖如春索抓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背毯炮。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工逼肯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人桃煎。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓篮幢,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親为迈。 傳聞我的和親對(duì)象是個(gè)殘疾皇子三椿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容