SwiftUI: How to make the entire row clickable?

KD Knowledge Diet
1 min readJun 3, 2022


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


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


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



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!