Flutter 使用platformView iOS 端填坑总结

前言

前段时间使用platformView 在flutter页面嵌入原生view实现视频播放，本文总结下iOS端在使用platformView遇到一些问题。

platfromView如何使用这里不做介绍，直接介绍platformView 使用中遇到的问题

1 黑色边框问题

在 iOS 部分机型上会出现黑色的边框，具体原因没有找到，怀疑是位置计算渲染导致的

解决方法:在播放器view的layer加个蒙层;

- (CAShapeLayer *)maskStyle:(CGRect)rect 
{ 
    UIBezierPath *rectpath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, rect.size.width, rect.size.height)]; 
    CAShapeLayer *maskLayer = [CAShapeLayer layer]; 
    maskLayer.path = [rectpath CGPath]; maskLayer.fillRule = kCAFillRuleNonZero; 
    return maskLayer; 
}

2 初始化frame(0,0,0,0)的问题

在低版本的flutter中遇到过这个问题，高版本目前没有验证，iOS端实现platformView的代码后

- (NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame
                                    viewIdentifier:(int64_t)viewId
                                         arguments:(id _Nullable)args

frame 一直为(0,0,0,0)，无法给view设置宽高,应该是在createWithFrame 调用时并layout并没有完成，所以返回frame(0,0,0,0)

解决方法：对返回的(NSObject *)创建子View containerView

@interface containerView : UIView

@end

@implementation containerView

- (void)layoutSubviews
{
    [super layoutSubviews];
    // 此时可以获取到frame并给原生页面设置frame
    xxxxxx
}
@end

• 当然也可以通过传承的方式将flutter设定的宽高给到原生侧实现约束
• 本人比较懒，高版本flutter目前还验证过有没有该问题

3 当iOS使用platformView，BackdropFilter使用blur会糊掉整个页面

原因：BackdropFilter将原始canvas的像素过滤然后替换原始canvas的像素实现模糊效果，然而iOS上使用platformView时，会在原始canvas上生成picture recorder,在记录时包含了BackdropFilter层，当这个picture recorder 放到原始canvas时，就把canvas所有的内容过滤，就会出现所有内容都被模糊;

同样，该问题目前出现的低版本，高版本（3.0以上）并未验证是否解决

以上是Flutter 在iOS 端使用platformView出现的问题，如有使用错误请指出。

未经作者允许，禁止转载