NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

SOLVED: How to increase the tappable area?

Forums > SwiftUI

I created the following UI:

struct ContentView: View {
    var body: some View {
        List {
            Section("Section One") {
                Text("Item 1")
            }
            .onTapGesture {
                print("Section 1 was tapped")
            }

            Section("Section Two") {
                Text("Item 2")
            }
            .onTapGesture {
                print("Section 2 was tapped")
            }

            Section("Section Three") {
                Text("Item 3")
            }
            .onTapGesture {
                print("Section 3 was tapped")
            }
        }
    }
}

This is, basically, a menu. Once an item or a section is tapped, I want something to happen. The problem is: only the text of the item and of the section header are sensitive to taps. I highlighted the background with a color to verify the tappable area:

Section("Section One") {
                Text("Item 1")
            }
            .background(Color.red)
            .onTapGesture {
                print("Section 1 was tapped")
            }

I then tried to stretch it like so:

Section("Section One") {
                Text("Item 1")
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(Color.red)
            .onTapGesture {
                print("Section 1 was tapped")
            }

Which did work, but only until I had some solid color for the background. Once I removed the background or made the color 'clear', the tap-sensitive area shrinked again to the texts. Unfortunately, in the real app I can't use any solid colors here, as the background of the whole view is a complex gradient, I don't want to mess it up.

Is there a way to stretch the tappable area without introducing unneeded colors?

   

@Bnerd  

check Paul's video and guide on Day 86 https://www.hackingwithswift.com/books/ios-swiftui/disabling-user-interactivity-with-allowshittesting

using a frame and .contentShape(Rectangle()) you should get the result you are looking for.

1      

Hacking with Swift is sponsored by Play

SPONSORED Play is the first native iOS design tool created for designers and engineers. You can install Play for iOS and iPad today and sign up to check out the Beta of our macOS app with SwiftUI code export. We're also hiring engineers!

Click to learn more about Play!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.