如何在 SwiftUI 的边界内正确填充填充图像？

Question

我必须解决 SwiftUI 上的图像问题。我目前必须将收到的图像填充到某个垂直容器中，这些容器是 LazyVGrid 的单元格，但问题是可点击区域会扩展到指定区域。

我用了Accessibility Inspector，发现多出来的地方是Images造成的。（附截图）

我使用的代码类似于以下内容：

Image(uiImage: image.image)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(
        maxWidth: width,
        maxHeight: height
    )
    .clipped()

我认为通过使用框架和裁剪方法我可以解决这个问题，但事实并非如此，除非我使用一些方形图像。知道什么可以解决这个问题吗？谢谢！

Answer 1

用几何体包裹内容Reader，你需要知道宽高比，就像我在下面设置的 720/460

GeometryReader { gr in
       Image(uiImage: image.image)
            .resizable()
             .aspectRatio(720/460, contentMode: .fit)
          }
        .clipped()
        .aspectRatio(720/460, contentMode: .fit)

Answer 2

只需在底部添加.contentShape(Rectangle())：

            Image(uiImage: image.image)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(
                    maxWidth: width,
                    maxHeight: height
                )
                .clipped()
                .contentShape(Rectangle())    // <- Here!

如何在 SwiftUI 的边界内正确填充填充图像？

How to properly fit a filled Image in its bounds on SwiftUI?

ios

swift

swiftui

lazyvgrid