flutter plugin之路：四步实现flutter显示iO

• 系列文章

flutter与原生交互传值OC/java版(一)
flutter与原生交互传值OC/java版(二)
四步实现flutter显示iOS原生组件OC/java版(三)
四步实现flutter显示安卓原生组件OC/java版(三)
本demo的github地址：https://github.com/iBinbro/flutterstudy

四步实现flutter显示iOS原生组件

一、iOS端的实现

ps.iOS支持显示原生组件需要设置xcode的info.plist

io.flutter.embedded_views_preview

xcode的info.plist

1.新建两个原生组件(你得会点原生)

/// 原生的组件
@interface NVView : UIView
@end

@implementation NVView
- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]){
        self.backgroundColor = UIColor.greenColor;
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 50, 100, 50)];
        label.backgroundColor = UIColor.purpleColor;
        label.text = @"我是原生组件";
        [self addSubview:label];
    }
    return self;
}
- (void)dealloc{
    NSLog(@"原生组件销毁释放这里会被调用 实验证明 flutter侧页面关闭后这里会调用 dealloc 所以是自动释放的");
}
@end

@interface AnotherView : UIView
@end

@implementation AnotherView
- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]){
        self.backgroundColor = UIColor.blueColor;
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 50, 100, 50)];
        label.backgroundColor = UIColor.yellowColor;
        label.text = @"我是另一个原生组件";
        [self addSubview:label];
    }
    return self;
}
- (void)dealloc{
    NSLog(@"原生组件销毁释放这里会被调用 实验证明 flutter侧页面关闭后这里会调用 dealloc 所以是自动释放的");
}
@end

2.新建一个实现FlutterPlatformView协议的基类(NSObject<FlutterPlatformView>)
这个基类主要用于在协议方法里返回原生的组件(步骤1中创建)

/// 一个实现FlutterPlatformView协议的基类(NSObject<FlutterPlatformView>)
@interface NVViewObject : NSObject<FlutterPlatformView>

/// 新声明一个方法存放flutter侧传过来的参数
@property NSNumber* argpara;
- (instancetype)initWithArg:(NSNumber*)arg;

@end

@implementation NVViewObject

- (instancetype)initWithArg:(NSNumber*)arg{
    if (self = [super init]){
        self.argpara = arg;
    }
    return self;
}

/// 实现协议方法<FlutterPlatformViewFactory>
/// 这里返回原生组件
/// 返回的原生组件大小是撑满flutter侧的大小的 这里设置了frame也不会起作用
- (nonnull UIView *)view {
    if (self.argpara.intValue == 1){
//        return [[NVView alloc]  initWithFrame:CGRectMake(0, 0, 10, 10)];
        return [[NVView alloc] init];
    }else{
//        return [[AnotherView alloc]  initWithFrame:CGRectMake(0, 0, 10, 10)];
        return [[AnotherView alloc] init];
    }
}

@end

3.新建一个实现协议FlutterPlatformViewFactory的基础类(NSObject)
这个实现工厂方法的协议主要返回实现FlutterPlatformView协议的基类(步骤2中创建的NVViewObject)

@interface NVPlatformViewFactory : NSObject<FlutterPlatformViewFactory>
@end

@implementation NVPlatformViewFactory

/// 与flutter中 creationParams creationParamsCodec 对应 不实现此方法args则为null
- (NSObject<FlutterMessageCodec> *)createArgsCodec{
    return [FlutterJSONMessageCodec sharedInstance];
}

/// 实现协议方法<FlutterPlatformViewFactory>
/// 这里需要返回一个实现FlutterPlatformView协议的基类(NSObject<FlutterPlatformView>)
/// viewId是自动生成的无法指定
/// args flutter侧传递的参数
- (nonnull NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args {
    NSLog(@"frame = %@",NSStringFromCGRect(frame));
    NSLog(@"viewId = %lld args = %@",viewId, args);
    
    //args 根据这个参数可以返回不同的view
    return [[NVViewObject alloc] initWithArg:args];
}

@end

4.原生代码里注册插件以及注册步骤3中创建的NVPlatformViewFactory

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//....

//核心代码
    /**********flutter显示原生组件flutter-Start**********/
    NVPlatformViewFactory *nvPlatformViewFactory = [[NVPlatformViewFactory alloc] init];
    //native:插件名，和其他插件区分开 唯一性
    //nvview:flutter中UiKitView组件需要的viewType属性 这样flutter就能找到viewFactory工厂方法返回对应的原生组件
    [[self registrarForPlugin:@"native"] registerViewFactory:nvPlatformViewFactory withId:@"nvview"];
    /**********flutter显示原生组件flutter-End**********/

//....
    
    // Override point for customization after application launch.
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

flutter侧的代码

      Container(
        width: 200,
        height: 200,
        color: Colors.red,
        child: UiKitView(
          viewType: "nvview",
          // 原生种的args
          creationParams: 1,
          // 编码类型
          // StandardMessageCodec
          // JSONMessageCodec
          // StringCodec
          // BinaryCodec
          creationParamsCodec: JSONMessageCodec(),
        ),
      )