当前位置: 首页 > news >正文

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 转换为图像

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

http://www.lryc.cn/news/103252.html

相关文章:

  • 将上位机程序从PC的window系统迁移至Intel NUC的无桌面版ubuntu系统问题记录
  • CHI中的error处理
  • 如何使用 PHP 进行数据库缓存处理?
  • 新版巨量广告投放技巧分析
  • Vue3 导出excel
  • vue 使用vue-json-viewer 展示 JSON 格式的数据
  • 14.python设计模式【模板方法模式】
  • 谷粒商城第六天-实现功能的前序工作(网关的配置 跨域配置)
  • 为什么说国内数字孪生平台gis架构采用Cesium是不错的选择?
  • 前端面试的性能优化部分(1)每篇10题
  • GitLab备份升级
  • Matlab实现遗传算法仿真(附上40个仿真源码)
  • git使用(由浅到深)
  • NAT协议(网络地址转换协议)详解
  • pytorch(续周报(1))
  • el-table 树形结构数据 设置某一层,新增按钮不展示
  • 【Unity2D】粒子特效
  • 第九十六回 网络综合示例:获取天气信息
  • Shell中获取昨天和多天前日期
  • golang静态编译及编译失败排查步骤
  • 2023年7月第4周大模型荟萃
  • Meta分析的选题与文献计量分析CiteSpace应用丨R语言Meta分析【数据清洗、精美作图、回归分析、诊断分析、不确定性及贝叶斯应用】
  • vscode eslint配置
  • C++ 对象模型 C++ Object Model
  • leetcode做题笔记47
  • Linux Day04
  • 上海亚商投顾:沪指冲高回落 两市成交重回万亿
  • 2023最新版本~十分钟零基础搭建EMQX服务器
  • SpringBoot2.5.6整合Elasticsearch7.12.1
  • 准大一信息安全/网络空间安全专业学习规划