如何在 Flutter Web 上正确显示图像（存储在 Firebase 上）？

Question

我正在制作我的第一个 Flutter 网页，它将主要是一个照片组合，页面上有一些额外的功能。现在我已将图像存储在 Firebase（存储）上并显示了第一张图片。现在我有几个问题。首先，照片的像素大小不尽相同。这意味着，每张照片在网页上都有不同的尺寸。其次，我有一些照片，它们是像素化的，分辨率非常差。是否有可能更好地控制图片的大小以及是否像素化？

Answer 1

我猜你已经解决了你的问题，但是由于没有发布答案，我将在这里添加我的看法。

是否有可能对文件的大小进行更多控制 图片是否像素化？

更好地控制图像的大小可能是两者中更容易回答的问题，并且可以通过多种方式完成，我真的不能说。对于我的示例，我将使用一个容器。

• 在我的脑海中，您还可以使用 SizedBox()、ConstrainedBox()，如果您有指定高度的行，甚至可以限制图像的大小等。

使用容器，使用设定的宽度和高度。这会将图像限制为容器的大小。但是，根据图像的纵横比，您可能在容器的顶部和底部或侧面有空间。

Container(
  width: 150,
  height: 150,
  Image.asset("assetPath")
)

使用一个Container，还要设置图像大小。这将强制图像恰好为 100x100 像素。

Container(
  width: 150,
  height: 150,
  Image.asset("assetPath",
    width: 100,
    height: 100,
  )
)

如果您想将 100x100 图像居中，您可以使用容器的对齐属性，如下所示。

Container(
  width: 150,
  height: 150,
  alignment: alignment: Alignment.center,
  Image.asset("assetPath",
    width: 100,
    height: 100,
  )
)

图像资产也有一个 fit 属性，可用于确定您的图像应如何适合容器内。请注意，我已删除 Image 资源的宽度和高度参数。它们在这里不是必需的，我在使用 fit 时不会使用它们。

BoxFit.cover 使图像尽可能小，同时仍然覆盖整个目标框。还有其他适配选项，例如适配宽度、适配高度等。

Container(
  width: 150,
  height: 150,
  alignment: alignment: Alignment.center,
  Image.asset("assetPath",
    fit: BoxFit.cover,
  )
)

最后一项是关于质量的，但老实说，我从来没有真正弄清楚如何让图像达到最佳质量。我认为最好的选择是让图像在屏幕上尽可能接近你想要的大小，这样flutter就不需要做很多调整。例如，我有一张 2048x296 的图片，当在 300x80 的情况下使用它时，结果很糟糕。不过，如果我使用不同的应用程序使图像更小，接近 300x80，它看起来会好很多。

无论如何，有一个过滤器参数。但是，大多数情况下，不设置过滤器与将其设置为高一样好。希望他们能在不久的将来为此提供一些东西。

Image.asset("assetPath",
  filterQuality: FilterQuality.high,
)

作为提示，我通常将图像和文本包装在 FittedBox() 中。由于这是一个网络应用程序，并且您将调整屏幕大小，因此 FittedBox 将允许动态调整大小。对于文本，它甚至会自动调整字体大小。 Flutter 团队把这个打出了公园。

FittedBox(
  fit: BoxFit.scaleDown,
  Container(
    width: 150,
    height: 150,
    alignment: alignment: Alignment.center,
    Image.asset("assetPath",
      fit: BoxFit.cover,
    )
  )
)

scaleDown 选项仅允许内容按比例缩小（显然）。这对文本特别好。使用带有文本的 FittedBox，不使用 scaleDown，将放大到容器的大小。

至于质量，我没有找到很多选择，但我想我没有看过很多。重申一下，我发现的最佳选择是在添加图像之前将图像调整为您喜欢的大小，并尽可能使用 SVG 文件。 SVG 文件是使用矢量和数学在屏幕上绘制的，因此它们永远不会被像素化。