Flutter - 我应该如何确定图像的大小？

Question

如何确定图像的大小？ 例如，我将使用图标进行底部导航。 图标的大小应该是 20x20 吗？ 还是 25x25？ 我怎么知道这个？ 或者假设我要使用背景图片，它的尺寸应该是 400x800 还是 600x1200。 最佳优化 memory 管理和应用程序大小的标准大小应该是多少

默认不支持使用 SVG。 所以我正在寻找一种最佳优化 PNG 或 JPG 的方法。 我还将图像分为 1.5x、2.0x、3.0x、4.0x 和原始图像。 但我无法确定原始图像的确切大小。

例如，调试控制台给出如下错误：

════════ Exception caught by painting library ══════════════════════════════════
Image assets/images/2.0x/login_picture.png has a display size of 414×516 but a decode size of 828×707, which uses an additional 1936KB.

Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 414, a cacheHeight parameter of 516, or using a ResizeImage.
════════════════════════════════════════════════════════════════════════════════

Answer 1

那么，使用 1.0x、2.0x 和 3.0x 图像是一个很好的做法，您应该让您的设计师给您这些尺寸的图像 in.png 或 go 到 figma 或 photoshop 并导出 2.0x 和 3.0x 资产

对于调试错误，您应该像这里一样使用fit: BoxFit.fill

Scaffold(
  backgroundColor: AppColor.backgroundPrimaryColor,
  body: Container(
    margin: const EdgeInsets.only(top: 100),
    decoration: BoxDecoration(
      image: DecorationImage(
          fit: BoxFit.fill, //Important
          image: AssetImage(BackgroundImages.backgroundShapes)
      ),
    ),
  )
);