如何在颤振资产中添加/管理多个图像大小/分辨率

Question

请以最简单/最短的方式提供帮助

希望在 Android Studio 中像 hdpi/mdpi 一样管理多个图像

如何为 Flutter 添加图片资源？多分辨率呢？

Answer 1

声明分辨率感知图像资产 来源-https://flutter.dev/docs/development/ui/assets-and-images#resolution-aware

AssetImage 了解如何将一个逻辑请求的资产映射到一个 最接近当前设备的像素比。为了 这个映射要工作，资产应该按照一个 具体目录结构：

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

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

假定主要资产对应于 1.0 的分辨率。为了 例如，考虑一个名为的图像的以下资产布局 我的图标.png：

content_copy
  .../my_icon.png
  .../2.0x/my_icon.png
  .../3.0x/my_icon.png

在设备像素比为 1.8 的设备上，资产 .../2.0x/my_icon.png 将被选中。对于 2.7 的设备像素比， 将选择资产 .../3.0x/my_icon.png。

如果渲染图像的宽度和高度没有在 图像小部件，标称分辨率用于缩放资产，因此 它将占用与主要资产相同数量的屏幕空间 会的，只是分辨率更高。也就是说，如果 .../my_icon.png 是 72 像素 x 72 像素，那么 .../3.0x/my_icon.png 应该是 216 像素 x 216 像素； 但如果 没有指定宽度和高度。

pubspec.yaml 的资产部分中的每个条目都应对应 到真实文件，主要资产条目除外。如果 主资产条目与真实文件不对应，则资产 具有最低分辨率的将用作设备的后备 设备像素比低于该分辨率。该条目仍应 但是，应该包含在 pubspec.yaml 清单中。

Answer 2

虽然 iOS 将图像和资产视为不同的项目，但 Flutter 应用程序只有资产。在 iOS 上放置在 Images.xcasset 文件夹中的资源被放置在 Flutter 的 assets 文件夹中。与 iOS 一样，资产是任何类型的文件，而不仅仅是图像。例如，您可能有一个 JSON 文件位于 my-assets 文件夹中：

my-assets/data.json

在pubspec.yaml 文件中声明资产：

assets:
 - my-assets/data.json

然后使用AssetBundle从代码中访问它：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('my-assets/data.json');
}

对于图像，Flutter 遵循简单的基于密度的格式，例如 iOS。图像资产可能是1.0x, 2.0x, 3.0x，或任何其他乘数。所谓devicePixelRatio，表示的是单个逻辑像素中物理像素的比例。

资产位于任意文件夹中——Flutter 没有预定义的文件夹结构。您在 pubspec.yaml 文件中声明资产（带有位置），Flutter 会提取它们。

例如，要将名为 my_icon.png 的图像添加到您的 Flutter 项目中，您可能决定将其存储在任意名为 images 的文件夹中。将基础图像 (1.0x) 放在 images 文件夹中，将其他变体放在以适当的比率乘数命名的子文件夹中：

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

接下来，在pubspec.yaml 文件中声明这些图像：

assets:
 - images/my_icon.png

您现在可以使用AssetImage 访问您的图片：

return AssetImage("images/a_dot_burr.jpeg");

或直接在Image 小部件中：

@override
Widget build(BuildContext context) {
  return Image.asset("images/my_image.png");
}

更多详情请见Adding Assets and Images in Flutter。