SwiftUI Multiple Selectable View Components

MultipleSelectableView.swift

import SwiftUI
import Combine

final class MultipleSelectableViewModel: ObservableObject {
    @Published var isSelectedRed: Bool = false
    @Published var isSelectedGreen: Bool = false
    @Published var isSelectedBlue: Bool = false

    var cancels: [Cancellable] = []

    init() {
        let redSubscriber = $isSelectedRed.sink { (selected) in
            print("red is\(selected ? "" : " not") selected")
        }
        cancels.append(redSubscriber)

        let greenSubscriber = $isSelectedGreen.sink { (selected) in
            print("green is\(selected ? "" : " not") selected")
        }
        cancels.append(greenSubscriber)

        let blueSubscriber = $isSelectedBlue.sink { (selected) in
            print("blue is\(selected ? "" : " not") selected")
        }
        cancels.append(blueSubscriber)
    }
}


struct MultipleSelectableView: View {
    @ObservedObject var viewModel = MultipleSelectableViewModel()
    var body: some View {
        ScrollView {
            SelectBox(isSelected: $viewModel.isSelectedRed, color: .red)
            SelectBox(isSelected: $viewModel.isSelectedGreen, color: .green)
            SelectBox(isSelected: $viewModel.isSelectedBlue, color: .blue)
        }
    }
}

struct SelectBox: View {
    @Binding var isSelected: Bool
    let color: Color
    var body: some View {
        Rectangle()
            .foregroundColor(color)
            .frame(width: 100, height: 100)
            .cornerRadius(10)
            .onTapGesture {
                self.isSelected.toggle()
        }
        .padding()
        .border(Color.black, width: self.isSelected ? 4 : 0)
    }
}

struct MultipleSelectableView_Previews: PreviewProvider {
    static var previews: some View {
        MultipleSelectableView()
    }
}

the explanation of the code is here. Please see the blog post.

https://blog.personal-factory.com/2020/07/11/how-to-create-selectable-ui-component-by-swiftui-in-multiple/