5

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

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

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

4

2 回答 2

5

声明分辨率感知图像资产来源 - 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 的分辨率。例如，考虑名为 my_icon.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。

如果未在 Image 小部件上指定渲染图像的宽度和高度，则使用标称分辨率来缩放资源，使其占用与主资源相同的屏幕空间，只是分辨率更高。也就是说，如果 .../my_icon.png 是 72px x 72px，那么 .../3.0x/my_icon.png 应该是 216px x 216px；但如果未指定宽度和高度，它们都将呈现为 72 像素 x 72 像素（以逻辑像素为单位）。

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

于 2019-02-11T13:04:09.863 回答
2

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

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");
}

有关更多详细信息，请参阅在 Flutter 中添加资产和图像。

于 2021-01-07T03:31:13.570 回答