修复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图层残留的问题-开源基础软件社区

 

pageRouteBuilder

修复flutter_webview_plugin在页面滑出时web图层残留的问题-开源基础软件社区

结语

希望以上对你有所帮助,如果不足之处欢迎指出,喜欢的点个赞撒 ;)

 

作者:吉哈达
来源:掘金

分类
标签
已于2020-9-4 16:20:32修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐