Flutter Boost 接入实践（iOS 篇）

旧城等待， 2022-12-25 10:56 295阅读 0赞

## **1. 前言** ##

我们给 Android 接入 Flutter Boost 之后，现在我们来看看如何给 iOS 工程（OC）接入 Flutter Boost。

本文将简单梳理一下 iOS 工程接入的 Flutter Boost 的流程，以作为前文的补充。

> 参见前文： [Flutter Boost 混合开发实践与源码解析（以 Android 为例）][Flutter Boost _ Android]，Flutter Module 也依旧用前文生成的，目录结构依旧如前文所述，不再赘述。

## **2. 接入** ##

### **2.1 工程准备** ###

准备一个配有 Cocoapods 的空白工程，在 Podfile 中配置我们之前准备好的 Flutter Module 作为依赖：

flutter_application_path = '../flutter_module'
    load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
    
    target 'FlutterHybridiOS' do
        install_all_flutter_pods(flutter_application_path)
    end

接着在工程根目录下运行 `pod install` ，即可集成上 Flutter Module。看到我们的 Pods 中多了以下几个模块，即说明集成成功。

![cee045cd5fd8fbefef75fbb90ef2baa4.png][]

> 如不了解 Cocoapods，请参见  [CocoaPods 使用指南][CocoaPods]

### **2.2 实现路由类** ###

这一块直接参照 Flutter Boost 官方提供的 example 就好了：

[https://github.com/alibaba/flutter\_boost/blob/master/example/ios/Runner/PlatformRouterImp.hgithub.com][https_github.com_alibaba_flutter_boost_blob_master_example_ios_Runner_PlatformRouterImp.h_github.com]

PlatformRouterImp.h：

#import <Foundation/Foundation.h>
    #import <UIKit/UIKit.h>
    #import <flutter_boost/FlutterBoost.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @protocol FLBPlatform;
    
    /**
     * 实现平台侧的页面打开和关闭，不建议直接使用用于页面打开，建议使用FlutterBoostPlugin中的open和close方法来打开或关闭页面；
     * FlutterBoostPlugin带有页面返回数据的能力
     */
    @interface PlatformRouterImp : NSObject<FLBPlatform>
    @property (nonatomic,strong) UINavigationController *navigationController;
    @end
    
    NS_ASSUME_NONNULL_END

PlatformRouterImp.m：

#import "PlatformRouterImp.h"
    #import <flutter_boost/FlutterBoost.h>
    
    @interface PlatformRouterImp()
    @end
    
    @implementation PlatformRouterImp
    
    #pragma mark - Boost 1.5
    - (void)open:(NSString *)name
       urlParams:(NSDictionary *)params
            exts:(NSDictionary *)exts
      completion:(void (^)(BOOL))completion
    {
        BOOL animated = [exts[@"animated"] boolValue];
        FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController pushViewController:vc animated:animated];
        if(completion) completion(YES);
    }
    
    - (void)present:(NSString *)name
       urlParams:(NSDictionary *)params
            exts:(NSDictionary *)exts
      completion:(void (^)(BOOL))completion
    {
        BOOL animated = [exts[@"animated"] boolValue];
        FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController presentViewController:vc animated:animated completion:^{
            if(completion) completion(YES);
        }];
    }
    
    - (void)close:(NSString *)uid
           result:(NSDictionary *)result
             exts:(NSDictionary *)exts
       completion:(void (^)(BOOL))completion
    {
        BOOL animated = [exts[@"animated"] boolValue];
        animated = YES;
        FLBFlutterViewContainer *vc = (id)self.navigationController.presentedViewController;
        if([vc isKindOfClass:FLBFlutterViewContainer.class] && [vc.uniqueIDString isEqual: uid]){
            [vc dismissViewControllerAnimated:animated completion:^{}];
        }else{
            [self.navigationController popViewControllerAnimated:animated];
        }
    }
    @end

可以看到，Flutter Boost 支持常规 push，也支持打开模态弹窗，也支持手动 pop。

### **2.3 绑定路由管理** ###

AppDelegate.h：

#import <UIKit/UIKit.h>
    #import <flutter_boost/FlutterBoost.h>
    
    @interface AppDelegate : UIResponder <UIApplicationDelegate>
    @property (nullable, nonatomic, strong) UIWindow *window;
    @end

AppDelegate.m：

#import "AppDelegate.h"
    #import "PlatformRouterImp.h"
    #import <flutter_boost/FlutterBoost.h>
    
    @interface AppDelegate ()
    
    @end
    
    @implementation AppDelegate
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        
        PlatformRouterImp *router = [PlatformRouterImp new];
        [FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:router
                                                            onStart:^(FlutterEngine *engine) {
                                                                
                                                            }];
        UITabBarController *tabVC = [[UITabBarController alloc] init];
        UINavigationController *rvc = [[UINavigationController alloc] initWithRootViewController:tabVC];
        router.navigationController = rvc;
        
        return YES;
    }

## **3. 使用** ##

- (void)openClick:(UIButton *)button
    {
        [FlutterBoostPlugin open:@"first" urlParams:@{kPageCallBackId:@"MycallbackId#1"} exts:@{@"animated":@(YES)} onPageFinished:^(NSDictionary *result) {
            NSLog(@"call me when page finished, and your result is:%@", result);
        } completion:^(BOOL f) {
            NSLog(@"page is opened");
        }];
    }
    
    - (void)openPresentClick:(UIButton *)button
    {
        [FlutterBoostPlugin open:@"second" urlParams:@{@"present":@(YES),kPageCallBackId:@"MycallbackId#2"} exts:@{@"animated":@(YES)} onPageFinished:^(NSDictionary *result) {
            NSLog(@"call me when page finished, and your result is:%@", result);
        } completion:^(BOOL f) {
            NSLog(@"page is presented");
        }];
    }

同样的，这里可在 Native 端用两种不同的方式去打开我们在 Flutter Module 中注册好的路由名。

至此，我们成功在 iOS 工程中接入了 Flutter Boost，那就开启我们的混编之旅吧~

[Flutter Boost _ Android]: https://link.zhihu.com/?target=https%3A//me.ursb.me/archives/flutter-boost-android.html
[cee045cd5fd8fbefef75fbb90ef2baa4.png]: /images/20221120/b3076b44ddc34f94afe0d325c7c2f483.png
[CocoaPods]: https://link.zhihu.com/?target=https%3A//www.kancloud.cn/god-is-coder/cocoapods/617031
[https_github.com_alibaba_flutter_boost_blob_master_example_ios_Runner_PlatformRouterImp.h_github.com]: https://link.zhihu.com/?target=https%3A//github.com/alibaba/flutter_boost/blob/master/example/ios/Runner/PlatformRouterImp.h