现有iOS项目中嵌入flutter

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

自动生成Debug 和 Release的配置文件
image.png

当你更改了myflutter/pubspec.yaml中的插件依赖项,需要在flutter项目中运行flutter pub get来刷新podhelper.rb脚本读取的插件列表,而且要从/MyApp再次运行pod install

podhelper.rb 脚本把插件、Flutter.frameworkApp.framework添加到你的iOS项目中,Flutter.framework是Flutter engine的包,App.framework是这个项目的编译的Dart代码。

在Xcode打开MyApp.xcworkspace,编译起来。

参考flutter官网

3.iOS和flutter之间的页面跳转

FlutterEngine 充当 Dart VM 和 Flutter 运行时的主机; FlutterViewController依附于 FlutterEngine,给 Flutter 传递 UIKit 的输入事件,并展示被 FlutterEngine 渲染的每一帧画面。

1.创建一个 FlutterEngine:

在 AppDelegate.h:

#import 
@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end

在 AppDelegate.m:

#import  
#import "AppDelegate.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)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: {
          "/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 _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> _originMethodCallback(MethodCall methodCall) async {
    String methodName = methodCall.method;            // 方法名
    Map params = methodCall.arguments;                // 参数
    Map resultMap = Map();            // 返回结果
    switch(methodName) {
      case "flutter_login":      // 登录
        print("Flutter_Login:${params}");
        ...
        // 刷新flutter模块的登录状态和用户信息
        break;
      default:
    }
    return resultMap;
  }

交互的话,我目前只使用了MethodChannel ,欢迎补充指正。

PlatformChannel分为BasicMessageChannelMethodChannel以及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)

你可能感兴趣的:(现有iOS项目中嵌入flutter)