CODEWITHSUNDEEP
iosswiftswiftui
New iOS Dev
New iOS Dev

Reputation: 2057

How to make each item clickable to show detailed view in LazyVGrid?

//
//  ContentView.swift
//  DemoProject

import SwiftUI
import CoreData

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext

    @FetchRequest(
        sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
        animation: .default)
    private var items: FetchedResults<Item>
    private var gridItemLayout = [GridItem(.adaptive(minimum: 100))]

    @StateObject private var viewModel = HomeViewModel()

    var body: some View {
        GeometryReader { geometry in
            NavigationView {
                ScrollView {
                    LazyVGrid(columns: gridItemLayout, spacing: 20) {
                        ForEach(viewModel.results, id: \.self) {
                            let viewModel = ResultVM(model: $0)

                            NavigationLink(destination: {
                                DetailView()

                            }, label: {
                                SearchResultRow(resultVM: viewModel)

                            })
                        }
                    }
                }
            }
            .onAppear(perform: {
                viewModel.performSearch()
            })
        }
    }
}

struct SearchResultRow: View {

    let resultVM: ResultVM

    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 16).fill(.yellow)
                .frame(maxWidth: .infinity).aspectRatio(1, contentMode: .fit)
                .overlay(Text(resultVM.trackName))
                .onTapGesture {
                }

        }.padding()
            .background(Color.red)
    }
}

enter image description here

I want to navigate to detailed view on click on each Cell, I tried navigation but its not clicking.

DetailView

import SwiftUI

struct DetailView: View {
    var body: some View {
        Text("Hello World")
    }
}

Upvotes: 0

Views: 850

Answers (2)

Asperi
Asperi

Reputation: 258285

The tap gesture blocks NavigationLink (which is actually a button, so also works onTap), so the fix is just remove

var body: some View {
    HStack {
        RoundedRectangle(cornerRadius: 16).fill(.yellow)
            .frame(maxWidth: .infinity).aspectRatio(1, contentMode: .fit)
            .overlay(Text(resultVM.trackName))
 //             .onTapGesture {     // << this conflict !!
 //             }

Tested with Xcode 13.4 / iOS 15.5

*Note: if you need both, then use .simultaneousGesture(TapGesture().onEnded {})

Upvotes: 0

Steven-Carrot
Steven-Carrot

Reputation: 3101

To make your sub grid clickable and leads to another view try this:

ForEach(viewModel.results, id: \.self) {
     let viewModel = ResultVM(model: $0)
     
     NavigationLink {
        //your DetailView()

     } label: {
        //this is the design for your navigation button
        SearchResultRow(resultVM: viewModel)
     }                          
 }

Upvotes: 2

Related Questions