iOS已有项目引入Flutter

2023-02-14  本文已影响0人  路漫漫其修远兮Wzt

iOS、Flutter混合开发中,经常会遇到向已有项目中引入Flutter的情况。为了模拟这种情况下引入Flutter的场景,我会新建一个iOS工程,然后在新的iOS工程中,引入Flutter。

大致步骤如下:
1.新建iOS工程,使用CocoaPods管理工程;
2.新建Flutter Module;
3.iOS接入flutter module;
4.编写测试代码,查看结果;
当然前提是Mac电脑已经配置了Flutter环境变量,并安装了Cocoapods管理工具,这里不详述了,需要的可自行百度。

1、新建iOS工程,使用CocoaPods管理工程

新建文件夹FlutterMixDemo,并在目录下新建Xcode project : ios_app;
启动终端在FlutterMixDemo/ios_app目录下依次执行一下命令:

pod init
pod install
2、新建Flutter Module

打开终端切换到iOS_Flutter_MixBuilder目录下,执行下面命令:

flutter create -t module my_flutter

my_flutter为module的名字,执行完命令等待即可。

创建完成build一下,命令如下:

flutter build ios

如果执行上面的命令出现证书相关错误,也可以使用下方的指令在build的时候选择不签名,命令如下:

flutter build ios --no-codesign
3、iOS接入flutter module

官方给出了三种接入方案,这三种方案各有优缺点,我们先简单看看这三种方案:

使用 CocoaPods 和 Flutter SDK 集成:ios项目中用CocoaPods直接接入管理flutter module。这种方案需要所有开发人员都配置flutter环境,且安装CocoaPods;优点是通过CocoaPods自动集成,配置简单。

在 Xcode 中集成 frameworks:将flutter module先build成FrameWork文件,然后在ios项目中引入文件。这种方案的优点是ios开发人员不需要flutter环境,且项目不需要安装CocoaPods;缺点是每次修改都需要重新build,重新导入。

通过CocoaPods打包Framework:与2类似,只不过在build时加入--cocoapods参数:flutter build ios-framework --cocoapods --xcframework --no-universal --output=some/path/MyApp/Flutter/。打包出来的是Flutter.podspec 文件,ios项目中通过CocoaPods管理集成。这个方案的与2方案差不多,缺点也是每次改动需要重新build,优点是ios开发人员不需要flutter环境。

所以要根据自身的情况来选择符合自己的方案。官方推荐第一种方案,我也尝试了第一个方案,并很顺利的引入了Flutter,如果你想尝试其它两种方式,可以自行百度指引,本文就不多做延伸了。

使用Cocoapods+Flutter SDK引入

先打开上一步创建的iOS项目的podfile文件,并在开头添加上下面的代码:

flutter_application_path = '../my_flutter/'

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

post_install do |installer|
  flutter_post_install(installer)
end

然后在target中添加:

target 'xxx' do
  install_all_flutter_pods(flutter_application_path)
end

修改后的podfile文件如下:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

flutter_application_path = '../my_flutter/'

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

post_install do |installer|
  flutter_post_install(installer)
end

target 'ios_app' do

  use_frameworks!

  install_all_flutter_pods(flutter_application_path)

end

最后终端切换到iOS_Flutter_MixBuilder目录下,执行下面命令:

pod install

CocoaPods会自动将flutter module编辑出的产物集成到ios项目中。如果没有问题,执行⌘+B 编译项目就会成功。

4、编写测试代码,查看结果

我们在ViewController原生controller界面,添加代码实现跳转到Flutter界面FlutterViewController,

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

@interface ViewController ()
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    UILabel *label = [[UILabel alloc]init];
    label.textAlignment = NSTextAlignmentCenter;
    label.numberOfLines = 0;
    label.textColor = [UIColor blackColor];
    label.text = @"这是原生界面\n点击跳转Flutter";
    [self.view addSubview:label];
    
    CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
    label.frame = CGRectMake((screenWidth-200)/2, (screenHeight-40)/2, 200, 60);
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    [self jumpToFlutterViewController];
}

- (void)jumpToFlutterViewController {
    
    FlutterViewController *vc = [[FlutterViewController alloc]init];
    [self presentViewController:vc animated:YES completion:nil];
}
@end

参考资料:
[稀土掘金]Flutter、iOS混合开发实践
[阿里云开发者社区]Flutter混合开发:在已有iOS项目中引入Flutter(上)

上一篇下一篇

猜你喜欢

热点阅读