美文网首页Flutter学习
Flutter 中不同分辨率的图片如何加载

Flutter 中不同分辨率的图片如何加载

作者: 三也视界 | 来源:发表于2021-03-25 16:33 被阅读0次

1.说明:

我们都知道在使用 Android 原生开发 app 的时候不同分辨率的图片放置到下面对应的文件夹中:

image.png

但是使用 Flutter 开发 app 时却有不同,他们也有一个对应的关系,按照他们的对应关系建立文件夹就可以了,如下:

image.png

2.使用:

首先在 Flutter 项目根目录中创建一个 images 文件夹用来存放图片资源;

image.png

然后在项目目录下找到 pubspec.yaml 文件打开,声明图片资源;

如何加载不同分辨率的图呢,例如 android 中的 hdpi,xhdpi,xxhdpi 和 ios 中的 1x,2x,3x。只需要在 images 文件夹中在创建两个 2.0x,3.0x 文件夹用来存放 2x,3x 的图片资源:

如上图,1.0x 图片放到了 account 文件夹中,account 文件夹下又有 1.5x、2.0x、3.0x、4.0x 文件夹,分别存放对应分辨率的图片,这里要注意文件夹的对应关系。

使用图片时,只需要使用 account 文件夹下的图片就行了,系统会根据手机的分辨率,加载对应文件夹中的图片,如:

Image.asset("images/account/head.png")

相关文章

  • Flutter 中不同分辨率的图片如何加载

    1.说明: 我们都知道在使用 Android 原生开发 app 的时候不同分辨率的图片放置到下面对应的文件夹中: ...

  • 初探Flutter

    Flutter中的图片加载 Flutter中加载远程图片相对比较容易简单,如下: 想要在Flutter中加载本地图...

  • Flutter下不同分辨率图片的加载

    Android不同像素密度的图片和Flutter的像素比率的对应关系 对不同分辨率的图片Flutter的处理方式:...

  • Flutter如何加载base64的图片

    Flutter中可能需要加载如下的base64图片: 但是该如何加载这样的图片呢? 需要使用以下方式:

  • 2018-12-27

    flutter加载本地图片加载不出来 flutter Image 加载图片可以分为4中情况,分别为: Image....

  • flutter笔记(四)-----图片Image

    flutter笔记汇总 先看一下constructor 一、加载一张图片 flutter提供了4中图片的加载方式 ...

  • 使用SDWebImage加载多个图片内存崩溃的问题

    使用SDWebImage加载多个图片时,在加载的过程中,当图片分辨率比较大的时候,加载几张图片就崩溃了。需要对图片...

  • Flutter图片加载

    Flutter中,通过Image组件来加载并显示图片,可以从asset、文件、内存以及网络获取图片,都需要实现不同...

  • Flutter学习

    中文文档 官方简单布局 demo flutter - 加载本地图片、网络图片图片加载适配 flutter - Ex...

  • 开发插件如何加载flutter里面的图片(iOS篇)

    前言:开发flutter原生插件时可能需要加载图片;图片资源放在本地插件中感觉不是很好,可以放在flutter 层...

网友评论

    本文标题:Flutter 中不同分辨率的图片如何加载

    本文链接:https://www.haomeiwen.com/subject/djhrhltx.html