【Flutter】使用PlatformView显示WebView

谁践踏了优雅 2023-07-18 11:24 38阅读 0赞

# PlatformView是什么？ #

--------------------

`PlatformView`是一种特殊的Widget，能在Flutter端显示平台控件(例如 Android View、iOS UiKitView)。需要注意PlatformView只负责NativeView在Flutter端的显示，与Native端的通信等还需借助`MethodChannel`等才能完成。

## PlatformView的机制 ##

我们知道Flutter在平台的现实是通过平台端（Android的Activity或者iOS的VC）嵌入的FlutterView实现的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]  
FlutterView内部通过Flutter自渲染引擎绘制内容，已经是平台端整个ViewTree的末端，其内部无法再嵌入任何Native的子View，所以平台端只能设法将内容数据传输到FlutterView并进行绘制。

> VirtualDisplay 类似于一个虚拟显示区域，需要结合 DisplayManager 一起调用，一般在副屏显示或者录屏场景下会用到。VirtualDisplay 会将虚拟显示区域的内容渲染在一个 Surface 上。  
> [https://developer.android.com/reference/android/hardware/display/VirtualDisplay][https_developer.android.com_reference_android_hardware_display_VirtualDisplay]

Android端将待显示内容绘制到VirtualDisplay，Flutter Engine 从 VirtualDisplay的Surface中获取纹理，并将其和 Flutter 原有的 UI 渲染树混合，最终在Flutter Widget tree 中以图形方式插入 Android View。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]

iOS的流程也大体相同，只是依赖的平台端技术不同。Android基于VirtualDisplay和Surface，而iOS基于CALayer。

# PlatformView插件开发步骤 #

--------------------

1.  【Android】 定义PlatformView
2.  【Android】 定义PlatformViewFactory，用来创建上述View
3.  【Android】 定义FlutterPlugin，注册上述工厂类
4.  【Android】 向Flutter端注册上述Plugin
5.  【Flutter】 创建PlatvormView对应的widget
6.  【Flutter】 如果有通信需求，在Widget中创建MethodChannel与native通信
7.  【Flutter】 在layout中使用上述widget显示PlatformView

# Android端代码 #

--------------------

## 1. 定义FlutterWebView ##

定义`FlutterWebView`，使之继承自`io.flutter.plugin.platform.PlatformView`

内部持有WebView实例，通过MethodChannel接收Flutter传来的URL并打开网页，注意`channel_id`的定义要与flutter保持一致。  
关于MethodChannel的使用可以参考 [Flutter与Native通信之MethodChannel][Flutter_Native_MethodChannel]

package com.example.flutter_platform_view_app
    
    import android.content.Context
    import android.view.View
    import android.webkit.WebView
    import io.flutter.plugin.common.BinaryMessenger
    import io.flutter.plugin.common.MethodCall
    import io.flutter.plugin.common.MethodChannel
    import io.flutter.plugin.common.MethodChannel.MethodCallHandler
    import io.flutter.plugin.platform.PlatformView
    
    class FlutterWebView internal constructor(context: Context?, messenger: BinaryMessenger?, id: Int)
        : PlatformView, MethodCallHandler { 
    
        private val webView: WebView
        private val methodChannel: MethodChannel
    
        init { 
            webView = WebView(context)
            webView.apply { 
                settings.apply { 
                    // enable Javascript
                    javaScriptEnabled = true
                    setSupportZoom(true)
                    builtInZoomControls = true
                    displayZoomControls = false // no zoom button
                    loadWithOverviewMode = true
                    useWideViewPort = true
                    domStorageEnabled = true
                }
            }
    
            methodChannel = MethodChannel(messenger, "plugins.vitaviva.views/webview_$id")
            methodChannel.setMethodCallHandler(this)
        }
    
        @Override
        override fun getView(): View { 
            return webView
        }
    
        @Override
        override fun onMethodCall(methodCall: MethodCall, result: MethodChannel.Result) { 
            when (methodCall.method) { 
                "setUrl" -> setUrl(methodCall, result)
                else -> result.notImplemented()
            }
        }
    
        private fun setUrl(methodCall: MethodCall, result: MethodChannel.Result) { 
            val url = methodCall.arguments as String
            webView.loadUrl(url)
            result.success(null)
        }
    
        @Override
        override fun dispose() { 
            webView.destroy()
        }
    }

## 2. 定义WebViewFactory ##

WebViewFactory继承自PlatformViewFactory。PlatformView必须通过工厂类创建

package com.example.flutter_platform_view_app
    
    import android.content.Context
    import io.flutter.plugin.common.BinaryMessenger
    import io.flutter.plugin.common.StandardMessageCodec
    import io.flutter.plugin.platform.PlatformView
    import io.flutter.plugin.platform.PlatformViewFactory
    
    class WebViewFactory(private val messenger: BinaryMessenger) :
            PlatformViewFactory(StandardMessageCodec.INSTANCE) { 
    
        override fun create(context: Context, id: Int, o: Any?): PlatformView { 
            return FlutterWebView(context, messenger, id)
        }
    }

## 3. 创建WebViewPlugin ##

继承`io.flutter.embedding.engine.plugins.FlutterPlugin`，在`onAttachedToEngine`回调中注册PlatformViewFactory

package com.example.flutter_platform_view_app
    
    import androidx.annotation.NonNull
    import io.flutter.embedding.engine.plugins.FlutterPlugin
    
    class WebViewPlugin : FlutterPlugin { 
    
        override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) { 
            flutterPluginBinding.platformViewRegistry
                    .registerViewFactory(
                            "plugins.vitaviva.views/webview",
                            WebViewFactory(flutterPluginBinding.binaryMessenger)
                    )
        }
    
        override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) { 
        }
    }

## 4. 注册WebViewPlugin ##

在Android入口处通过注册插件。通常我们通过MainActivity来显示Flutter，此时可以在MainActivity获得`FlutterEngin`，并通过其注册插件

package com.example.flutter_platform_view_app
    
    import androidx.annotation.NonNull
    import io.flutter.embedding.android.FlutterActivity
    import io.flutter.embedding.engine.FlutterEngine
    import io.flutter.plugins.GeneratedPluginRegistrant
    
    class MainActivity: FlutterActivity() { 
        override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { 
            GeneratedPluginRegistrant.registerWith(flutterEngine)
            flutterEngine.plugins.add(WebViewPlugin())
        }
    }

# Flutter端代码 #

--------------------

## 5.定义WebView的Widget ##

创建WebView的widget，build时返回`AndroidView`。参考[AndroidView代码][AndroidView]

`viewType`与我们定义的PlatformView关联，PlatformView创建后会通过`onPlatformViewCreated`进行回调，可以在里面做一些Flutter端的初始化。

import 'dart:async';
    import 'package:flutter/foundation.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    typedef void WebViewCreatedCallback(WebViewController controller);
    
    class WebView extends StatefulWidget { 
      const WebView({ 
        Key key,
        this.onWebViewViewCreated,
      }) : super(key: key);
    
      final WebViewCreatedCallback onWebViewViewCreated;
    
      @override
      State<StatefulWidget> createState() => _WebViewState();
    }
    
    class _WebViewState extends State<WebView> { 
      @override
      Widget build(BuildContext context) { 
        if (defaultTargetPlatform == TargetPlatform.android) { 
          return AndroidView(
            viewType: 'plugins.vitaviva.views/webview',
            onPlatformViewCreated: _onPlatformViewCreated,
          );
        }
        return Text(
            '$defaultTargetPlatform is not supported!');
      }
    
      void _onPlatformViewCreated(int id) { 
        if (widget.onWebViewViewCreated == null)
          return;
        widget.onWebViewViewCreated(new WebViewController._(id));
      }
    }

## 6.使用MethodChannel通信 ##

我们在`onPlatformViewCreated`中创建一个工具类`WebViewController`，内部创建MethodChannel用来与Android通信

class WebViewController { 
      WebViewController._(int id)
          : _channel = new MethodChannel('plugins.vitaviva.views/webview_$id');
    
      final MethodChannel _channel;
    
      Future<void> setUrl(String url) async { 
        assert(url != null);
        return _channel.invokeMethod('setUrl', url);
      }
    }

## 7. 显示Widget ##

在布局中使用WebView的widget，显示PlatformView。同理我们还可以用PlatformView显示android的`TextView`，最终使用效果如下：

import 'package:flutter/material.dart';
    import 'package:flutter_platform_view_app/text_view.dart';
    import 'package:flutter_platform_view_app/web_view.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return MaterialApp(
          title: 'Flutter PlatformView API',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter PlatformView Example'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget { 
      MyHomePage({ Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> { 
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
            appBar: AppBar(title: Text(widget.title)),
            body: Column(children: [
              Center(
                  child: Container(
                      padding: EdgeInsets.symmetric(vertical: 10.0),
                      width: 200.0,
                      height: 40.0,
                      child: TextView(
                        onTextViewCreated: _onTextViewCreated,
                      )
                  )
              ),
              Expanded(
                  flex: 3,
                  child: WebView(
                        onWebViewViewCreated: _onWebViewCreated,
                  )
              )
            ])
        );
      }
    
      void _onTextViewCreated(TextViewController controller) { 
        controller.setText('Android TextView and WebView example.');
      }
    
      void _onWebViewCreated(WebViewController controller) { 
        controller.setUrl('https://www.google.co.jp/');
      }
    }

# Sample代码 #

[https://github.com/vitaviva/flutter\_platform\_sample][https_github.com_vitaviva_flutter_platform_sample]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: /images/20230528/db69dd16d4cb45e38c66256b89c96ae8.png
[https_developer.android.com_reference_android_hardware_display_VirtualDisplay]: https://developer.android.com/reference/android/hardware/display/VirtualDisplay
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]: /images/20230528/0d0fb3b9b7a24ea09a8185b233ab91a0.png
[Flutter_Native_MethodChannel]: https://blog.csdn.net/vitaviva/article/details/104246211
[AndroidView]: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/platform_view.dart
[https_github.com_vitaviva_flutter_platform_sample]: https://github.com/vitaviva/flutter_platform_sample