官方链接：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 转换为图像

Image(

image: myImageProvider,

)

将图像转换为 ImageProvider

myImageWidget.image

图片优化相关

参考：快速掌握 Flutter 图片开发核心技能

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博客

Flutter布局基础-基础部件（一）Assets, images, and icon_冒泡的嘟嘟的博客-CSDN博客

参考链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：