扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Flutter的图片缓存机制有问题(可能是我使用的版本1.12.13有问题)
创新互联是一家集网站建设,北戴河企业网站建设,北戴河品牌网站建设,网站定制,北戴河网站建设报价,网络营销,网络优化,北戴河网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
网络图片会默认缓存到本地,但是不管图片是不是完整的或者损坏的,导致页面在下次进入的时候会优先从缓存里读取图片。有些图片是没有加载完成的,或者损坏的,导致图片无法显示。UI效果就是显示成白色的。
一种解决方式:加载前或者退出后清理图片缓存
ImageCache imageCache = PaintingBinding.instance.imageCache;
imageCache.clear();
缺点就是每次图片都想要从网络上获取,增加服务器负担
下面这种情况下,为 InkWell 设置的 splashColor 不会生效:
需要用 Material 去除背景色,然后将颜色设置在 InkWell 外部:
在 Dialog builder 中使用 WillPopScope 禁用返回键返回:
注意:使用此方法同时也会禁用 iOS 上的手势滑动返回功能,推荐判断平台后再使用。
修改对话框中的复选框状态,最简便的方法是通过 Element 中的 markNeedsBuild 方法:
当然,更推荐的做法是通过 StatefulBuilder ,然后就可以在 Dialog 中调用 setState 方法了,不过在调用 setState 时需要判断 Dialog 是否已经关闭,否则会造成 setState() called after dispose() 的错误,可以通过添加一个标志位来解决,如下:
在 Web 中加载网络图片有时会失败,遇到这样的报错: Exception caught by image resource service... ,造成该错误的原因通常是,图片跨域了(见 跨域资源共享 )。最简单的解决办法是, 使用 HTML 渲染加载 ,而不是默认的 CanvasKit。
Flutter 中所有的 list 默认都是没有 ScrollBar 的,必须使用 ScrollBar 组件。ScrollBar 组件通过监听 ScrollView 的 ScrollNotification 来刷新位置,所以 List 的长度必须是固定的。
当使用 WebView 等高度不定的组件时会出现内容被截断的情况,通常可以使用 NestedScrollView 来解决该问题,需要在 WebView 外部嵌套 SingleChildScrollView。
虽然使用了缓存,而且也是用 builder 加载图片的,但是发现一个现象:滑动屏幕后图片短暂消失并重新加载了。图片高度很高时这种现象更加明显,其原因是超出屏幕范围一定距离的组件被重新渲染了。解决方法是在 ListView 上设置 cacheExtent 参数:
该参数的作用是改变超出屏幕高度后继续渲染的范围(以像素为单位),比如设置成 9999 后意味着超出屏幕 10000 像素以内的内容都会被保留下来。
借助 IntrinsicHeight 组件:
另外,IntrinsicHeight 还可以用于 Dialog 或者 BottomSheet 中,使得其中的元素 显示内在元素的高度 ,从而避免元素因为约束的存在而不显示或者高度太高(比如在使用了 Column 或者 Row 的时候)。
在通过 Uri 的 queryParameters 获取 query 参数时,发现有些链接会抛出下面异常:
造成该异常的原因是 Uri 默认使用 utf-8 解码超链接字符串,如果链接中包含非 utf-8 字符,就会造成上面的错误,相关 issue 见: issue #31621 。目前该 issue 处于 open 的状态,暂时的解决办法是,在所有使用到 queryParameter 的地方用 try..catch 捕捉可能抛出的异常。
Flutter 开发非常依赖各种官方或第三方的插件,而在使用这些插件时多少都会遇到一些问题,大部分问题都可以通过搜索和查找 issue 来解决。这里记录下一些我在使用部分插件时遇到的问题及其解决方法。
目前该库没有图片加载完成的回调(见 issue #545 ),不过我们可以通过在 imageBuilder 中来添加回调:
这是一个应用内更新插件,安卓 10 以上安装时需要在 manifest 中添加以下内容:
目前功能最强大的 WebView 插件,基本能满足绝大部分移动端网页加载的需求,而且可定制化程度高。
一般通过 CookieManager 修改 Cookie,拦截请求并修改请求对象的 Header 不会生效。
InAppWebViewOptions 的 userAgent 只在 iOS 上生效,而 applicationNameForUserAgent 只在 Android 上生效,所以最好的做法是分平台设置 InAppWebViewOptions ,而且需要注意,由于设置 userAgent 后会覆盖默认的 UserAgent,所以如果需要在默认的 UserAgent 上添加其它参数,iOS 上需要通过 InAppWebViewController.getDefaultUserAgent() 获取默认 UserAgent 参数,而 Android 不需要添加。
如果图片源或者请求是 http 的,为了在 Android 上正常加载请求,必须在 AndroidInAppWebViewOptions 中将 mixedContentMode 设置为 AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW 。
当我们想要设置全屏图片的时候,由于默认的 Constraint 会将图片居中显示,所以图片四周会留有空隙。为了去除这个限制,我们需要 Xcode 中打开 LaunchScreen.storyboard,然后在 View Controller 的 View 和 LaunchImage 上的 Safe Area 去掉。
具体设置方法:右侧 Inspector 面板 Show the Size inspector 解选 Layout Margins 中的 Safe Area Relative Margins,拖动图片占满全屏,然后根据 View Controller Scene 的 Warning,更新 Constraint 就可以了。
在集成某些三方库之后,在使用命令行运行 iOS 模拟器的时候可能会遇到下面这个报错:
这是因为 iOS 模拟器未来将会兼容 arm64 架构,但是目前还不支持,所以我们需要修改 Build Setting 使得能够在 x86_64 的模拟器上运行,操作步骤见 这里 。
ITMS-90338: Non-public API usage - The app references non-public symbols in Frameworks/Flutter.framework/Flutter: _ptrace.
原因: 使用了 Flutter 的debug 版产物 打成 iPa 包
就是Frameworks/Flutter.framework 是debug 版的产物
Debug 版的 Flutter 产物 ,SDK 内部使用了 苹果内部私有的API , 会被苹果审核监测到,存在安全性隐患. 导致拒绝上传到苹果后台.
产生的原因: 因为开发过程中,直接使用了debug 模式进行开发, 在打包的时候,直接打开 iOS 文件夹下面的工程,在Xcode 里设置 release 模式时,此时,Flutter 的产物还是 debug 模式下的产物. 没有删除替换成 release 产物
1.先 将工程 清理一遍,清理之前debug模式下 的Flutter 产物
2.然后 打开Xcode 工程,配置好相关 版本号,证书,release 模式
3. 使用命令行 打包 release ,这样Flutter.framework就会生成 release 产物
4.最后 在Xcode 工程内,按照正常 打包上传 包过程就可以了
1.进入 Flutter 工程 命令行操作
flutter clean
2 .清理之前debug 模式下的 残留产物 (或者手动进入文件夹删除)
rm -rf ios/Flutter/Flutter.framework
3. 获取 Flutter 的第三方依赖库
flutter pub get
4.编译 release 打包 产物
flutter build ios --release
(此时这里可以打包出 app 了, 为了安全起见,最好再次进入Xcode 清理一遍,直接打包上传,)
上面这一步,主要目的是生成 Flutter.framework 的release 版本产物
5.进入Xcode 工程,clean 一遍,检查相关证书配置,版本号等
6.直接 Xcode Archive 打包IPA 上传 苹果后台
最后上传成功:
思路: 通过检查Flutter.framework 它的CPU 架构支持
如果: 该产物 支持模拟器 x86_arm64 这样的架构的话,说明该产物就是 Debug 版的 产物
因为release 版的 产物是 不支持 模拟器CPU架构的.
输入终端命令: lipo -info 产物的物理路径
比如: lipo -info /Users/zzc/Documents/rce_flutter/ios/Flutter/Flutter.framework/Flutter
按照给定尺寸进行图片的解码,而不是解码整个图片的尺寸,用来减少内存的占用。
官方文档:
官方说明:
Instructs Flutter to decode the image at the specified dimensions instead of at its native size.
This allows finer control of the size of the image in ImageCache and is generally used to reduce the memory footprint of ImageCache .
The decoded image may still be displayed at sizes other than the cached size provided here.
使用:
三方库: cached_network_image 限2.5.0之后版本才可用
设定最大的缓存宽度和高度 this.maxWidthDiskCache 、 this.maxHeightDiskCache
使用:
从相册选取图片,展示时使用指定尺寸宽高进行处理。
使用三方库:
使用自定义 provider 来指定所需图片的宽高:
AssetEntityImageProvider 传入宽高和图片原图 AssetEntity 数据。
provider 中 key.entity.thumbDataWithSize 方法:
进入 entity 中 thumbDataWithSize 方法:
进入 _getThumbDataWithId 方法中,
进入getThumb:
调用iOS原生的获取图片方法,
进入 getThumbWithId 方法,
原生实现获取置顶宽高缩略图方法实现:
使用 iOS 原生类 PHImageManager 的
来获取缩略图。
flutter运行之后报了这个错,不能够运行。
在结果上面会提示appt2等错误,其实错误的原因是Androidx支持有问题。
官方解决办法: (合理打开)
app/build.gradle 下面
在gradle.properties下添加:
重新清理运行,ok。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流