Flutter与已有iOS工程混合开发
混合开发参考:Add-Flutter-to-existing-apps
本文GitHub:地址
1. 创建工程目录,iOS工程、和Flutter工程为同级目录(本文只创建iOS的混合开发,Android混合开发可以参看flutter文档)
FlutterLearnMix
|-iOS
|-Android
|-Flutter
2. 在iOS工程目录下新建iOS工程(创建方法省略,我在iOS目录下创建的工程名为FlutterLearnMix), Flutter混合开发不支持bit code,所以在iOS工程里关闭 Build Setting -> Enable Bitcode -> 设置为NO
,这里使用CocoaPods管理,需要先pod init
初始化
3. Flutter Module搭建: 切换到FlutterLearnMix/Flutter
目录,执行flutter create -t module flutter_module
4. 使iOS工程依赖Flutter Module:将flutter_module添加到Podfile文件中,内容如下,可以使用绝对路径,亦可以使用相对路径,添加完后执行pod install
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'FlutterLearnMix' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
#绝对路径
# flutter_application_path = '/Users/himin/Desktop/Web/FlutterProject/flutter_learn_mix/Flutter/flutter_module/'
#相对路径
flutter_application_path = '../../Flutter/flutter_module/'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
end
5. 在ios工程里添加运行脚本:iOS工程中Build Phases -> Run Script
添加如下脚本,如果Run Script
不存在,点击加号创建即可,并且确保Run Script这一行在 "Target dependencies"后面。(flutter文档上说有这一步,个人实际测试发现不加也可以,貌似并没有执行)
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
6. iOS工程中加入代码来使用FlutterViewController:
① AppDelegate.h文件中:
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
② AppDelegate.m文件中:
#import "AppDelegate.h"
#import "ViewController.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
@interface AppDelegate ()
@end
@implementation AppDelegate
// This override can be omitted if you do not have any Flutter Plugins.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[self.flutterEngine runWithEntrypoint:nil];
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
self.window = [[UIWindow alloc] initWithFrame:UIScreen.mainScreen.bounds];
ViewController *vc = [[ViewController alloc] init];
UINavigationController *navVC = [[UINavigationController alloc] initWithRootViewController:vc];
self.window.rootViewController = navVC;
[self.window makeKeyAndVisible];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
③ *ViewController.m文件中:
#import "ViewController.h"
#import <Flutter/Flutter.h>
#import "AppDelegate.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = UIColor.whiteColor;
{
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(20, 80, 100, 30)];
btn.backgroundColor = UIColor.orangeColor;
[btn setTitle:@"push" forState:UIControlStateNormal];
[btn setTitleColor:UIColor.grayColor forState:UIControlStateNormal];
[btn addTarget:self action:@selector(pushBtnClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
}
}
- (void)pushBtnClick {
NSLog(@"push to flutter");
FlutterEngine *flutterEngine = [(AppDelegate *)[UIApplication sharedApplication].delegate flutterEngine];
FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
flutterViewController.view.backgroundColor = UIColor.whiteColor;
NSAssert([self navigationController], @"Must have a NaviationController");
[[self navigationController] pushViewController:flutterViewController animated:YES];
}
7. 然后编译运行程序,点击push按钮跳转到flutter页面
8. flutter工程热重载:切换到FlutterLearnMix/Flutter/flutter_module
目录,执行flutter attach
即可,修改后保存然后命令行输入'r'即可实现热重载
网友评论