FlutterBoost 实现Flutter页面内嵌iOS view

原创

已于 2023-08-22 09:21:17 修改 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios #flutter #cocoa

于 2023-08-16 16:26:18 首次发布

本文介绍了如何在Flutter应用中使用FlutterBoost实现内嵌iOS原生视图，包括自定义UILabel、创建FlutterPlatformView工厂、注册插件以及在Flutter和iOS之间的通信。

在使用Flutter混合开发中会遇到一些原生比Flutter优秀的控件，不想使用Flutter的控件，想在Flutter中使用原生控件。这时就会用到 Flutter页面中内嵌原生view，这里简单介绍一个内嵌 iOS 的view。

注：这里使用了 FlutterBoost。网上大部分都是代码执行不起来，本案例起码可以正常使用。

原生部分
这里开始在原生部分进行处理
自定义 view FlutterIosTextLabel

#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>

NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosTextLabel : NSObject<FlutterPlatformView>

@property (nonatomic, strong) UILabel *label;


- (instancetype)initWithFrame:(CGRect)frame
               viewIdentifier:(int64_t)viewId
                    arguments:(id _Nullable)args
              binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;

@end

NS_ASSUME_NONNULL_END

#import "FlutterIosTextLabel.h"

@implementation FlutterIosTextLabel

//在这里只是创建了一个UILabel
- (instancetype)initWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger {
   
   
  if (self = [super init]) {
   
   
      self.label = [UILabel new];
      self.label.backgroundColor = [UIColor yellowColor];
      self.label.textColor = [UIColor redColor];
      self.label.textAlignment = NSTextAlignmentCenter;
      self.label.numberOfLines = 0;
      NSDictionary *dict = (NSDictionary *)args;
      NSString *textValue = dict[@"content"];
      self.label.text = [NSString stringWithFormat:@"我是iOSView \n在显示：%@", textValue];
  }
  return self;
}

- (nonnull UIView *)view {
   
   
    return self.label;
}

@end

创建 FlutterIosTextLabelFactory

#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>


NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosTextLabelFactory : NSObject

最低0.47元/天解锁文章