如何在Flutter Web上正确显示图像(存储在Firebase上)



我正在制作我的第一个Flutter网页,它将主要是一个照片组合,页面上有一些额外的功能。现在我已经将图像存储在Firebase(存储(上,并显示了第一张图片。现在我有几个问题。首先,照片的像素大小并不完全相同。这意味着,每一张照片在网页上都有不同的尺寸。其次,我有一些照片,像素化了,分辨率很差。是否有可能对图片的大小进行更多的控制,以及是否像素化?

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

是否有可能对图片以及是否像素化?

对图像的大小有更多的控制可能是两者中更容易回答的,而且可以用很多方法来实现,我真的说不出来。例如,我将使用Container。

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

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

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

使用容器,但也可以设置图像大小。这将强制图像精确到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属性,可用于确定如何将图像放入容器中。请注意,我已经删除了图像资源的宽度和高度参数。这里不需要它们,我在使用合身的衣服时也不会使用它们。

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

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

最后一项提到的是质量,不过,老实说,我从来没能真正弄清楚如何让图像达到最佳质量。我认为最好的选择是在屏幕上显示一个与你想要的大小接近的图像,这样flutter就不必进行太多调整。例如,我有一张2048x296的照片,当它在300x80的频率下使用时,结果很糟糕。不过,如果我使用不同的应用程序使图像更小,更接近300x80,它看起来会更好。

无论如何,都有一个Filter参数。然而,大多数时候,不设置过滤器和将其设置为高一样好。希望他们能在不久的将来为此提供一些东西。

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文件是使用矢量和数学在屏幕上绘制的,因此它们永远不会被像素化。

相关内容

  • 没有找到相关文章

最新更新