SwiftUI How to link ForEach index and photos index in the new view?

Question

How to link the forEach index and photos index in the new view? Trying to open a new view by button. This new View has a carouselList, which is created by this structure. When opening the view by NavigationLink, all photos in carouselList are displayed correctly, depending on the index, but it doesn't work with button, the first index is always opened.

 struct Catalog: View {
 @State private var isOpen = false
 var shop: Shop = shops[0]
 var picture: Picture = pictures[0]

 var body: some View {           
 ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 0) {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack {
                        ForEach(0..<shops.count, id: \.self) { index in
                            Button(action: {
                                self.isOpen.toggle()
                            }) {
                                ShopItem(shop: shops[index])
                            } .sheet(isPresented: $isOpen) {
                                PictureItem(picture: pictures[index])
                            }
                        }
                    }
                    .padding(.top, 10)
                }
            }
        }

nicksarno nicksarno · Accepted Answer · 2020-12-09T17:43:08

It's because the .sheet modifier can only be placed once per View. So when you have this code, it configures the .sheet only on the first loop. I would recommend using a NavigationLink for this type of segue.

If you need to force this, you can by (1) moving the .sheet outside of the ForEach, (2) creating an @State variable for the selected picture, (3) update that variable in your button before toggling isOpen, and then use @Binding in your PictureItem for the selected variable. Like this:

struct Catalog: View {
    
    @State private var isOpen = false
    var shops: [String] = ["One", "two", "three"]
    var shop: String = "ONE"
    var pictures: [String] = ["one", "two", "three"]
    @State var picture: String = "PIC ONE"
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 0) {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack {
                        ForEach(0..<shops.count, id: \.self) { index in
                            Button(action: {
                                self.picture = pictures[index]
                                self.isOpen.toggle()
                            }) {
                                Text(shops[index])
                            }
                        }
                    }
                    .padding(.top, 10)
                }
                .sheet(isPresented: $isOpen) {
                    PictureItem(string: $picture)
                }
            }
        }
    }
}

struct PictureItem: View {
    
    @Binding var string: String
    
    var body: some View {
        Text(string)
    }
}

Side note: based on your Button, it seems like the pictures and shops arrays are related and should probably be put together.

SwiftUI How to link ForEach index and photos index in the new view?

1 Answers