修复flutter_webview_plugin在页面滑出时web图层残留的问题

柳随风

发布于 2020-9-4 14:30

浏览

0收藏

前言

目前pub上关于webview有两个点赞最多的插件，

webview_flutter 和 flutter_webview_plugin

经过一番比较选择了后者：flutter_webview_plugin，这里将记录写出来，希望对你有所帮助

两者区别

webview_flutter ：

flutter官方开发维护，采用的platformView显示。

受flutter端控制（在树内），对于页面过渡动画是可协调，受控制的。

flutter_webview_plugin ：

flutter 社区开发维护，采用的是原生端添加渲染的方式。

因为是原生端绘制，不在flutter 树内，不受其控制，显示和隐藏是需要methodChannel进行通知的。

看起来前者要比后者灵活方便，但是唯一也是最严重的扣分项就是性能问题：

webview_flutter 的性能要明显弱于 flutter_webview_plugin，其所造成的卡顿是肉眼可见，不需要看什么fps、dumpsy啥的...尤其是稍微复杂一些的页面。

基于此我选择了flutter_webview_plugin，当然它也有不足。

flutter_webview_plugin

遇到的问题

由于其本身是采用原生端渲染（以安卓为例，是通过addContentView(webview)）,因此其不在flutter 的widget树内，也就无从谈起flutter对其的控制了。

那么当我们的页面采用了过渡动画，如滑动进入/退出，由于flutter 页面在没有走完过渡动画时，是不会真正退出的（走dispose），而插件的显隐和释放是在页面的dispose中才进行的，这就导致了，背景虽然滑出去了（或者漏出了上层页面），但是webview的内容依然残留了一会才消失。

问题演示

修复flutter_webview_plugin在页面滑出时web图层残留的问题-鸿蒙开发者社区

问题分析

查看了flutter_webview_plugin的源码，它的ui结构和运行流程如下图

修复flutter_webview_plugin在页面滑出时web图层残留的问题-鸿蒙开发者社区

    class _WebviewScaffoldState extends state{
        widget build(){
            return Scaffold(
                body:_WebviewPlaceholder(
                    onRectChanged:(Rect rect){
                        webviewReference.launch(
                            rect:rect
                            ...
                        );
                    }
                )
            );
        }
    }

在创建的renderBox的paint方法调用后，就会回调onRectChanged 这个方法并携带显示区域rect，然后通过webviewReference.launch 启动原生端的view添加绘制，绘制区域基于所传的rect。

webviewReference extends FlutterWebviewPlugin 这个类是一个通信类，

这个类还对外暴露了一个resize方法用于在rect改变时进行相应的调整

  /// resize webview
  Future<Null> resize(Rect rect) async {
    final args = {};
    args['rect'] = {
      'left': rect.left,
      'top': rect.top,
      'width': rect.width,
      'height': rect.height,
    };
    await _channel.invokeMethod('resize', args);
  }

经过上面的分析，只要我们改动这个rect就可以改变webview的显示位置和大小。

首先我想到的是对页面做动画的PageRouteBuilder;

初版解决方案

经过对PageRouteBuilder这类的源码一层一层分析后

PageRouteBuilder 嵌套极多，同时我还捎带了看了一下push方法，所得的大致的流程图我放在文章结尾，有兴趣的可以看一下

发现通过builder.animation可以对过渡动画进行监听

              SlideRightRouteBuilder builder = SlideRightRouteBuilder(ComplexPage());
              Navigator.of(context).push(builder);
              ///要放在push后面，不然报错，原因见文章末尾的流程图
              builder.animation.addListener(() {

              });

那么我给ComplexPage传入一个 key，通过这个获取context，进而取到它的offset,然后在回调函数中执行以下操作

final RenderBox box = context.findRenderObject();
final Offset offset = box.localToGlobal(Offset.zero);

这个offset就是包裹webview的那个父widget，它是在widget树上，受动画控制的，换言之随着动画的进行，这个offset也会变化。

之后我们只需要调用

webviewReference.resize(_rect.shift(offset));

在这个过程中，因为builder和resize分别在不同的widget（页面），只能通过各种接口传输/调用，这样就发生了严重的耦合，在考虑需要兼容滑动/缩放动画，并pr到插件仓库后，便直接放弃了这个方法。

终版解决方案-兼容滑动/缩放

重新思考，发现对于builder的依赖，只是对animation的监听，并触发重绘（resize），对于进度值，完全可以通过其他方法解决。所以便有了下面的方案。

首先我在插件的通信类FlutterWebviewPlugin,定义了支持的过渡到动画类型

/// the transition animation type of page on/off screen
enum TransitionType{
  Non,
  Slide,
  Scale
}

之后在插件WebviewScaffold的构造函数中增加了对应的参数

final TransitionType transitionType;

在state的initState（）中调用我创建的方法：

perceptionPageTransition();

  /// coordinate the webview rect whit page's transition
 void perceptionPageTransition(){
   if(widget.transitionType != TransitionType.Non){
     WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
       //avoid to concurrent modification exception
       WidgetsBinding.instance.addPersistentFrameCallback((timeStamp) {
         if(context != null){
           driveWebView();
         }
       });
     });
   }
 }

通过上面这个方法，我就可以模拟出builder.animation的监听了。再看driveWebView()方法

  void driveWebView(){
   final RenderBox box = context.findRenderObject();
   final Offset offset = box.localToGlobal(Offset.zero);
   //获得可绘制的大小
   final Size size = box.size;
   //获得可绘制的区域
   final Rect rect = box.paintBounds;
   
   //当变动位置等于绘制区域的位置时，说明动画已经执行完毕，直接退出，避免过度绘制
   if(offset.dx == rect.left)return;
   //这个值用于缩放动画
    //根据当前位置的dx值/除以size的宽度，就可以计算出动画进度value
   final double value = offset.dx/size.width;
    //根据传入的动画类型，对rect进行位移或者缩放
   switch(widget.transitionType){
     case TransitionType.Slide:
       webviewReference.resize(_rect.shift(offset));
       break;
     case TransitionType.Scale:
       final double www = box.size.width*(value*2);
       final double hhh = box.size.height*(value*2);
       webviewReference.resize(Rect.fromLTWH(offset.dx,offset.dy,size.width-www , size.height-hhh));
       break;
     case TransitionType.Non:
       // TODO: Handle this case.
       break;
   }
 }

这样我们就完成了初版的功能，同时使插件和项目进行了解耦。

分析时记录的一些流程图

.push()

修复flutter_webview_plugin在页面滑出时web图层残留的问题-鸿蒙开发者社区