Flutter与已有iOS工程混合开发

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 
#import 

@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end

AppDelegate.m文件中:

#import "AppDelegate.h"
#import "ViewController.h"
#import 

@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 
#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'即可实现热重载

你可能感兴趣的:(Flutter与已有iOS工程混合开发)