flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)

先提供demo,目录如下图

flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第1张图片

主要步骤(下面会具体介绍)

一、首先让flutter项目可以显示ios控件

flutter提供了一个AndroidView(android),UiKitView(ios)的控件,来实现原生显示在flutter上
1、ios端 info.plist文件设置;
2、ios端 FlutterPlatformView代理方法- (UIView*)view;提供原生view;
3、 ios 端 FlutterPlatformViewFactory代理方法

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

生成FlutterPlatformView
4、 ios 端FlutterPlugin代理方法

+ (void)registerWithRegistrar:(NSObject*)registrar;

注册原生view
5、 flutter 通过UiKitView嵌入 原生view

二、ios页面里封装WKWebView

具体介绍:

1、ios端 info.plist文件设置:io.flutter.embedded_views_preview为yes

flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第2张图片
flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第3张图片

2、ios端 FlutterPlatformView代理方法- (UIView*)view;提供原生view;

flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第4张图片
flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第5张图片

3、 ios 端 FlutterPlatformViewFactory代理方法生成FlutterPlatformView

flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第6张图片
flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第7张图片

4、 ios 端FlutterPlugin代理方法注册原生view

flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第8张图片
flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第9张图片
flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第10张图片

5、 flutter 通过UiKitView嵌入 原生view

flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面)_第11张图片
封装wkwebview,就属于原生的了,怎么写就很简单了

我这里只简单显示了下

//
//  WGFlutterIosWebView.m
//  Runner
//
//  Created by wanggang on 2019/8/19.
//  Copyright © 2019 The Chromium Authors. All rights reserved.
//

#import "WGFlutterIosWebView.h"
#import 


@interface WGFlutterIosWebView()

//WGFlutterIosWebView 创建后的标识
@property (nonatomic, assign) NSInteger viewId;
@property (nonatomic, strong) WKWebView *wkWebView;

@end


@implementation WGFlutterIosWebView

-(instancetype)initWithWithFrame:(CGRect)frame
                  viewIdentifier:(NSInteger)viewId
                       arguments:(id _Nullable)args
                 binaryMessenger:(NSObject*)messenger{
    
    self = [super init];
    if (self) {
        if (frame.size.width==0) {
            frame=CGRectMake(frame.origin.x, frame.origin.y, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
        }
        
        self.wkWebView =  [[WKWebView alloc] initWithFrame:frame];
        _wkWebView.navigationDelegate = self;
        _wkWebView.UIDelegate = self;
        
        //接收 初始化参数
        NSDictionary *dic = args;
        NSString *content = dic[@"content"];
        if (content!=nil) {
            [_wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:content]]];
        }
        
        _viewId = viewId;
    }
    return self;
}

- (nonnull UIView *)view {
    return self.wkWebView;
}
@end

你可能感兴趣的:(flutter项目,使用flutter_webview_plugin有显示不完等问题--通过原生WKWebView解决(flutter项目里显示ios页面))