自动将按钮的内容形状与其图像的不透明部分对齐？

Question

我已经使用 SwiftUI 设置了一个 Xcode 项目。我正在处理的屏幕有一个滚动视图：

背景看起来很奇怪，因为我有几个带有透明背景的全屏图像，这些图像应该分层在顶部：

通过使图像全屏显示，如果所有图像和背景都设置为

scaledToFill

，它们将始终与背景对齐。问题在于这些图像的作用是充当“按钮”。 通过将这些图像作为标签添加到按钮上，我可以使它们发挥作用而不显得奇怪。当然，这些图像是全屏的，因此按钮的内容区域也是全屏的。我能够通过使用路径制作自定义形状并将它们用于内容形状来解决这个问题：

Button {
    runFunction()
} label: {
    Image(imageName)
        .resizable()
        .scaledToFill()
}
    .contentShape(tappableArea)

现在我们来了解我发表这篇文章的真正原因。因为图像是全屏的，并且每个图像的不透明部分永远不会居中并且总是不同，所以我找不到一种方法使每个图像的内容形状正确对齐。如果我向每个形状添加偏移和缩放，我可以使其正确排列，但这些硬编码的更改仅适用于一台设备。如果我在另一台设备上运行这个应用程序，事情就会再次不一致。

有没有一种方法可以自动将每个按钮的内容形状与图像的不透明部分对齐，而不管屏幕尺寸如何？也许我可以将一个方程应用于每个形状的比例和偏移？ 请记住，因为这一切都包含在滚动视图中，所以视图将始终具有相同的比例。

Answer 1

GeometryReader

来测量底层视图的大小。然后，您可以使用相对大小来定位可点击区域并调整其大小。

像这样：

Image(imageName)
    .resizable()
    .scaledToFill()
    .overlay {
        GeometryReader { proxy in
            let w = proxy.size.width
            let h = proxy.size.height
            Rectangle()
                .opacity(0.001)
                .frame(width: w * 0.2, height: h * 0.1)
                // .background(Rectangle().stroke(lineWidth: 1)) // for debugging
                .padding(.leading, w * 0.27)
                .padding(.top, h * 0.31)
                .onTapGesture {
                    runFunction()
                }
        }
    }

您甚至可以使用不同的形状来定义可点击区域。