flutter - 如何根据屏幕密度(DPI 大小)选择资源？

Question

我正在尝试根据我的 flutter 应用程序中的显示密度加载图标。如何根据屏幕密度(hdpi、xhdpi、xxhdpi ..)动态加载。

Answer 1

经过数小时的搜索，根据 official documenation , flutter 取决于 devicePixelRatio 即:

Device Pixel Ratio (DPR) is the relationship between physical 
hardware-based pixels and Device-Independent Pixels which are an abstraction.

对于安卓:

Denisty   Pixel Ratio
mdpi        1.0x
hdpi        1.5x
xhdpi       2.0x
xxhdpi      3.0x
xxxhdpi     4.0x

对于 iOS:

对于 flutter :

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

其中 M 和 N 是数字标识符，对应于其中包含的图像的标称分辨率。换句话说，它们指定了图像适用的设备像素比。

假定主要 Assets 对应于 1.0 的分辨率。例如，考虑以下图像 Assets 布局

所以这取决于你有多少分辨率来创建你的 Assets 文件夹的不同子目录，所以我的建议是创建以下子目录文件夹以涵盖所有 DPR:

.../image.png  ---> default for android mdpi(1.0x) and ios @1x
.../1.5x/image.png  ---> default for android hdpi(1.5x)
.../2.0x/image.png  ---> default for android xhdpi(2.0x) and ios @2x
.../3.0x/image.png  ---> default for android xxhdpi(3.0x) and ios @3x
.../4.0x/image.png  ---> default for android xxxhdpi(4.0x)

在 Flutter 项目中:

在 pubspec.yaml 中只需添加默认图像路径:

  assets:
    - assets/images/image.png

如果有人需要使用 SVG，只需检查这个 package :

SvgPicture.asset(assetName)