相关疑难解决方法(0)

我试图将多个单元格彼此相邻放置，其中每个单元格由下面的图像和文本组成。单元格本身应该是一个正方形，并且应该缩放图像以填充剩余空间（剪切图像的一部分）。

首先，我尝试将图像和下面的文字制作成正方形。现在我的问题是，我不知道如何在 SwiftUI 中正确实现。使用此代码时，我可以让它工作：

VStack {
    Image(uiImage: recipe.image!)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: 200, height: 200, alignment: .center)
        .clipped()
    Text(recipe.name)
}

问题是，我必须指定一个固定的帧大小。我想要的是一种制作单元格的方法，它保持 1:1 的纵横比并且可以调整大小，因此我可以将它们的动态数量放在彼此相邻的屏幕上。

我也尝试使用

VStack {
    Image(uiImage: recipe.image!)
        .resizable()
        .aspectRatio(1.0, contentMode: .fit)
        .clipped()
    Text(recipe.name)
}

这给了我方形图像，动态缩放。但问题是，图像现在被拉伸以填充正方形而不是缩放以填充它。

我的下一个想法是把它剪成方形。为此，我首先尝试将其剪成圆形（因为显然没有方形）：

VStack {
    Image(uiImage: recipe.image!)
        .resizable()
        .aspectRatio(1.0, contentMode: .fit)
        .clipped()
    Text(recipe.name)
}

但是出于某种奇怪的原因，它并没有真正剪辑图像，而是保留了剩余的空间......

那么我是不是没有看到任何东西，或者是将图像裁剪成框架修改器的唯一选项？

编辑

澄清：我不太关心文本，因为整个单元格（或者图像更简单）是方形的，无需通过.frame非方形原始图像指定其大小，也无需拉伸非方形原始图像以使其成为合身。

所以完美的解决方案是 VStack 是方形的，但获得方形图像也可以。它应该看起来像图像 1，但不必使用.frame修饰符。