Hard to tap button in SwiftUI navigation bar items

user_909180 0
Viewed 3848

I have a SwiftUI NavigationView with a Button as leading navigation bar item. It seems the button action is fired only when user taps inside that little Image. Can I make the tappable area bigger, without affecting the height of the navigation bar?

I tried adding .frame to the Image, but that made the navigation bar too big. 

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Foo")
                .navigationBarTitle(Text("Title"), displayMode: .inline)
                .navigationBarItems(leading:
                    HStack {
                        Button(action: {
                            print("tapped")
                        }) {
                            Image(systemName: "info.circle")
                        }
                    })
            }
    }
}
swiftui swift ios
2 Answers

(One of) the following modifiers could help:

.imageScale(.large)

A image from SFSymbols has three sizes:

  • .small for when using inline with text
  • .medium for use as an icon
  • .large for use as a button in a nav bar or bottom bar
.padding()

Adds padding around the image. The padding should also be tappable.

user_114327190

Try this out 

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Foo")
                .navigationBarTitle(Text("Title"), displayMode: .inline)
                .navigationBarItems(leading:
                    HStack {
                        Button(action: {
                            print("tapped")
                        }) {
                            Image(systemName: "info.circle").imageScale(.large) //Here is the change in image scale property
                        }
                    })
            }
    }
}

Happy Coding...

user_122000940
Related