如何在 flutter assets 中 add/manage 多个图像 size/resolution

Question

请以simplest/shortest方式提供帮助

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

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

Answer 1

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

AssetImage understands how to map a logical requested asset onto one that most closely matches the current device pixel ratio. In order for this mapping to work, assets should be arranged according to a particular directory structure:
content_copy
  .../image.png
  .../Mx/image.png
  .../Nx/image.png
  ...etc.
…where M and N are numeric identifiers that correspond to the nominal resolution of the images contained within, in other words, they specify the device pixel ratio that the images are intended for.

The main asset is assumed to correspond to a resolution of 1.0. For example, consider the following asset layout for an image named my_icon.png:
content_copy
  .../my_icon.png
  .../2.0x/my_icon.png
  .../3.0x/my_icon.png
On devices with a device pixel ratio of 1.8, the asset .../2.0x/my_icon.png would be chosen. For a device pixel ratio of 2.7, the asset .../3.0x/my_icon.png would be chosen.

If the width and height of the rendered image are not specified on the Image widget, the nominal resolution is used to scale the asset so that it will occupy the same amount of screen space as the main asset would have, just with a higher resolution. That is, if .../my_icon.png is 72px by 72px, then .../3.0x/my_icon.png should be 216px by 216px; but they both will render into 72px by 72px (in logical pixels) if width and height are not specified.

Each entry in the asset section of the pubspec.yaml should correspond to a real file, with the exception of the main asset entry. If the main asset entry does not correspond to a real file, then the asset with the lowest resolution will be used as the fallback for devices with device pixel ratios below that resolution. The entry should still be included in the pubspec.yaml manifest, however.

Answer 2

虽然 iOS 将图像和资产视为不同的项目，但 Flutter 应用程序只有资产。放置在 iOS 上 Images.xcasset 文件夹中的资源放置在 Flutter 的资产文件夹中。与 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/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。

如何在 flutter assets 中 add/manage 多个图像 size/resolution

How to add/manage multiple image size/resolution in flutter assets

assets

image-size

flutter

image-resolution

flutter-layout