iOS与Flutter混合开发

Posted 2023-03-28

参考技术A 在现有ios项目中导入Flutter, 需要在Podfile文件中加入

flutter_application_path = '/Users/../flutter_app_module'

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

并对target添加：

install_flutter_engine_pod

install_all_flutter_pods(flutter_application_path)

从上我们可以看到导入Flutter需要依赖Flutter项目中的'.ios'文件夹下的'podhelper.rb'文件，所以在pod install之前，请确认.ios文件夹存在

也许你一开始存在这个文件，但是在执行flutter clean之后，这个文件不见了，不用惊慌， .ios文件夹基本可以通过以下几种方式生成，自行选择：

1. flutter run

2. flutter pub get

3. flutter create .

.ios文件夹生成之后，回到原生项目pod install即可。

友情提示：

在生成.ios的时候，项目中不要存在其他的内层项目（如下截图），那可能会导致你无法生成.ios或者生成的.ios不包含podhelper.rb这个文件，而最终导致你pod install失败。

愉快的开始coding......

原生(iOS)与Flutter混合开发步骤

一、前言：目前混合开发属于主流，因为多数都在原来的项目上集成Flutter模块，除非新的项目用纯Flutter,那是挺爽的。

二、集成（以iOS为例），使用Pods方式
1、首先创建一个Flutter模块（非Flutter项目，是模块）

2、创建后之后，把原生项目和Flutter模块放在一个文件夹下，同一层级。

3、原生项目打开Podfile，加入Flutter，如下

// my_flutter 是创建Flutter的模块名称
flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

platform :ios, '9.0' 
target 'NativeIOS' do
  use_frameworks!
  /// 这边引入
  install_all_flutter_pods(flutter_application_path)
  /// 其他
  ...
end

4、在原生目录下，pod install，在pod install之前，先在Flutter模块下执行 flutter pub get
4.1、 Flutter模块下 执行 flutter pub get
4.2、 在原生项目下 执行 pod install
如果以上不报错，混合开发模式到这里就集成完了。，可以好好的玩耍了。

5、Flutter模块那边怎么写还是怎么写，Flutter模块也是可以跑起来的。

6、在原生项目中注册Flutter引擎， 就是flutterEngine。 在启动的时候就注册，这样后续就不会出现卡顿的样式，有点儿难受。

/// 在AppDelegate入口初始化即可
#pragma mark - initFlutterEngine
- (void)initFlutterEngine 
    self.flutterEngine = [[FlutterEngine alloc] initWithName:@"WMFlutterEngine"];
    [self.flutterEngine run];
    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];


/// 修改如下改成 FlutterEngine
@interface AppDelegate : FlutterEngine 

7、在原先项目需要跳转的地方写业务即可了。

/// 某个原生控制器
// testPushFlutterPage 跳转的地方 ，其中self.flutterVC 是我单独的一个类 见8 
/// 跳转到Flutter页面。
- (void)testPushFlutterPage 
    self.flutterVC.fd_prefersNavigationBarHidden = YES;
    [self showViewController:self.flutterVC sender:nil];


- (void)initMethodChannel 
    self.flutterVC = [[WMFlutterViewController alloc] init];
    [self.flutterVC initMethodChannel];


- (void)viewDidLoad 
    [super viewDidLoad];
    [self initMethodChannel];

8、flutterVC类

#pragma mark - Initial Methods // 初始化的方法
- (instancetype)init

    self = [super init];
    if (self) 
       self = [[WMFlutterViewController alloc] initWithEngine:[self getFlutterEngine] nibName:nil bundle:nil];
    
    return self;


//
- (void)initMethodChannel 
    FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:@"PatientSearchChannel" binaryMessenger:self.binaryMessenger];
    self.methodChannel = methodChannel;
    //通过block回调监听通道中来自flutter的消息体 这里做一个dismiss方法，由于iOS中将flutter页面push出来，次数实现dismiss方法，给flutter发送dismss消息，就知道是让iOS将当前页面关闭的动作，iOS收到后，执行关闭操作
    __weak typeof(self) weakself = self;
    [methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) 
        __strong typeof(weakself) strongself = weakself;
        //dissmiss当前页面
        if([call.method isEqualToString:@"dismiss"])
//            [strongself.flutterVC dismissViewControllerAnimated:YES completion:nil];
            [strongself.navigationController popViewControllerAnimated:YES];
        
        if (result) 
            result(@"回到的地方");
        
        
        //dissmiss当前页面
        if([call.method isEqualToString:@"pushNative"])
            WMLog(@"pushNative 进来了 数据是 %@", call.arguments);
            WMNoticeSetViewController *VC = [[WMNoticeSetViewController alloc] init];
            WMLog(@"%@", self .navigationController);
            [self.navigationController pushViewController:VC animated:YES];
        
        
        //dissmiss当前页面
        if([call.method isEqualToString:@"pushNativeTwo"])
            WMLog(@"pushNativeTwo 进来了 数据是 %@", call.arguments);
            NSDictionary *dataDic = call.arguments;
            WMTestViewController *VC = [[WMTestViewController alloc] init];
            VC.name = dataDic[@"name"];
            WMLog(@"%@", self.navigationController);
            [self.navigationController pushViewController:VC animated:YES];
        
    ];


/// 获取引擎
- (FlutterEngine *)getFlutterEngine 
    FlutterEngine *flutterEngine = ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
    return flutterEngine;

以后原生部分就写完了。

9、Flutter部分，我写了一个工具类，来和原生交互的类

class NativeChannelUtils 
  static const MethodChannel _patientSearchChannel =
      MethodChannel('PatientSearchChannel');

  /// 患者搜索关闭
  static patientSearchDismiss(WMValueCallBack valueCallBack) 
    _patientSearchChannel.invokeMethod("dismiss").then((value) 
      Utils.logs('回来的数据 = $value');
      if (valueCallBack != null) 
        valueCallBack(value);
      
    );
  

  /// 患者搜索到原生界面
  static patientSearchPushToNative(WMValueCallBack valueCallBack) 
    _patientSearchChannel.invokeMethod(
        "pushNative", "data": "我是Flutter数据", 'code': '1000').then((value) 
      Utils.logs('回来的数据 = $value');
      if (valueCallBack != null) 
        valueCallBack(value);
      
    );
  

  /// 患者搜索到原生界面
  static patientSearchPushToNativeTwo(
      Map arguments, WMValueCallBack valueCallBack) 
    _patientSearchChannel
        .invokeMethod("pushNativeTwo", arguments)
        .then((value) 
      Utils.logs('回来的数据 = $value');
      if (valueCallBack != null) 
        valueCallBack(value);
      
    );
  

在Flutter需要的地方调用。

NativeChannelUtils.patientSearchDismiss(valueCallBack: (value) 
            Utils.logs("哈哈哈哈");
          );

`
注意点：原生和Flutter交互有三种方式，目前使用的MethodChannel方式

MethodChannel：Flutter 与 Native 端相互调用，调用后可以返回结果，可以 Native 端主动调用，也可以Flutter主动调用，属于双向通信。此方式为最常用的方式， Native 端调用需要在主线程中执行。
BasicMessageChannel：用于使用指定的编解码器对消息进行编码和解码，属于双向通信，可以 Native 端主动调用，也可以Flutter主动调用。
EventChannel：用于数据流（event streams）的通信， Native 端主动发送数据给

这个是Flutter原生方式混合开发。由于是在项目中集成的，后期看下 提出demo.

这边我用闲鱼的flutter_boost 混合开发方案 写了一个demo。
demo地址：https://github.com/yj229201093/NavateFlutterDemo

注意：如果使用原生方式，尽量不要开多个引擎，不然开销很大，就是：下面就开启了两个引擎。Flutter引擎是相互独立的。互不干扰。
原生A->FlutterB,
FlutterB->FlutterC,
FlutterC->原生D，
原生D->FlutterE

建议是一个闭环开发，一个项目开启一个Flutter引擎。就是原生进入Flutter模块，然后Flutter模块结束后就回到原生，这样算一个闭环。

如果反复跳转可以使用闲鱼的flutter_boost方案。