SwiftUI Image scaledToFill 布局行为

Posted 2023-02-18

【中文标题】SwiftUI Image scaledToFill 布局行为

【英文标题】：SwiftUI Image scaledToFill layout behaviour

【发布时间】：2021-06-13 16:36:14

【问题描述】：

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

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

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

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

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

【参考方案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】：

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

***.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)