ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【Flutter 问题系列第 55 篇】Flutter 在不同设备下如何加载不同分辨率的图片

2022-01-07 16:02:57  阅读:241  来源: 互联网

标签:assets 55 分辨率 文件夹 images Flutter 加载


这是【Flutter 问题系列第 55 篇】,如果觉得有用的话,欢迎关注专栏。

安卓手机的分辨率各式各样,如果不考虑增加包体的情况下,应为不同分辨率的手机提供相应的 UI 套图,在 Flutter 中你可以这样做。

如何实现

在 Flutter 项目中新增 assets/images/ 文件夹,当然,不一定非得是这个名称。

然后在 images 文件夹下再新建 2.0x3.0x 文件夹,分别用来存储 2 倍图和 3 倍图,1 倍图的直接放到 images 文件夹下即可,如下图所示
在这里插入图片描述
然后在 pubspec.yaml 配置文件中添加如下代码

  assets:
    - assets/images/

最后在终端执行 flutter pub get 命令即可,Flutter 会根据当前屏幕的分辨率自动加载相应的图片。

扩展:mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi

我们知道,在 Android 项目中,以 mipmap 开头的文件夹是用来放应用图标的,而在每一个 mipmap 文件夹的最后面,会有一个 dpi小尾巴,如下图所示
在这里插入图片描述
不同的 dpi 代表什么意思呢?这里我整理出了一个表格,供大家参考。

分辨率

分辨率名屏幕分辨率dp、px 关系
ldpi240x3201dp = 0.75px
mdpi320x4801dp = 1px
hdpi480x8001dp = 1.5px
xhdpi720x12801dp = 2px
xxhdpi1080x19201dp = 3px
xxxhdpi2160x38401dp = 4px

你的问题得到解决了吗?欢迎在评论区留言。

赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。


结束语

Google 的 Flutter 越来越火,截止 2022年1月7日 GitHub 标星已达 134K,Flutter 毅然是一种趋势,所以作为前端开发者,没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了,不妨先点个关注,后续我会将 Flutter 中的常用组件(含有源码分析、组件的用法及注意事项)以及可能遇到的问题写到 CSDN 博客中,希望自己学习的同时,也可以帮助更多的人。

标签:assets,55,分辨率,文件夹,images,Flutter,加载
来源: https://blog.csdn.net/qq_42351033/article/details/122365339

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有