
修复flutter_webview_plugin在页面滑出时web图层残留的问题
前言
目前pub上关于webview有两个点赞最多的插件,
经过一番比较选择了后者:flutter_webview_plugin,这里将记录写出来,希望对你有所帮助
两者区别
webview_flutter :
flutter_webview_plugin :
看起来前者要比后者灵活方便,但是唯一也是最严重的扣分项就是性能问题 :
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的源码,它的ui结构和运行流程如下图
在创建的renderBox的paint方法调用后,就会回调onRectChanged 这个方法并携带显示区域rect,然后通过webviewReference.launch 启动原生端的view添加绘制,绘制区域基于所传的rect。
经过上面的分析,只要我们改动这个rect就可以改变webview的显示位置和大小。
首先我想到的是对页面做动画的PageRouteBuilder;
初版解决方案
经过对PageRouteBuilder这类的源码一层一层分析后
发现通过builder.animation可以对过渡动画进行监听
那么我给ComplexPage传入一个 key,通过这个获取context,进而取到它的offset,然后在回调函数中执行以下操作
这个offset就是包裹webview的那个父widget,它是在widget树上,受动画控制的,换言之随着动画的进行,这个offset也会变化。
之后我们只需要调用
在这个过程中,因为builder和resize分别在不同的widget(页面),只能通过各种接口传输/调用,这样就发生了严重的耦合,在考虑需要兼容 滑动/缩放动画,并pr到插件仓库后,便直接放弃了这个方法。
终版解决方案-兼容滑动/缩放
重新思考,发现对于builder的依赖,只是对animation的监听,并触发重绘(resize),对于进度值,完全可以通过其他方法解决。所以便有了下面的方案。
首先我在插件的通信类FlutterWebviewPlugin,定义了支持的过渡到动画类型
之后在插件WebviewScaffold的构造函数中增加了对应的参数
在state的initState()中调用我创建的方法:
通过上面这个方法,我就可以模拟出builder.animation的监听了。再看driveWebView()方法
这样我们就完成了初版的功能,同时使插件和项目进行了解耦。
分析时记录的一些流程图
.push()
pageRouteBuilder
结语
希望以上对你有所帮助,如果不足之处欢迎指出,喜欢的点个赞撒 ;)
作者:吉哈达
来源:掘金
