Dynamic data passing and presenting views of Grid Images in SwiftUIExtensions

Question

I am using SwiftUIExtensions library and wanted to make the image in the “StaggeredGridView” clickable presenting a new view with the clicked image and some related information with it.

Presently I am working as below code, but still not sure how to pass data (index - that is basically image name here).

var body: some View {
    Grid(1...20, id: \.self) { index in
        Image("\(index)")
            .resizable()
            .scaledToFit()
            .onTapGesture(count: 2) {
                // Action on Double tapped

                self.showingDetails.toggle()
        }
            .sheet(isPresented: self.$showingDetails) {
                    ProductDetails()
                }

    }

My Product view is as below:

import SwiftUI

struct ProductDetails: View {
    var body: some View {
        Text("Detail")
    }
}

Xcode version: Xcode 11.3

Answer 1

If you want to pass index into ProductDetails you could do this into the following way:

@State var currentIndex = 0
var body: some View {
    Grid(1...20, id: \.self) { index in
        Image("\(index)")
            .resizable()
            .scaledToFit()
            .onTapGesture(count: 2) {
                // Action on Double tapped
                self.currentIndex = index
                self.showingDetails.toggle()
        }
            .sheet(isPresented: self.$showingDetails) {
                    ProductDetails(selection: self.$currentIndex)
                }

    }


struct ProductDetails: View {
    @Binding var selection: Int
    var body: some View {
        Text("Detail \(selection)")
    }
}