官方链接:https://api.flutter.dev/flutter/widgets/Image-class.html
图片基本使用
显示本地图片时,要在pubspec.yaml文件里面添加如:(注意空格)
assets:
- assets/images/logo.png
Fit属性:
BoxFit.cover最常用 显示可能拉伸,可能裁切,充满(图片要 不要求全图显示,充满整个容器,还不变形)。
BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。(一般背景图时用)
BoxFit.contain:全图显示,显示原比例,可能会有空隙。
BoxFit.scaleDown:效果和 contain 差不多,但是此属性不允许显示超过源图片大小,可小不可大(自己总结:一般显示本地小图标时使用)
BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸, 可能裁切。
BoxFit.fitHeight :高度充满(竖向充满),显示可能拉 伸,可能裁切。
官方链接:BoxFit enum - painting library - Dart API
Image和ImageProvider
获取Image
如果您需要Image
小部件,请使用以下之一:
Image.asset()
Image.network()
Image.file()
Image.memory()
获取 ImageProvider
如果您需要ImageProvider
,请使用以下之一:
AssetImage()
NetworkImage()
FileImage()
MemoryImage()
将 ImageProvider 转换为图像
Dart
Image(
image: myImageProvider,
)
将图像转换为 ImageProvider
Dart
myImageWidget.image
图片优化相关
Flutter中ListView加载图片数据的优化方案:当开始滚动时不加载图片,滚动结束后再加载图片,用到的关键技术:NotificationListener监听滚动状态
参考:Flutter中ListView加载图片数据的优化_flutter listview 图片_早起的年轻人的博客-CSDN博客
1.优化内存占用使用属性cacheWidth 或 cacheHeight:
cacheWidth 或 cacheHeight,则指示引擎应以指定大小解码图像。无论这些参数如何,图像都将根据约束进行渲染。cacheWidth 和 cacheHeight 主要是为了减少 ImageCache 的内存使用。
cacheWidth 和 cacheHeight 是为了优化内存用的,如果你能确定网络图片的尺寸都是合适的尺寸,就不用设置这两个参数。如果不能保证来源图片的尺寸,比如可能有大尺寸的图片,最好设置这两个参数。这两个参数只能优化内存占用,对下载和解码没有帮助。
2.如果要优化下载,需要把图片缓存在磁盘上,下次直接从磁盘读取,就像 web 缓存那样,缓存用三方插件:cached_network_image
listview优化方案:分帧上屏,简单来说就是占位和实际Widget的替换参考:ListView流畅度翻倍!!Flutter卡顿分析和通用优化方案 - 掘金
参考:
Flutter布局基础-基础部件(一)Assets, images, and icon_冒泡的嘟嘟的博客-CSDN博客