如何在SwiftUI中将图片宽度设为其容器宽度的100％？

Question

我有用户从他们的移动设备上载图像，这些图像可以是纵向或横向。我将这些图像平铺成类似于Instagram帖子。我遇到的最大问题是肖像图像无法以容器宽度的100％渲染。真的很奇怪。

以下是我拍摄的“人像”照片的示例，并使用以下代码将其可视化：

VStack{
    AnimatedImage(url: URL(string: self.mediaLink))
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: UIScreen.main.bounds.width - 40)
}
.padding(.horizontal, 20)
.frame(width: UIScreen.main.bounds.width - 40)

即使我指定了宽度，它仍然呈现不正确。它应该是UIScreen.main.bounds.width - 40，与其父VStack的宽度相同

使用GeometryReader时，我的代码如下：

GeometryReader{geo in
    VStack{
        AnimatedImage(url: URL(string: self.mediaLink))
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: geo.size.width)
    }
}
.frame(width: UIScreen.main.bounds.width)

哪一个更糟！

感谢您的帮助！对宽高比使用.fill会使图像太大，并且会阻塞卡中的所有内容。以下代码未使用GeometryReader

VStack{
    AnimatedImage(url: URL(string: self.mediaLink))
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: UIScreen.main.bounds.width - 40)
}
.frame(width: UIScreen.main.bounds.width - 40)

Answer 1

我认为此更改将为您提供帮助：

VStack {
    AnimatedImage(url: URL(string: self.mediaLink))
       .resizable()
       .scaledToFit()
}
.frame(width: UIScreen.main.bounds.width - 40)

Answer 2

尝试使用function power(x,n) { let sum =1 for(let i =0;i<n;i++){ sum*=x } return sum } console.log(power(11,3))和scaledToFill修饰符

clipped

Answer 3

仅使用Image（“ some_image”）测试了您的代码，如下所示，它可以工作（Xcode 12 / iOS 14），因此问题出在AnimatedImage或其他代码中。

VStack{
    Image("some_image")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: UIScreen.main.bounds.width - 40)
}
.padding(.horizontal, 20)
.frame(width: UIScreen.main.bounds.width - 40)