Expand SwiftUI button tap area over the button frame

Question

I read a similar question about that issue. But that only expand the button size use .padding(). The red region in the snapshot is the tappable area.

The trailing padding to screen edge inserted by SwiftUI.framework can not be removing (I think). That causes any tap in the right edge of the screen can not trigger button action. How can I make the tappable area beyond the button size? So that user could tap that button more easier.

Thanks.

.navigationBarItems(trailing:
    Button(action: {
        self.context.isSheetDisplay = true
    }, label: {
        Image(systemName: "square.and.pencil")
            .font(.system(size: 20))
    })
    .padding([.leading, .top, .bottom])
    .background(Color.red)
)

---

Update:

e.g. The Photos.app in simulator could trigger tap at the edge.

Answer 1

My solution to this issue for iOS is to add a nearly transparent background color ViewModifier to the button as part of a ButtonStyle:

import SwiftUI

struct ExampleBigPaddedButton: View {
    var body: some View {
        Button("Tap anywhere inside") {
            print("Tapped")
        }.buttonStyle(BigPaddedButtonStyle())
    }
}

struct BigPaddedButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        return configuration
            .label
            .foregroundColor(configuration.isPressed ? .gray : .black)
            .padding(EdgeInsets(top: 75, leading: 25, bottom: 75, trailing: 25))
            .background(Color(red: 1, green: 1, blue: 1, opacity: 0.01))
            .background(Rectangle().stroke(Color.gray))
    }
}

struct ExampleBigPaddedButton_Previews: PreviewProvider {
    static var previews: some View {
        ExampleBigPaddedButton()
    }
}

This produces a button having any size of padding you need that is tappable anywhere within its bounds.

Answer 2

The hit test area includes the background, but only when it isn’t clear. If your button is overlaying an area with a uniform background, you can make its background not clear, while still not noticeable to the user, by setting its background to the background color.

Button(…)
    .background(.background)