用flutter的webview来展示一个数据页面,因为这个页面如果用原生开发,得费不少时间,而且中间还要显示图表,也可能随时要调整,所以最后改用了webview。
项目是检测内容的结果,因为要检测七大类,每个类都有一个图表和相应的数据呈现,但因为设计稿已经预先有了外框结构,因此内嵌的这个webview的宽度大约在800左右 ,触发了tailwind的sm的效果。所以原来一个检测结果 两列显示的,变成了一列,也因此400左右的高度的,变成了800左右,而有7个项目,则成了5600的高度。
利用webview的jschannel,在resize获取到高度后通过postmessage发送回flutter,flutter获取高度后再setState一下。看起来没差,在小米上很轻松的就显示了。但华为的机器就是不行。中间一块黑屏。
查看LOG,发现一堆bindTextureImage的错误,抛的异常也是Exception updateTextImage,可是我页面上并没有TextImage,所以就开始怀疑Webview了。之前为什么没有怀疑呢,就是因为其他页面上的webview是正常的。
1、将元素中用到Image的先屏蔽一下,仍然报错
2、将webview禁用,无错
3、打印postmessage的值,发现是49xx左右 ,于是强制设定webview的高度为1024,正常
4、不停调整webview的高度,直到3200左右直接黑屏
5、本来在考虑是否用Scrollbar,但事实上因为这个页面的设计稿正好将检测报告放在正中,四周都有内容,不方便全屏到底
最后,将检测报告改用tabbar的HTML来展示 。这样单个Tabbar的高度就算扩展到1000左右也不影响显示,经过测试一切正常。
华为这台机器真LOW啊,然后查了一下,海思960s,还是960的降频版,内存4G,鸿蒙2.0,用了大概3小时,无故大崩了3次,其中2次重启一次是refresh。虽然这是2~3年前的机器,但这也太。