iOS与flutter混编的一点点分享，配置好flutter环境之后：
1.创建flutter module
先创建一个存放现有项目和flutter模块的文件夹，例如Desktop上创建一个名称Mixed的文件夹，当前iOS项目文件夹名称为MyApp:
a)现有项目和flutter模块都存在，直接clone到Mixed文件夹中
b)在Mixed文件夹中新建一个flutter模块，终端操作如下：
cd ~/Desktop/Mixed/
flutter create --template module my_flutter
my_flutter是flutter模块的名称，自己定义，需要实现的dart代码直接写在lib/文件夹下面
2.嵌入flutter
a)手动嵌入
b)使用CocoaPods嵌入(推荐使用)
反正我使用的CocoaPods，贼简单，手动的话还要去增加一些配置，CocoaPods嵌入过程如下：
目前Mixed中结构应该是这样的，如果不同，则可能需要调整相对路径。
Desktop/Mixed/
├── my_flutter/
│ └── .ios/
│ └── Flutter/
│ └── podhelper.rb
└── MyApp/
└── Podfile
1.在Podfile中添加：
flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb’)
2.对每个需要嵌入flutter的Podfile target添加：
target 'MyApp' do
install_all_flutter_pods(flutter_application_path)
end
3.运行：
pod install
image.png
当你更改了myflutter/pubspec.yaml中的插件依赖项，需要在flutter项目中运行flutter pub get来刷新podhelper.rb脚本读取的插件列表，而且要从/MyApp再次运行pod install。
podhelper.rb 脚本把插件、Flutter.framework和App.framework添加到你的iOS项目中，Flutter.framework是Flutter engine的包，App.framework是这个项目的编译的Dart代码。
在Xcode打开MyApp.xcworkspace，编译起来。
3.iOS和flutter之间的页面跳转
FlutterEngine 充当 Dart VM 和 Flutter 运行时的主机； FlutterViewController依附于 FlutterEngine，给 Flutter 传递 UIKit 的输入事件，并展示被 FlutterEngine 渲染的每一帧画面。
1.创建一个 FlutterEngine：
在 AppDelegate.h:
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
在 AppDelegate.m:
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
#import "AppDelegate.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
// Runs the default Dart entrypoint with a default Flutter route.
[self.flutterEngine runWithEntrypoint:nil];
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine]; // 注册插件
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
注意注册插件的时机，如果任何一个插件库中需要使用到当前某些对象，保证注册插件时对象已存在，否则会导致crash.
2.使用 FlutterEngine 展示 FlutterViewController
我将flutter页面直接设置为APP的首页
FlutterViewController *vc =
[[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
[vc setInitialRoute:@"home"]; // 在flutter中自定义的路由名称
UINavigationController *navi = [[UINavigationController alloc] initWithRootViewController: vc];
self.window.rootViewController = navi;
如果是从某个原生页面跳转flutter的页面，直接
FlutterViewController *flutterViewController =
[[FlutterViewController alloc] init];
[flutterViewController setInitialRoute:@"/pageA"];
[self.navigationController pushViewController:flutterViewController animated:true];
flutter中main.dart文件是这样的：
class MyApp extends StatelessWidget {
static BuildContext context=null;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'APP名称',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: <String, WidgetBuilder>{
"/home": (context) => MainPage(),
"/PageA":(context) => PageA(),
});
}
}
3.页面之间的交互
目前我所需要的交互，使用FlutterMethodChannel都可以实现。
flutter中自定义一个方法通道名称，例如
static const String MethodChannelName = "example.methodChannel";
我从原生很多地方跳转flutter页面，都使用的这一个通道名称
a) flutter调用原生的方法
官方示例：flutter页面需要原生这边获取电池电量，然后在flutter页面展示
flutter中编写：
static const platform = const MethodChannel(MethodChannelName);
// 调用原生方法，方法名为getBatteryLevel
Future<void> _getBatteryLevel() async {
String batteryLevel;
try {
// result是原生获取到电池电量后传递过来的
final int result = await platform.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level at $result % .';
} on PlatformException catch (e) {
batteryLevel = "Failed to get battery level: '${e.message}'.";
}
setState(() {
_batteryLevel = batteryLevel;
});
}
然后在页面中显示电池电量
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
RaisedButton(
child: Text('Get Battery Level'),
onPressed: _getBatteryLevel,
),
Text(_batteryLevel),
],
),
),
);
}
flutter中已经完成，然后在iOS创建的FlutterViewController这边添加：
FlutterMethodChannel* batteryChannel = [FlutterMethodChannel
methodChannelWithName:@"example.methodChannel"
binaryMessenger:vc.binaryMessenger];
__weak typeof(self) weakSelf = self;
[batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
if ([@"getBatteryLevel" isEqualToString:call.method]) {
int batteryLevel = [weakSelf getBatteryLevel];
if (batteryLevel == -1) {
result([FlutterError errorWithCode:@"UNAVAILABLE"
message:@"Battery info unavailable"
details:nil]);
} else {
// 将数据传递给flutter
result(@(batteryLevel));
}
} else {
result(FlutterMethodNotImplemented);
}
}];
通道名称example.methodChannel跟flutter那边写的保持一致，vc是上一步中创建的FlutterViewController，getBatteryLevel这个方法名称也跟flutter中的保持一致
// 原生中获取电池电量的方法
- (int)getBatteryLevel {
UIDevice* device = UIDevice.currentDevice;
device.batteryMonitoringEnabled = YES;
if (device.batteryState == UIDeviceBatteryStateUnknown) {
return -1;
} else {
return (int)(device.batteryLevel * 100);
}
}
这样运行iOS，就完成了。
b) 原生调用flutter的方法
比如说，原生登录之后我要刷新嵌入进来的flutter页面，并把登录成功的用户信息传给flutter模块。
iOS中，先获取到之前创建的方法通道methodChannel，使用invoke直接调用
[methodChannel invokeMethod:@"flutter_login" arguments:@{@"json": [LoginManager account].mj_JSONString}];
flutter中：
MethodChannel _methodChannel; // 声明方法通道
_methodChannel = MethodChannel("example.methodChannel");
_methodChannel.setMethodCallHandler(_originMethodCallback);
Future<Map<String, String>> _originMethodCallback(MethodCall methodCall) async {
String methodName = methodCall.method; // 方法名
Map params = methodCall.arguments; // 参数
Map<String, String> resultMap = Map(); // 返回结果
switch(methodName) {
case "flutter_login": // 登录
print("Flutter_Login:${params}");
...
// 刷新flutter模块的登录状态和用户信息
break;
default:
}
return resultMap;
}
交互的话，我目前只使用了MethodChannel ，欢迎补充指正。
PlatformChannel分为BasicMessageChannel、MethodChannel以及EventChannel：
BasicMessageChannel: 用于传递数据。Flutter与原生项目的资源是不共享的，可以通过BasicMessageChannel来获取Native项目的图标等资源。
MethodChannel: 传递方法调用。Flutter主动调用Native的方法，并获取相应的返回值。比如获取系统电量，发起Toast等调用系统API，可以通过这个来完成。
EventChannel: 传递事件。这里是Native将事件通知到Flutter。比如Flutter需要监听网络情况，这时候MethodChannel就无法胜任这个需求了。EventChannel可以将Flutter的一个监听交给Native，Native去做网络广播的监听，当收到广播后借助EventChannel调用Flutter注册的监听，完成对Flutter的事件通知。
想具体了解，请参考 (https://www.cnblogs.com/loaderman/p/11353174.html)
网友评论