Flutter 和iOS 混合開發(一)

BboyDancer發表於2019-08-08

一.建立工程 1.建立flutter_module,建立flutter_module,建立flutter_module,不要建立flutter_Application 工程名字你自己定

如圖

Flutter 和iOS 混合開發(一)
建立完執行下flutter工程,記住這個畫面,一會我們要在原生的顯示這個頁面

Flutter 和iOS 混合開發(一)
2.建立一個xcode工程,這個xcode工程的建立位置最好(官方建議)放在flutter工程的同級目錄下(後面你會感謝我告訴你這做的)

Flutter 和iOS 混合開發(一)
3.xcode 工程建立一個podfile檔案,這是iOSer必備技能 在podfile輸入:

flutter_application_path = '../flutter_module/'

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

引入flutter 然後pod install

4.配置xcode的相關東西了,因為flutter 不支援bitcode,所以需要把xcode的enablebitcode 設為NO

5.xcode 預設不會執行flutter檔案的,那麼需要一個執行指令碼 我們需要在xcode建立一個指令碼檔案

Flutter 和iOS 混合開發(一)

這個指令碼檔案 flutter 官方已經提供給我們了, 位置在:你下載的flutterSDK 裡(配置Flutter環境時下的) packages->flutter_tools->bin->xcode_backend.sh

Flutter 和iOS 混合開發(一)

6.在xcode指令碼處我們填入

Flutter 和iOS 混合開發(一)
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

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

注意:因為指令碼執行是有順序的,我們需要拖到第二位,只需拖到第二位

Flutter 和iOS 混合開發(一)

7.編譯工程,正常不會出錯的

二 混合顯示

在xcode工程引入#import <Flutter/Flutter.h>

//

// ViewController.m

// Native

//

// Created by 孫文策 on 2019/8/8.

// Copyright © 2019 孫文策. All rights reserved.

//

#import "ViewController.h" #import <Flutter/Flutter.h>

@interface ViewController ()

@end

@implementation ViewController

  • (void)viewDidLoad {

  • [super viewDidLoad];

    // Do any additional setup after loading the view.

    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];

    [button setTitle:@"顯示flutter" forState:UIControlStateNormal];

    button.frame = CGRectMake(50, 100, 100, 20);

    button.backgroundColor = [UIColor redColor];

    [self.view addSubview:button];

    [button addTarget:self action:@selector(testAction:) forControlEvents:UIControlEventTouchUpInside];

}

  • (void)testAction:(UIButton *)sender { FlutterViewController * flutterVc = [[FlutterViewController alloc] init]; [self presentViewController:flutterVc animated:YES completion:^{

    }]; }

@end

以上是我的測試程式碼。

點選按鈕,我們就可以顯示flutter 頁面了!

可能有說的不詳細的,因為本來寫好了,結果釋出的時候發現不了,還提示我已經儲存到了草稿,然後意外退出來,之前寫的全沒了,心態崩了。。。 有問題可以聯絡我本人:vx: 353634026 記得備註

我得去恢復恢復心態,明天更新flutter和原生通訊,難受

相關文章