SwiftUI轻按下方区域按钮

Question

我有一个View在我的应用程序中显示一个Image作为背景(通过Binding)，然后它有一个按钮下载图像和另一个喜欢的图像。

问题是，当我在整个ZStack上使用.ignoreSafeArea时，按钮上的点击区域移动到按钮主体下方。我有图像缩放到适合和剪切，我试着用填充向下移动按钮，我试着看看是否有另一种选择，使整个ZStack忽略安全区域，没有运气。

我还应该提到，我已经把图像作为背景与.background属性，我试图只是把它放在ZStack的顶部，但这也会影响按钮的位置。

我还应该提到我是Swift的新手

struct photoDetail: View {

let image: realPhoto
@State var textControl: Bool

init(image: realPhoto) {
self.image = image
self.textControl = image.favorited
}

var body: some View {
ZStack {
VStack(alignment: .leading) {
Spacer()
HStack {
Text("created by: (image.username)")
.padding(5)
.foregroundColor(.white)
.background(Color(.gray).opacity(0.8))
.padding(.leading, 20)
.font(.system(size:20, weight: .semibold))
.padding(.bottom, 50)
.cornerRadius(4)
Spacer()
}.padding(.bottom, 60)

}
VStack {

HStack {
Spacer()
Button {
let imageSaver = ImageSaver()
imageSaver.writeToPhotoAlbum(image: UIImage(data: image.image)!)
} label: {
Image(systemName: "square.and.arrow.down")
.resizable()
.scaledToFit()
.frame(width: 20)
.padding(8)
}
Button {
favoriteToggle()
} label: {
Image(systemName: textControl == false || image.favorited == false ? "heart": "heart.fill")
.resizable()
.scaledToFit()
.frame(width: 25)
.padding(8)
}.padding(.trailing, 30)
}.padding(.top, 100)
Spacer()
}
}.onAppear() {
self.textControl = image.favorited
}.background(
Image(uiImage: UIImage(data: image.image)!)
.resizable()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.scaledToFill()
.clipped()
).ignoresSafeArea()
}
}

Answer 1

尝试将.contentShape(Rectangle())添加到按钮中。你应该限制tappable区域按钮查看