How to tap on a grid item in a LazyVGrid and segue to another view (Essentially like a collection view)

Question

I have my code set as follows:

var body: some View {
    
    NavigationStack {
        VStack {
            // Contacts Scroll View
            ScrollView {
                LazyVGrid(columns: threeColumnGrid, spacing: 20) {
                    ForEach($contacts, id: \.self) { $contact in
                        ContactCell(firstName: $contact.firstName.wrappedValue)
                    }
                }.padding(EdgeInsets(top: 20,
                                     leading: 20,
                                     bottom: 20,
                                     trailing: 20))
            }
        }.background(Color(CustomColors.background.rawValue))
    }
}

I would like to be able to tap on one of the grid items in order to segue into another screen, but the only solution I can come up with is NavigationLink which only inserts a link that needs to be tapped.

I need the entire grid item to be tappable without any extra text acting as a link.

Side note: I have also looked into the isActive property of NavigationLink, which worked great, but this is being deprecated in iOS 16... It's as if Apple refuses to allow us to create a collection view using swiftUI.

score 1 · Answer 1 · edited Jan 03 '23 at 12:21

Figured it out. I used: navigationDestination(isPresented:destination:)

See code below:

struct ContactsGridView: View {
    
    @Binding var contacts: [Contact]
    @State var shouldPresentContactMainView = false
    
    let threeColumnGrid = [GridItem(.flexible(), spacing: 20),
                           GridItem(.flexible(), spacing: 20),
                           GridItem(.flexible(), spacing: 20)]
    
    var body: some View {
        
        NavigationStack {
            VStack {
                // Contacts Scroll View
                ScrollView {
                    LazyVGrid(columns: threeColumnGrid, spacing: 20) {
                        ForEach($contacts, id: \.self) { $contact in
                            ContactCell(firstName: $contact.firstName.wrappedValue)
                                .onTapGesture {
                                    shouldPresentContactMainView = true
                                }
                                .navigationDestination(isPresented: $shouldPresentContactMainView) {
                                    ContactMainView()
                                }
                        }
                    }.padding(EdgeInsets(top: 20,
                                         leading: 20,
                                         bottom: 20,
                                         trailing: 20))
                }
            }.background(Color(CustomColors.background.rawValue))
        }
    }
}

How to tap on a grid item in a LazyVGrid and segue to another view (Essentially like a collection view)

1 Answers1