環境配置
因為是在iOS已有項目中集成Flutter，所以正常情況的環境是macOS + Xcode + flutter環境；再加上flutter 需要的的dart語言編輯器 Android Studio 、IntelliJ IDEA 或 Visual Studio Code (VS Code) ；因為flutter是多平臺，所以也要安裝安卓相關的SDK。macOS下搭建Flutter開發環境可以參考 Mac下搭建Flutter開發環境。
創建Flutter項目
Flutter項目最好獨立于iOS項目，不要耦合進iOS項目中，最好放在與項目目錄同級。
在iOS項目目錄下終端運行:
flutter create -t module flutter_module
運行完成后，iOS項目與Flutter項目層級如下：
iOS工程配置
-
因為Flutter混合開發還不支持bit code，所以在iOS工程中需要關閉bit code。
-
創建Xcode項目中的Config文件，引向flutter module
新建Config目錄，管理Xcode工程的配置銜接文件，分別創建 Flutter.xcconfig 、Debug.xcconfig、Release.xcconfig 三個配置文件；其中Flutter.xcconfig 是指向外目錄flutter module的Generated.xcconfig 文件路徑引用文件，其他兩個代表Xcode的環境配置文件。
三個文件的引入內容 （所引用的都是絕對路徑，最終都是指引到 Generated.xcconfig）
Flutter.xcconfig:
#include "../../flutter_module/.ios/Flutter/Generated.xcconfig"
ENABLE_BITCODE=NO
Debug.xcconfig:
#include "Flutter.xcconfig"
Release.xcconfig:
#include "Flutter.xcconfig"
FLUTTER_BUILD_MODE=release
-
修改Xcode project環境配置
最重要： 引入xcode-backend.sh
在iOS工程里添加運行腳本 "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build，并且確保Run Script這一行在"Target dependencies" 或者 "Check Pods Manifest.lock"后面。
點擊Xcode運行，會執行到xcode-backend.sh腳本；如果運行成功，則說明環境配置的都沒問題，此時在Flutter工程下的.ios/Flutter/目錄下會生成App.framework和/engine/Flutter.framework，其中App.framework即為Flutter工程生成的產物。
打包framework命令
flutter build ios-framework --output=/Users/Desktop/FlutterTest
導入Flutter工程產物到iOS工程中
方法一：可以將Flutter工程中生成的App.framework和Flutter.framework產物拷貝到iOS工程中，然后再鏈接到iOS項目中。
該方法存在的問題：每次修改完Flutter代碼重新打包生成App.framework產物后都需要重新拷貝到iOS工程中。
方法二：直接讓iOS項目鏈接Flutter工程下的App.framework和Flutter.framework產物，然后修改導入framework的路徑，這樣修改Flutter的代碼后通過運行Xcode即可得到最新Flutter工程的產物。
導入App.framework和Flutter.framework后需要將Embed改成Embed & Sign。
至此，Xcode與Flutter之間混編配置完成，兩個項目文件已經關聯上了。這時候你就可以修改main.dart 文件內容，重新編譯運行Xcode 則APP.framework自動會被編譯成最新的flutter代碼。
下面開始寫代碼了
從iOS頁面跳轉到Flutter頁面
- 將Flutter工程下的main.dart替換成下面的代碼:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "My App",
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("My App"),
),
body: Center(
child: Text("Hello World!"),
),
),
);
}
}
- iOS工程點擊屏幕跳轉到Flutter頁面:
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
flutterVC.modalPresentationStyle = UIModalPresentationFullScreen;
[self presentViewController:flutterVC animated:YES completion:nil];
}
- 點擊Xcode運行，點擊屏幕就可以跳轉到Flutter頁面，效果圖如下：
iOS原生與Flutter進行交互
-
Flutter調用iOS的方法，iOS返回結果給Flutter：
main.dart代碼:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyHome());
}
class MyHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "My Home",
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State <MyHomePage> {
// 創建一個給native的channel(類似于iOS的通知)
static const methodChannel = const MethodChannel('com.pages.your/native_get');
var _leftNumber = 10;
var _rightNumber = 20;
var _result = 0;
Future<Null>_callNativeMethodToCalculateAdd() async {
dynamic result;
try {
// Flutter調用Native
result = await methodChannel.invokeMethod('callAdd', {"left": _leftNumber, "right": _rightNumber});
} on PlatformException {
result = 0;
}
setState(() {
_result = result;
});
}
Future<Null>_callNativeMethodToCalculateMul() async {
dynamic result;
try {
// Flutter調用Native
result = await methodChannel.invokeMethod('callMul', {"left": _leftNumber, "right": _rightNumber});
} on PlatformException {
result = 0;
}
setState(() {
_result = result;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('My Home'),
),
body: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: GestureDetector(
child: Text("調用native方法計算加法"),
onTap: () {
_callNativeMethodToCalculateAdd();
},
),
color: Colors.grey,
margin: EdgeInsets.only(bottom: 20),
),
Container(
child: GestureDetector(
child: Text("調用native方法計算乘法"),
onTap: () {
_callNativeMethodToCalculateMul();
},
),
color: Colors.grey,
margin: EdgeInsets.only(bottom: 20),
),
Container(
child: Text("計算結果是: ${_result}"),
)
],
),
),
);
}
}
iOS代碼：
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
flutterVC.modalPresentationStyle = UIModalPresentationFullScreen;
[self presentViewController:flutterVC animated:YES completion:nil];
// 要與main.dart中一致
NSString *channelName = @"com.pages.your/native_get";
FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterVC];
[messageChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult _Nonnull result) {
NSDictionary *numbers = call.arguments;
NSInteger left = [numbers[@"left"] integerValue];
NSInteger right = [numbers[@"right"] integerValue];
NSInteger r = 0;
if ([call.method isEqualToString:@"callAdd"]) {
r = left + right;
} else if ([call.method isEqualToString:@"callMul"]) {
r = left * right;
}
result(@(r));
}];
}
運行結果：
- iOS主動調用Flutter
一般用于flutter初始化需要從客戶端獲取一些參數作為渲染條件；類似iOS這邊的KVO，監聽flutter是否已經在監聽，監聽的時候回調到代理[這步其實還是flutter監聽的時候，內部發了一個通知，iOS這邊收到并回調，iOS Native處理代理，并回調給flutter所需要參數]
main.dart代碼:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyHome());
}
class MyHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "My Home",
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 注冊一個通知
static const EventChannel eventChannel = const EventChannel("com.pages.your/native_post");
// 渲染前的操作，類似于iOS中的viewDidLoad
@override
void initState() {
super.initState();
// 監聽事件，同事發送參數12345
eventChannel.receiveBroadcastStream(12345).listen(_onEvent, onError: _onError);
}
String naviTitle = "";
// 回調事件
void _onEvent(Object event) {
setState(() {
naviTitle = event.toString();
});
}
// 錯誤返回
void _onError(Object error) {
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("My Home"),
),
body: Center(
child: Text(naviTitle),
),
);
}
}
iOS代碼:
#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController () <FlutterStreamHandler>
{
int I;
FlutterEventSink _events;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerRun) userInfo:nil repeats:YES];
}
- (void)timerRun {
if (_events) {
_events(@(i++));
}
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
flutterVC.modalPresentationStyle = UIModalPresentationFullScreen;
[self presentViewController:flutterVC animated:YES completion:nil];
// 要與main.dart中一致
NSString *channelName = @"com.pages.your/native_post";
FlutterEventChannel *eventChannel = [FlutterEventChannel eventChannelWithName:channelName binaryMessenger:flutterVC];
[eventChannel setStreamHandler:self];
}
#pragma mark - FlutterStreamHandler
// 這個onListen是Flutter端開始監聽這個channel時的回調，第二個參數EventSink是用來傳數據的載體
- (FlutterError *)onListenWithArguments:(id)arguments eventSink:(FlutterEventSink)events {
// arguments 是 flutter給native的參數
// 回調給flutter，建議使用實例指向，因為該block可以使用多次
_events = events;
return nil;
}
// flutter不在接收
- (FlutterError *)onCancelWithArguments:(id)arguments {
// arguments flutter給native的參數
return nil;
}
@end
運行結果：
交互總結
這兩種方式都差不多，一個使用的是block，一個使用的是delegate，最終回調給flutter都是通過block。
MethodChannel 使用block，上下文更加明確；同一個channel name可以根據flutter給回的call.method、call.arguments更加靈活的處理回調handle, 回調只能使用一次（意思就是就算你創建一個實例指向block，單block回調只能使用一次，回調之后flutter block那邊不再接收）；
EventChannel 使用delegate，代碼層次更鮮明；同一個channel name只能通過判斷arguments參數處理回調handle, 回調可以使用多次（創建一個實例指向block，該block可以向flutter發送多次）；
參考
iOS Native混編Flutter交互實踐
iOS老項目集成Flutter（iOS混編Flutter）
Flutter官方文檔
Flutter中文網
