SwiftUI: How to select multi items(image) with ForEach?

Question

I'm working on my project with the feature of select multiple blocks of thumbnails. Only selected thumbnail(s)/image will be highlighted. For the ChildView, The binding activeBlock should be turned true/false if a use taps on the image. However, when I select a thumbnail, all thumbnails will be highlighted.I have come up with some ideas like

@State var selectedBlocks:[Bool] 
// which should contain wether or not a certain block is selected.

But I don't know how to implement it.

Here are my codes:

ChildView

@Binding var activeBlock:Bool
var thumbnail: String
var body: some View {
    VStack {
        ZStack {
            Image(thumbnail)
               .resizable()
               .frame(width: 80, height: 80)
                    .background(Color.black)
                    .cornerRadius(10)
            if activeBlock {
               RoundedRectangle(cornerRadius: 10)
                    .stroke(style: StrokeStyle(lineWidth: 2))
                    .frame(width: 80, height: 80)
                    .foregroundColor(Color("orange"))           
            }
        }
}

BlockBView

struct VideoData: Identifiable{
    var id = UUID()
    var thumbnails: String
}

struct BlockView: View {
        var videos:[VideoData] = [
        VideoData(thumbnails: "test"), VideoData(thumbnails: "test2"), VideoData(thumbnails: "test1")
    ]
    
    @State var activeBlock = false

    var body: some View {
        ScrollView(.horizontal){
                HStack {
                    ForEach(0..<videos.count) { _ in
                        Button(action: {
                            self.activeBlock.toggle()
                        }, label: {
                            
                            ChildView(activeBlock: $activeBlock, thumbnail: "test")  
                        })           
                    }
                }                
            }
}

Thank you for your help!

Answer 1

Here is a demo of possible approach - we initialize array of Bool by videos count and pass activated flag by index into child view.

Tested with Xcode 12.1 / iOS 14.1 (with some replicated code)

struct BlockView: View {
    var videos:[VideoData] = [
        VideoData(thumbnails: "flag-1"), VideoData(thumbnails: "flag-2"), VideoData(thumbnails: "flag-3")
    ]
    
    @State private var activeBlocks: [Bool]    // << declare
    
    init() {
        // initialize state with needed count of bools
        self._activeBlocks = State(initialValue: Array(repeating: false, count: videos.count))
    }
    
    var body: some View {
        ScrollView(.horizontal){
            HStack {
                ForEach(videos.indices, id: \.self) { i in
                    Button(action: {
                        self.activeBlocks[i].toggle()       // << here !!
                    }, label: {
                        ChildView(activeBlock: activeBlocks[i],       // << here !!
                                  thumbnail: videos[i].thumbnails)
                    })
                }
            }
        }
    }
}

struct ChildView: View {
    var activeBlock:Bool       // << value, no binding needed
    var thumbnail: String
    
    var body: some View {
        VStack {
            ZStack {
                Image(thumbnail)
                    .resizable()
                    .frame(width: 80, height: 80)
                    .background(Color.black)
                    .cornerRadius(10)
                if activeBlock {
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(style: StrokeStyle(lineWidth: 2))
                        .frame(width: 80, height: 80)
                        .foregroundColor(Color.orange)
                }
            }
        }
    }
}

Answer 2

Final result

1. Build your element and it's model first. I'm using MVVM,

    class RowModel : ObservableObject, Identifiable {
        @Published var isSelected = false
        @Published var thumnailIcon: String
        @Published var name: String
   
        var id : String
   
        var cancellables = Set<AnyCancellable>()
   
        init(id: String, name: String, icon: String) {
            self.id = id
            self.name = name
            self.thumnailIcon = icon
        }
    }
   
    //Equivalent to your BlockView
    struct Row : View {
        @ObservedObject var model: RowModel
   
        var body: some View {
            GroupBox(label:
                Label(model.name, systemImage: model.thumnailIcon)
                    .foregroundColor(model.isSelected ? Color.orange : .gray)
            ) {
                HStack {
                    Capsule()
                        .fill(model.isSelected ? Color.orange : .gray)
                        .onTapGesture {
                            model.isSelected = !model.isSelected
                        }
   
                    //Two way binding
                    Toggle("", isOn: $model.isSelected)
                }
   
            }.animation(.spring())
        }
    }
   

2. Prepare data and handle action in your parent view

    struct ContentView: View {
        private let layout = [GridItem(.flexible()),GridItem(.flexible())]
   
        @ObservedObject var model = ContentModel()
   
        var body: some View {
            VStack {
                ScrollView {
                    LazyVGrid(columns: layout) {
                        ForEach(model.rowModels) { model in
                            Row(model: model)
                        }
                    }
                }
   
                if model.selected.count > 0 {
                    HStack {
                        Text(model.selected.joined(separator: ", "))
                        Spacer()
                        Button(action: {
                            model.clearSelection()
                        }, label: {
                            Text("Clear")
                        })
                    }
                }
            }
            .padding()
            .onAppear(perform: prepare)
        }
   
        func prepare() {
            model.prepare()
        }
    }
   
    class ContentModel: ObservableObject {
        @Published var rowModels = [RowModel]()
   
        //I'm handling by ID for futher use
        //But you can convert to your Array of Boolean
        @Published var selected = Set<String>()
   
        func prepare() {
            for i in 0..<20 {
                let row = RowModel(id: "\(i)", name: "Block \(i)", icon: "heart.fill")
   
                row.$isSelected
                    .removeDuplicates()
                    .receive(on: RunLoop.main)
                    .sink(receiveValue: { [weak self] selected in
                        guard let `self` = self else { return }
                        print(selected)
                        if selected {
                            self.selected.insert(row.name)
                        }else{
                            self.selected.remove(row.name)
                        }
                    }).store(in: &row.cancellables)
   
                rowModels.append(row)
            }
        }
   
        func clearSelection() {
            for r in rowModels {
                r.isSelected = false
            }
        }
    }
   

Don't forget to import Combine framework.