I have a navigation sidebar on my macOS app built on a custom navigation system.
To navigate to different views I detect .onTapGesture
s of the list items like so:
List (selection: $selection) {
ForEach(items, id:\.id) { item in
getNavButton(navItem: item) //an HStack with an Image and a Text view
.onTapGesture {
//change selection
//navigate to desired view...
}
}
}
Whenever I click on an item, it highlights the selection on the sidebar as intented. The problem is that it does not trigger the .onTapGesture
unless the click is made on the NavButton
.
To fix this I tried increasing the bounds of the HStack
that contains the button components. I also tried adding a Spacer
inside the stack.
HStack {
Image(systemName: "house")
Text("some text...")
Spacer()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
This still leaves a small area around the button that does not detect my clicks, seen below. Note: when clicks happen in the red area, they are detected. The red color is pure styling.
How can I fill the remaining area around the button?
Also, if this approach is ineffective, how should I detect changes in selection?