SwiftUI: How to make the entire row clickable?

The more you know SwiftUI’s API, the better. Because there are a lot of very convenient things. As you develop, you will obviously implement a functionality that outputs repeated rows. It’s a shameful to say, but when I didn’t know about this convenient API, I developed apps a bit inefficiently. Let’s get to discover it together!

The common problem encountered while developing

Sample Code

I prepared a simple list and a button. When HStack receives an event, Text at the bottom of VStack will display. Do you see a problem here?

Clickable arrow is too narrow

The problem with the code above is that the clickable area is too narrow…

Easy Way to fix it using contentShape

.contentShape(Rectangle())

What you have to do is to add just this simple view modifier for the view you want it to make clickable.

contentShape is applied

Conclusion

• Instead of using frame(maxWidth: .infinity), use contentShape(Rectangle()), if you want your each row to be clickable!