SwiftUI图像缩放ToFill布局行为

Question

在我的iOS 14小工具中，我想连续显示几个圆形图像。

当使用scaledToFit()时，图像会奇怪地拉伸以适合圆形。scaledToFill()给了我想要的输出，比如：

Image("Person")
.resizable()
.scaledToFill()
.clipShape(Circle())

但这会改变视图的行为，忽略其父视图并扩展到父视图之外。设置固定框架可以防止这种情况，但我需要这些图像动态调整大小。当我把这个视图放在小工具中的HStack中时，图像太大了。

如何使图像按比例缩放为scaledToFill()，并且仍然尊重父视图。

Answer 1

我发现将GeometryReader直接包装到图像中效果最好

HStack {
GeometryReader { geo in
Image("Person")
.resizable()
.scaledToFill()
.frame(width: geo.size.width, height: geo.size.height)
}
}

Answer 2

您可以尝试使用几何读取器。这是我在Widget中使用的示例代码，所以你必须根据你的项目对其进行调整，不过，你会明白的。

GeometryReader { geo in
ZStack(alignment: .bottom) {
HStack {
Image("Person")
.resizable()
.frame(width: geo.size.width, height: geo.size.height)
.aspectRatio(contentMode: .fit)
}
}
}

Answer 3

我在这篇文章中找到了一个解决方案，第一个答案在Widget中非常有效：

stackoverflow.com/questions/58290963/clip-image-to-square-in-swiftui

然而，我在我的应用程序中重复使用该视图，这导致了一些奇怪的行为。相反，我现在在创建视图之前将图像剪裁到一个圆中。这允许我使用.scaledToFit()，并且仍然保持图像的原始纵横比。