SwiftUI Touchable Area of a Button

Question

I am trying to increase the touchable area of a button inside a NavigationView. It does not work even though the area is made bigger. My code is below:

var body: some View {
NavigationView {
    List(taskStore.tasks) { tasks in
        Text(tasks.name)
    }
.navigationBarTitle("Tasks")
.navigationBarItems(
    trailing: Button(action: { 
    self.modalIsPresented = true 
}){
     Image(systemName: "plus")
    .frame(width: 200, height: 200)
    .contentShape(Rectangle())
    .background(Color.yellow)
})}

The green area is touchable and the red area isn't touchable.

I found a solution online that works. However this solution only works for a button that is NOT in the NavigationView. So if I put the button in "some view" like the following below, it works as per the solution:

var body: some View {
Button(action: {self.modalIsPresented = true} ) {
Text("Default padding")
.padding(50)
.background(Color.yellow)
}}}

But when I put the button in a Navigation View like my code, the yellow area is not touchable. How can I get the whole yellow area (red box) to be touchable like the solution?

Thanks :D

Example of solution:

Dan O'Leary · Answer 1 · 2020-02-29T02:11:21.453

1

I think you may find your desired effect inside the .navigationBarItems(trailing:) if you use .contentShape(Rectangle()) modifier. Or you could use other shapes to suit your needs. Then adjust the size of the .frame to adjust the tappable area as desired. Here is a quick code example.

struct ContentView: View {
var body: some View {
    NavigationView {
        List {
            Text("Hello, World")
        }
    .navigationBarTitle(Text("Items"))
        .navigationBarItems(trailing: Button(action: {
            print("Do Something")
        }, label: {
            Image(systemName: "plus")
                .frame(width: 100, height: 50)
                .contentShape(Rectangle())
                .border(Color.red, width: 3)
                .background(Color.gray)
        }))
    }
  }
}

I hope this helps.

edited Feb 29 '20 at 02:11

answered Feb 29 '20 at 01:18

Dan O'Leary

916
9
20

1

Updated question to reflect your answer. Seems to not work. – Feb 29 '20 at 01:36
My apologies. I've been working on it for the past 45 minutes and you're right. I can't seem to get the tappable area vertically to activate at anything larger than 50pts. My only guess is that space is saved for the .navigationBarTitle. But that's strictly a guess. I updated my code to reflect your usage of a system Image. Maybe someone else can help. – Dan O'Leary Feb 29 '20 at 02:13
Thanks so much for trying it also. I spent similar time, couldn't fix it. I'm assuming it's a SwiftUI bug or I need to increase the navigation bar height or something. Cheers. – Feb 29 '20 at 07:17

score 1 · Accepted Answer · answered Feb 29 '20 at 18:59

If you want a button in the navigation bar, it is only going to be clickable inside the navigation bar, no matter what you try to set the image's frame at, and the NavigationView determines that height, no matter what the children- the button, in this case- may want.

Historically, changing the height of the NavigationBar has not been supported: see the comments here

Now you could do something funky with ZStacks- put a button on top of the navigation view, perhaps- but you're not going to be able to put anything larger than the set height inside the navigation bar.

I was wondering if this have been fixed? Is it possible to increase the hitbox of a swiftUI Button in the navigation bar? — , May 23 '20 at 12:03

SwiftUI Touchable Area of a Button

2 Answers2

Linked