Question 67882 in IOS Swift Question posted in
The official documentation can be found here.

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

//
//  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")
    }
}
Tags:

2

Answers


  1. 0

    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)
     }                          
 }
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search