Flutter 調用iOS原生WebView (PlatformView)

PlatformView是 flutter 官方提供的一個可以嵌入 Android 和 iOS 平臺原生 view 的小部件。
直接上代碼:
1.創建webView (這裏js oc flutter交互不闡述)

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

NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosWebView : NSObject<FlutterPlatformView>

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

NS_ASSUME_NONNULL_END
#import "FlutterIosWebView.h"
#import <WebKit/WebKit.h>
#import "AppDelegate.h"

@interface FlutterIosWebView ()<WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler>

@end

@implementation FlutterIosWebView{
    //FlutterIosTextLabel 創建後的標識
    int64_t _viewId;
    WKWebView * _webView;
}
//

//在這裏只是創建了一個WKWebView
-(instancetype)initWithWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args binaryMessenger:(NSObject<FlutterBinaryMessenger> *)messenger{
    if ([super init]) {
        if (frame.size.width==0) {
            frame=CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
        }
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        WKUserContentController *userController = [[WKUserContentController alloc] init];
        configuration.userContentController = userController;
        _webView =[[WKWebView alloc] initWithFrame:frame configuration:configuration];
        [_webView setUserInteractionEnabled:YES];
        NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://blog.csdn.net/MHTios"]];
        [_webView loadRequest:request];
        _webView.scrollView.bounces = NO;
        _webView.UIDelegate = self;
        _webView.navigationDelegate = self;
        [_webView setOpaque:YES];
        _viewId = viewId;
        [userController addScriptMessageHandler:self name:@"FlutterChannel"];
    }
    return self;
    
}

- (nonnull WKWebView *)view {
    return _webView;
}

2.創建 Factory

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

NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosWebViewFactory : NSObject<FlutterPlatformViewFactory>
- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger>*)messager;

@end

NS_ASSUME_NONNULL_END
#import "FlutterIosWebViewFactory.h"
#import "FlutterIosWebView.h"

@implementation FlutterIosWebViewFactory
{
    NSObject<FlutterBinaryMessenger>*_messenger;
}
- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger> *)messager{
    self = [super init];
    if (self) {
        _messenger = messager;
    }
    return self;
}

//設置參數的編碼方式
-(NSObject<FlutterMessageCodec> *)createArgsCodec{
    return [FlutterStandardMessageCodec sharedInstance];
}

//用來創建 ios 原生view
- (nonnull NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args {
    //args 爲flutter 傳過來的參數
    FlutterIosWebView *webView = [[FlutterIosWebView alloc] initWithWithFrame:frame viewIdentifier:viewId arguments:args binaryMessenger:_messenger];
    return webView;
}
@end

3.創建Plugin

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

NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosWebViewPlugin : NSObject<FlutterPlugin>

@end

NS_ASSUME_NONNULL_END
#import "FlutterIosWebViewPlugin.h"
#import "FlutterIosWebViewFactory.h"

@implementation FlutterIosWebViewPlugin
+ (void)registerWithRegistrar:(nonnull NSObject<FlutterPluginRegistrar> *)registrar {
    
    //註冊插件
    //註冊 FlutterIosTextLabelFactory
    //com.flutter_to_native_test_textview 爲flutter 調用此  textLabel 的標識
    [registrar registerViewFactory:[[FlutterIosWebViewFactory alloc] initWithMessenger:registrar.messenger] withId:@"com.flutter_to_native_webView"];
}
@end

4.註冊

#import <Foundation/Foundation.h>
#import "FlutterIosWebViewPlugin.h"
#import <Flutter/Flutter.h>
NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosWebViewRegistran : NSObject
+ (void)registerWithRegistry:(NSObject<FlutterPluginRegistry>*)registry;
@end

NS_ASSUME_NONNULL_END
#import "FlutterIosWebViewRegistran.h"

@implementation FlutterIosWebViewRegistran
+(void)registerWithRegistry:(NSObject<FlutterPluginRegistry> *)registry{
    //註冊插件
    [FlutterIosWebViewPlugin registerWithRegistrar:[registry registrarForPlugin:@"FlutterIosWebViewPlugin"]];
}
@end

5.AppDelegate 添加註冊代碼

[GeneratedPluginRegistrant registerWithRegistry:self];
[FlutterIosWebViewRegistran registerWithRegistry:self];

到這裏ios 原生基本結束了,接下來Flutter調用

Widget webView = Container(
    width: double.infinity,
    height: double.infinity,
    child: UiKitView(viewType: "com.flutter_to_native_webView"),
  );
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章