SwiftUI Image scaledToFill 布局行为答案

【问题标题】：SwiftUI Image scaledToFill layout behaviourSwiftUI Image scaledToFill 布局行为
【发布时间】：2021-06-13 16:36:14
【问题描述】：

在我的 iOS 14 小部件中，我想连续显示多个圆形图像。

当使用scaledToFit() 时，图像会奇怪地拉伸以适应圆圈。 scaledToFill() 给了我想要的输出，如下所示：

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

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

我怎样才能让图像像scaledToFill() 一样缩放并且仍然尊重父视图。

【问题讨论】：

标签： swift swiftui widgetkit

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我在这篇文章中找到了一个解决方案，第一个答案在小部件中效果很好：

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

但是，我在我的应用程序中重用了视图，这导致了一些奇怪的行为。相反，我现在在创建视图之前将图像剪裁为圆形。这让我可以使用.scaledToFit() 并且仍然保持图像的原始纵横比。

【讨论】：

【解决方案3】：

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

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

【讨论】：