手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Flutter

华为平板M5的webview的一个BUG

用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年前的机器,但这也太。

flutter_launcher_icons的小坑

 先说一下,flutter_launcher_icons真是一个好插件,至少你不需要再额外为自己的APP准备图片,也不用单独下载什么app来生成图片,直接运行flutter pub run flutter_launcher_icons:main 即可

 
准备一张合适的PNG,该有的alpha通道,透明等都必须得有,否则生成出来的图片会有问题。
踩坑的问题是在android下,如果你配置文件中flutter_icon > android 的文件名,不是ic_launcher,OK,没问题,照样可以生成,打包后,图标也变成了你想要的icon,但,这时候会有另一个问题。
你会发现你的状态栏上,居然是默认的flutter的图片。为了解决这个问题,还是将 flutter_icon > android对应的值改为ic_launcher,然后 到 android > app > src > main > res目录下,把目录中非ic_launcher对应的图片删除。
然后flutter clean && flutter pub get && flutter run ,这时候你会发现,图标恢复正常了。
但是,在debug模式下(也就是开发模式,随便你怎么设置,在任务栏上的ICON,都是flutter自带的。估计我还是有 什么姿势不对?)
 
---
1、经过测试,不需要为android单独设置名字,直接android: true,就行了。
2、状态栏图标没有变的原因,还有一个可能确实是cache的问题,经过我重启,成正常ICON了
 
---
所以,上面的坑可能只是设置的问题,如果你也遇到了,可以尝试卸载APP,清理垃圾(会提示你删除应用缓存)、重启系统。也许问题就这样解决了。

flutter在页面中使用getcontroller处理map时的异常

 在使用GetView的时候(其实StatelessWidget也一样)。只要使用了getX的Map<String,dynamic>,不管是get还是set,都会报setState的错误,(setState() or markNeedsBuild() called during build)。说白了和上次的问题一样:flutter中页面渲染完成的回调,但这次没有办法使用。上次是设置变量,这次是直接读变量。

当然,即使报错了,但页面还是可以正常渲染,上次是直接就红屏了。因为在项目中,没有细看原理,想了下还是应该没有设置初始值导致的。所以特别设置了一下初始值。问题解决。

做个笔记。

flutter中页面渲染完成的回调

 这玩意就有点象vue中的mounted/或者其他的afterLoad等操作。怎么突然想要用到这个呢,是因为我用了getX,之前用riverpod,也没注意过这个问题。用了GetX之后,这个东西就被派上用场了。

原因是我有一个设置背景图的功能。本来想着一切换页面,背景图就加载出来,但事实上我把这个功能提前后,进入页面就直接报错,说是obx在页面没有渲染完成的时候不能调用。

This Obx widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.

于是,使用:

WidgetsBinding.instance.addPostFrameCallback((time) { 

     final back = Get.find<BackgroundController>(); 

     back.set(Assets.backgroundImage); 

});

问题解决

flutter 的dialog如何自定义宽度

比如我们常用的alertDialog,只要显示一个message,不显示title的话,有点象toast。这时候如何自定义宽度 呢?

 

如果你直接在content中包含一个sizedbox,定义宽度为200,或者更小,你会发现其实是没有用的 ,通过翻看源码可以了解到。其他他是在组件上方定义了一个ConstrainedBox,然后设置了minWidth = 280.所以你设置低于280的,怎么都没用。
 
要解决这个问题也不难,在Dialog上面包两个组件UnConstraintedBox,和container。先用uncontraintedbox解除限制,再使用container来定义宽高。问题就这么解决了
Records:14123