SwiftUI Image scaledToFill 布局行为

Question

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

使用 scaledToFit() 时，图像会奇怪地拉伸以适合圆圈。 scaledToFill() 像这样给我想要的输出：

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

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

如何让图像像 scaledToFill() 一样缩放并且仍然尊重父视图。

Answer 1

您可以尝试使用几何 reader。这是我在 Widget 中使用的示例代码，因此您必须根据您的项目对其进行调整，但是，您会明白的。

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

Answer 2

我在这个 post 中找到了解决方案，第一个答案在 Widget 中效果很好：

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

Answer 3

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

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

SwiftUI Image scaledToFill 布局行为

SwiftUI Image scaledToFill layout behaviour

swift

swiftui

widgetkit