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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
KD Knowledge Diet

Software Engineer, Mobile Developer living in Seoul. I hate people using difficult words. Why not using simple words? Keep It Simple Stupid!