Home > Software design >  How to make each item clickable to show detailed view in LazyVGrid?
How to make each item clickable to show detailed view in LazyVGrid?

Time:07-21

//
//  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.

CodePudding user response:

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)
     }                          
 }

CodePudding user response:

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 {})

  • Related