arrow-left arrow-right brightness-2 chevron-left chevron-right facebook-box facebook loader magnify menu-down rss-box star twitter-box twitter white-balance-sunny window-close
Tappable Areas in a SwiftUI List Row
1 min read

Tappable Areas in a SwiftUI List Row

I have a problem with the tappable area in a SwiftUI list row: it doesn't cover the entire row.

Here is my code:

Section(header: Text("Latest Transit News").bold(), content: {
    HStack(alignment: .center) {
        Image("Twitter")
            .resizable()
            .renderingMode(.template)
            .frame(width: 18.33, height: 15.14)
            .foregroundColor(Color("TwitterBlue"))
        VStack(alignment: .leading) {
            Text("SBS Transit")
            Text("@SBSTransit_Ltd").font(.caption).foregroundColor(.secondary)
        }
        Spacer()
    }.onTapGesture {
        UIApplication
            .shared
            .open(SupportURL.sbs.url, 
                  options: [UIApplication.OpenExternalURLOptionsKey.universalLinksOnly : false], completionHandler: nil)
}

This produces the expected row:

The only tappable area in the entire row is enclosed in the red box: the Image and Text. My expectation is that the entire HStack should be tappable.

Am I doing something wrong or is there a solution? Please let me know.

Comments

Become a Stuart Breckenridge member below to join the conversation (it's free!). As a member, you will also receive new posts by email (you can unsubscribe at any time).

Enjoying these posts? Want the newsletter?

Subscribe now for free
Already have an account? Sign in
You've successfully subscribed to Stuart Breckenridge.
Success! Your account is fully activated, you now have access to all content.