详解flutter中本地资源图片的使用

简介: flutter中我们想加载本地图片,需要两步:

一. flutter中我们想加载本地图片,需要两步:


  1. 在项目中创建images文件夹,然后在images文件夹(这个名字可以随便命名,一般我们会命名为images)下创建2.0x(2倍图)和3.0x(3倍图)两个文件夹(ps:我们的本地资源图片一般只需要2.0x和3.0x就可以了,1.0x和4.0x通常不需要),并将图片放入对应的文件夹中(注意:图片的名字要一样。比如:2.0x/home.png  3.0x/home.png)



image.png


  1. 需要在pubspec.yaml这个配置文件中设置图片的路径,如下格式。注意这里路径不用加2.0x和3.0x


flutter:
  assets:
    - images/home.png


二. flutter项目中本地图片加载的原理


在加载图片时,系统自动会根据屏幕分辨率优先选择到符合自己分配率的文件夹(2.0x或者3.0x或者4.0x)下去取相对应的图片,如果当前文件夹下没有,则会到低一倍的文件夹下去,如果还没有,则继续向更低一倍去取。(比如:iOS 5.5英寸及以上屏幕会优先选择去3.0x下去取图片,如果3.0x不存在或者3.0x文件夹下没有,则去2.0x下取;如果2.0x不存在或者2.0x下没有,则去1.0x下取;1.0x下再没有,则在images文件下取)。



image.png


image.png


image.png


相关文章
|
8天前
|
JSON Dart API
Flutter 使用图片和资源
Flutter 使用图片和资源
Flutter 使用图片和资源
|
1月前
|
开发框架 前端开发 定位技术
Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证
本文深入探讨了Flutter框架中的插件市场及开源资源的利用方法。内容涵盖插件市场的扩展功能、时间节省与质量保证,常见插件市场的介绍,选择合适插件的策略,以及开源资源的利用价值与注意事项。通过案例分析和对社区影响的讨论,展示了这些资源如何促进开发效率和技术进步,并展望了未来的发展趋势。
40 11
|
2月前
|
开发框架 UED 计算机视觉
flutter:图片&stful 生命周期 (三)
本文档介绍了如何在Flutter中处理图片,包括加载网络图片、本地图片、创建圆形图片和带有圆角的图片,以及如何配置`pubspec.yaml`文件来添加资源文件。还展示了如何使用`AssetImage`对象来显示本地资源图片,并通过代码示例详细说明了这些操作的实现方法。最后,简要介绍了StatefulWidget的生命周期。
|
4月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
153 1
|
5月前
|
Shell Android开发 Python
Flutter如何正确使用图片资源
Flutter如何正确使用图片资源
89 0
|
5月前
Flutter-自定义图片3D画廊
Flutter-自定义图片3D画廊
94 0
|
7月前
flutter 引用图片资源遇到的问题
flutter 引用图片资源遇到的问题
93 1
|
7月前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
184 0
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
7月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
53 0
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
7月前
|
Dart
Flutter 学习之图片的选择、裁切、保存
Flutter 学习之图片的选择、裁切、保存 在Flutter中,我们可以通过调用系统的图片选择器来选择一张图片,也可以通过使用插件来实现图片的裁切和保存。
382 0