Flutter與原生的混合開(kāi)發(fā)筆記

Flutter iOS原生集成流程

我這兒用的Flutter版本是1.7.8+hotfix.4,在與最新版本在SDK中有些許區(qū)別

一铲觉、Flutter 提供的 Native Flutter 混合工程方式

1. 創(chuàng)建 Flutter 工程

請(qǐng)自行 百度/Google Flutter 安裝教程,安裝Flutter美莫。然后到任意目錄下執(zhí)行flutter create -t module my_flutter菜拓,"my_flutter" 是要?jiǎng)?chuàng)建的 Flutter 工程的名稱(chēng)。

2. 通過(guò) Cocoapods 將 Flutter 引入 現(xiàn)有 Native 工程

在Podfile添加以下下代碼

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

執(zhí)行pod install

3. 修改 Native 工程

打開(kāi)Xcode工程系宫,選擇要加入 Flutter App 的 target索昂,選擇 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

4. 編譯通過(guò),開(kāi)始編寫(xiě)FlutterViewController代碼

FlutterViewController.h

#import <Flutter/Flutter.h>

NS_ASSUME_NONNULL_BEGIN

@interface XKFluttersViewController : FlutterViewController

@end

NS_ASSUME_NONNULL_END

FlutterViewController.m

#import "XKFluttersViewController.h"
#import "XKFlutterHandler.h"

@interface XKFluttersViewController ()<FlutterPluginRegistry>

@property (strong, nonatomic) FlutterMethodChannel* batteryChannel;

@property (assign, nonatomic) BOOL isFirst;

@end

@implementation XKFluttersViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    _isFirst = YES;
    [self initFlutter];
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    
    [UIView animateWithDuration:.25f animations:^{
        self.view.frame = CGRectMake(0, [SYHandler statusBarHeight] , SCREEN_WIDETH, SCREEN_HEIGHT - [SYHandler statusBarHeight]);
    }];

    if (_isFirst) {
        _isFirst = NO;
        // 與flutter通信潮罪,通知flutter頁(yè)面已經(jīng)顯示
        [_batteryChannel invokeMethod:@"onResume" arguments:nil];
    }
}

- (void)initFlutter {
 
    NSString* methodName = @"xiaoka";
    _batteryChannel = [FlutterMethodChannel methodChannelWithName:methodName
                                                  binaryMessenger:self];
    WS(weakSelf);
    [_batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
        // TODO
        SS(strongSelf, weakSelf)
        [XKFlutterHandler handleCallWithMethod:call.method
                                     arguments:call.arguments
                                    controller:strongSelf
                                       handler:result];
    }];
}
    
- (void)dealloc {
    self.batteryChannel = nil;
    NSLog(@"釋放 FlutterViewController");
}

@end

XKFlutterHandler.h

#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface XKFlutterHandler : NSObject

/**
 * 處理回調(diào)方法和參數(shù)

 @param method 方法
 @param arguments 參數(shù)
 @param controller 控制器
 @param handler block
 */
+ (void)handleCallWithMethod:(NSString *)method
                   arguments:(id)arguments
                  controller:(UIViewController *)controller
                     handler:(FlutterResult)handler;

@end

XKFlutterHandler.m

#import "XKFlutterHandler.h"


@implementation XKFlutterHandler


+ (void)handleCallWithMethod:(NSString *)method
                   arguments:(id)arguments
                  controller:(UIViewController *)controller
                     handler:(FlutterResult)handler
{
    // 與flutter約定的方法名
    if ([method isEqualToString:@"getAppKey"]) {
        // 獲取appkey
        NSString* appkey = @"appkey";
        // 返回?cái)?shù)據(jù)給Flutter
        handler(appkey);
    }
}

至此就可以快樂(lè)的使用flutter的各種頁(yè)面了

5.熱重載

在run Xcode項(xiàng)目時(shí)康谆,現(xiàn)在vs或as中把flutter的debug指定端口上领斥,然后在Xcode項(xiàng)目啟動(dòng)時(shí)Flutter.framework就可以連接并及時(shí)刷新頁(yè)面

flutter attach --debug-port=端口號(hào)

二、在開(kāi)發(fā)過(guò)程中的注意事項(xiàng)??

1. setInitialRouter路由失效

因?yàn)樵谖业男枨罄锩媸牵?在iOS現(xiàn)有工程集成flutter項(xiàng)目沃暗,然后可以跳轉(zhuǎn)到任意的flutter業(yè)務(wù)頁(yè)面月洛。

// 使用全局引擎初始化
FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithEngine:appdelegate.engine nibName:nil bundle:nil];
// (無(wú)效)
[flutterViewController setInitialRouter:@"test"];
// (會(huì)有push的效果)
[flutterViewController pushRoute:@"test"];
// 使用默認(rèn)初始化 (有效)
FlutterViewController* flutterViewController = [[FlutterViewController alloc] init];
[flutterViewController setInitialRouter:@"test"];

2.FlutterView的問(wèn)題

現(xiàn)目前dart文件只能加載在FlutterViewController上的View,在github上翻看了一下源碼孽锥,發(fā)現(xiàn)有個(gè)FlutterView的類(lèi)嚼黔,但是SDK中沒(méi)公開(kāi)出來(lái),所以如果想要NativeView和FlutterView在同一個(gè)控制器中組合展示則可以把FlutterViewController的View添加到自身ViewController的View上再重設(shè)frame即可

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末惜辑,一起剝皮案震驚了整個(gè)濱河市唬涧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌韵丑,老刑警劉巖爵卒,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異撵彻,居然都是意外死亡钓株,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)陌僵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)轴合,“玉大人,你說(shuō)我怎么就攤上這事碗短∈芨穑” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵偎谁,是天一觀的道長(zhǎng)总滩。 經(jīng)常有香客問(wèn)我,道長(zhǎng)巡雨,這世上最難降的妖魔是什么闰渔? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮铐望,結(jié)果婚禮上冈涧,老公的妹妹穿的比我還像新娘。我一直安慰自己正蛙,他們只是感情好督弓,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著乒验,像睡著了一般愚隧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上徊件,一...
    開(kāi)封第一講書(shū)人閱讀 51,708評(píng)論 1 305
  • 那天奸攻,我揣著相機(jī)與錄音蒜危,去河邊找鬼虱痕。 笑死睹耐,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的部翘。 我是一名探鬼主播硝训,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼新思!你這毒婦竟也來(lái)了窖梁?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤夹囚,失蹤者是張志新(化名)和其女友劉穎纵刘,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體荸哟,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡假哎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鞍历。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片舵抹。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖劣砍,靈堂內(nèi)的尸體忽然破棺而出惧蛹,到底是詐尸還是另有隱情,我是刑警寧澤刑枝,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布香嗓,位于F島的核電站,受9級(jí)特大地震影響装畅,放射性物質(zhì)發(fā)生泄漏靠娱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一洁灵、第九天 我趴在偏房一處隱蔽的房頂上張望饱岸。 院中可真熱鬧,春花似錦徽千、人聲如沸苫费。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)百框。三九已至,卻和暖如春牍汹,著一層夾襖步出監(jiān)牢的瞬間铐维,已是汗流浹背柬泽。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嫁蛇,地道東北人锨并。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像睬棚,于是被迫代替她去往敵國(guó)和親第煮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355