SwiftUI Tap Area Below Button

Question

I have a View in my app that shows an Image as the background (via Binding ) and then it has a button to download the image and another to favorite the image.

The problem is that when I use the .ignoreSafeArea on a whole ZStack , the tap area on the button shifts to below the button body. I have the images scaled to fit and clipped and I tried moving the buttons down with padding, and I have tried seeing if there was an alternative to making the whole ZStack ignore the safe area with no luck.

I should also mention that I have put the image as the background with the .background property, I tried just putting it at the top of a ZStack but that would also affect the buttons positions.

I should also mention I am relatively new to 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

Try to add .contentShape(Rectangle()) to your buttons. It should limit tappable area to your button view