Flutter 减小图像大小会导致在颤振中丢失部分图像
我在代码中使用了Flutter 减小图像大小会导致在颤振中丢失部分图像,flutter,dart,Flutter,Dart,我在代码中使用了CachedNetworkImage小部件。无论何时我调用它,图像的大小都太大。 当我试图将它的高度限制在某个les数字时,它的内容或部分内容丢失了。我无法解决这个问题。这是图像的截图,没有任何限制- 我只希望屏幕的一半应该被覆盖,同时保持宽度。当我将它的高度降低到450时,它的一部分消失了,我的意思是它丢失了(查看照片,你会明白)。这是高度为450的照片- (我希望在保持宽度的同时,只覆盖屏幕的一半。) (请参见两张图片中主图像的左上角,您将了解我的问题) 下面是小部件的代
CachedNetworkImage
小部件。无论何时我调用它,图像的大小都太大。
当我试图将它的高度限制在某个les数字时,它的内容或部分内容丢失了。我无法解决这个问题。这是图像的截图,没有任何限制-
我只希望屏幕的一半应该被覆盖,同时保持宽度。当我将它的高度降低到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,),
);
}
Boxfit.cover将确保图像填充您希望图像进入的“区域”,而不会失真。因为图像本身的纵横比与您定义的区域不同,所以会对部分图像进行裁剪。鉴于图像纵横比与“容器”纵横比不匹配,如果希望“容器”完全填充,则实际上只有两个选项,必须以某种方式对图像进行裁剪或拉伸(扭曲)。有关BoxFit的完整视图,请参见: 唯一的另一种选择是确保目标容器与要放入其中的图像具有相同的纵横比 更新
宽高比就是容器的宽度和高度,比如旧的和新的4x3和16x9电视屏幕。您可以定义一个容器,该容器的大小(至少是纵横比)与图像的大小相匹配。然后,您可以将其包装在FittedBox中,使其适合所有尺寸的设备上它要占据的屏幕部分。在掌握这些布局小部件的诀窍之前,需要大量的尝试和错误。继续尝试不同的选项。尝试移除
BoxFit.cover
@Hamza no man,它仍然会丢失它的内容尝试将CachedNetworkImage
包装在容器中,然后调整大小,看看它是否有效这回答了您的问题吗?我可以更改容器的纵横比吗??