foreach - SwiftUI:如何使用 ForEach 选择多个项目(图像)？

Question

我正在使用选择多个缩略图块的功能处理我的项目。只会突出显示选定的缩略图/图像。
对于 ChildView，如果用户点击图像，则绑定(bind) activeBlock 应设置为 true/false。
但是，当我选择缩略图时，所有缩略图都会突出显示。我想出了一些想法，例如

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

但我不知道如何实现它。
这是我的代码:
subview

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

块B View

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

感谢您的帮助!

Answer 1

这是一个可能的方法的演示 - 我们通过视频计数初始化 Bool 数组，并通过索引将激活的标志传递给 subview 。
使用 Xcode 12.1/iOS 14.1 测试(带有一些复制代码)

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