减小图像尺寸会导致图像抖动而丢失一部分

Question

我在代码中使用了CachedNetworkImage小部件。每当我调用它时，图像的尺寸太大。 当我试图将它的高度限制在一定程度时，它的内容或一部分丢失了。我无法解决这个问题。这是没有任何限制的图片屏幕截图-

我希望在保持宽度的同时只覆盖一半的屏幕。当我将其高度降低到450时，它的一部分消失了，我的意思是丢失了（检查照片，你会明白的）。这是高度为450的图片-

（我希望只覆盖一半的屏幕，同时保持宽度。）

（请参见两张图片中主图像的左上角，您将了解我的问题）。

这是小部件的代码-

Widget cachedNetworkImage(mediaUrl, context) {
  return CachedNetworkImage(
    height: 380.0,
    width: MediaQuery.of(context).size.width,
    imageUrl: mediaUrl,
    fit: BoxFit.cover,
    placeholder: (context, url) => Padding(
      child: CircularProgressIndicator(),
      padding: EdgeInsets.all(20.0),
    ),
    errorWidget: (context, url, error) => Icon(Icons.error_outline, color: Colors.red,),
  );
}

Answer 1

Boxfit.cover将确保图像填充您想要图像进入的“区域”，而不会变形。由于图像本身的纵横比与您定义的区域不同，因此会裁切部分图像。鉴于图像的纵横比与“容器”的纵横比不匹配，如果您要完全填充“容器”，则实际上只有两种选择，必须以某种方式裁剪或拉伸（扭曲）图像。有关BoxFit的完整视图，请参见以下内容：https://api.flutter.dev/flutter/painting/BoxFit-class.html 唯一的其他选择是确保目标容器的长宽比与要放入其中的图像相同。

更新 长宽比就是容器的宽度与容器的高度之比，例如新旧4x3和16x9电视屏幕。您可以定义一个容器，该容器的大小或至少长宽比与图像的大小匹配。然后，您可以将其包装在FittedBox中，以使其适合所有设备尺寸的屏幕部分。这些布局小部件在投入使用之前，需要进行大量的反复试验。只是继续尝试其他选项。