iOS項(xiàng)目集成FLutter

本文是在FLutter環(huán)境已經(jīng)搭建好的前提下乘凸,記錄如何向iOS原生項(xiàng)目中集成Flutter厕诡。

  • 創(chuàng)建FLutter module
    打開終端 ,進(jìn)入原生項(xiàng)目的上一級(jí)目錄营勤,如項(xiàng)目目錄是:xxx/HybridTest/HybridProject/
$ cd xxx/HybridTest/
$ flutter create -t module my_flutter

以上命令運(yùn)行后會(huì)在xxx/HybridTest/下生成一個(gè)名為my_flutter文件夾灵嫌。文件夾內(nèi)的內(nèi)容如下圖(如果你沒有打開顯示隱藏文件,打開終端輸入命令:defaults write com.apple.finder AppleShowAllFiles -boolean true;killall Finder葛作;再次隱藏文件寿羞,輸入命令:defaults write com.apple.finder AppleShowAllFiles -boolean false;killall Finder):

my_flutter.jpg

其中.iOS和.andriod分別是iOS和安卓的宿主工程,lib里面是dart部分的代碼赂蠢。my_flutter這個(gè)項(xiàng)目可以用AndroidStudio獨(dú)立打開運(yùn)行绪穆。

接下來向podfile中添加如下內(nèi)容:

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

添加后的效果如下:


target 'FLutterHybridDemo' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for FLutterHybridDemo
  flutter_application_path = '../my_flutter/'
  eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

  target 'FLutterHybridDemoTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'FLutterHybridDemoUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end

PS:最近朋友使用V1.9版本的flutter環(huán)境,按照上述設(shè)置podfile虱岂,執(zhí)行pod install后出現(xiàn)如下情況:


dependencies.jpeg

出現(xiàn)這種情況按照下圖設(shè)置podfile即可解決:


podfile.jpeg

參見文檔Add Flutter to existing apps

然后運(yùn)行pod install玖院,運(yùn)行完成,pod中就集成了FLutter和FlutterPluginRegistrant第岖。當(dāng)我們?cè)趂lutter_module/pubspec.yaml中添加FLutter插件后难菌,除了需要運(yùn)行flutter packages get,還需要在iOS目錄下運(yùn)行pod install蔑滓,才能確保插件和flutter.framework添加到iOS項(xiàng)目中郊酒。

  • 禁用Bitcode
    目前flutter還不支持Bitcode,在Build Settings->Build Options->Enable Bitcode中將Bitcode設(shè)置為NO键袱。

  • 在Build phase中添加Run Script燎窘,添加如下配置,

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

并將Run Script移動(dòng)至Target Dependencies phase下面蹄咖,如下圖:

RunScript.png

至此荠耽,就集成完畢了,編譯不報(bào)錯(cuò)就可比藻。

iOS項(xiàng)目中調(diào)用Futter module

iOS中有兩種方式調(diào)用flutter模塊:

  • 直接使用FlutterViewController
  • 使用FlutterEngine
使用FlutterViewController的方式

可通過調(diào)用setInitialRoute方法設(shè)置路由和傳參铝量。

- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self
               action:@selector(handleButtonAction)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Press me" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor blueColor]];
    button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
    [self.view addSubview:button];
}
    
- (void)handleButtonAction {
    //方式二
    FlutterViewController *flutterViewController = [FlutterViewController new];
    [flutterViewController setInitialRoute:@"{name:test,dataList:['11','22']}"];
    [self presentViewController:flutterViewController animated:YES completion:nil];
}
使用FlutterEngine的方式

AppDelegate.h中導(dǎo)入#import <Flutter/Flutter.h>,讓AppDelegate集成FlutterAppDelegate银亲,添加屬性flutterEngine慢叨。

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

@interface AppDelegate : FlutterAppDelegate <UIApplicationDelegate>

//@property (strong, nonatomic) UIWindow *window;
@property(strong,nonatomic)FlutterEngine *flutterEngine;

@end

AppDelegate.m文件中導(dǎo)入#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>,做如下設(shè)置:

#import "AppDelegate.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    self.flutterEngine = [[FlutterEngine alloc]initWithName:@"io.flutter" project:nil];
    [self.flutterEngine runWithEntrypoint:nil];
    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

原生跳轉(zhuǎn)flutter方式如下:

- (void)handleButtonAction {
    // 方式一
    FlutterEngine  *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [flutterViewController setInitialRoute:@"{name:devio,dataList:['aa','bb']}"];
    [self presentViewController:flutterViewController animated:YES completion:nil];
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末务蝠,一起剝皮案震驚了整個(gè)濱河市拍谐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌馏段,老刑警劉巖轩拨,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異院喜,居然都是意外死亡亡蓉,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門喷舀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來砍濒,“玉大人,你說我怎么就攤上這事硫麻“中希” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵拿愧,是天一觀的道長(zhǎng)杠河。 經(jīng)常有香客問我,道長(zhǎng)浇辜,這世上最難降的妖魔是什么券敌? 我笑而不...
    開封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮奢赂,結(jié)果婚禮上陪白,老公的妹妹穿的比我還像新娘。我一直安慰自己膳灶,他們只是感情好咱士,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著轧钓,像睡著了一般序厉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上毕箍,一...
    開封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天弛房,我揣著相機(jī)與錄音,去河邊找鬼而柑。 笑死文捶,一個(gè)胖子當(dāng)著我的面吹牛荷逞,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播粹排,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼种远,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了顽耳?” 一聲冷哼從身側(cè)響起坠敷,我...
    開封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎射富,沒想到半個(gè)月后膝迎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡胰耗,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年限次,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宪郊。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡掂恕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出弛槐,到底是詐尸還是另有隱情懊亡,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布乎串,位于F島的核電站店枣,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏叹誉。R本人自食惡果不足惜鸯两,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望长豁。 院中可真熱鬧钧唐,春花似錦、人聲如沸匠襟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酸舍。三九已至帅韧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間啃勉,已是汗流浹背忽舟。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人叮阅。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓刁品,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親帘饶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子哑诊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

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