flutter 图片相关

官方链接: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 图片开发核心技能

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

相关推荐
消失的旧时光-194311 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
星释12 小时前
鸿蒙Flutter三方库适配指南-02.Flutter相关知识基础
flutter·华为·harmonyos
傅里叶20 小时前
Flutter项目使用 buf.build
flutter
恋猫de小郭21 小时前
iOS 26 开始强制 UIScene ,你的 Flutter 插件准备好迁移支持了吗?
android·前端·flutter
yuanlaile1 天前
Flutter开发HarmonyOS鸿蒙App商业项目实战已出炉
flutter·华为·harmonyos
CodeCaptain1 天前
可直接落地的「Flutter 桥接鸿蒙 WebSocket」端到端实施方案
websocket·flutter·harmonyos
stringwu1 天前
Flutter 中的 MVVM 架构实现指南
前端·flutter
消失的旧时光-19431 天前
Flutter 异步体系终章:FutureBuilder 与 StreamBuilder 架构优化指南
flutter·架构
消失的旧时光-19432 天前
Flutter 异步 + 状态管理融合实践:Riverpod 与 Bloc 双方案解析
flutter