SwiftUI: как реализовать переключатель в SwiftUI

Question

Я создаю простую форму приложения. В этом у меня есть флажки и радио кнопки, но я не знаю, как это сделать.

Я сделал ниже код, чтобы динамически изменить цвет выбранной опции. Но это можно выбрать несколько значений. Мне нужно выбрать только одно значение из 5 значений, таких как переключатель.

Например: я нажимаю на второй переключатель. Теперь, если я выберу четвертую радиокнопку, второй должен отменить выбор, а четвертый должен быть выбран.

struct DCTableCell: View {

    @Binding var dcValue: String

    @State var isSelected: Bool = false

    var body: some View {


        Button(action: {
            print("Tapped")
            self.isSelected.toggle()
        }){
            ZStack {
                RoundedRectangle(cornerRadius: 8)
                    .stroke(self.isSelected ? Color.init("borderSelected"): Color.init("border"))
                    .frame(height: 56)
                    .foregroundColor(.clear)

                HStack {
                    Text(dcValue)
                        .font(.custom("Montserrat", size: 16))
                        .fontWeight(.medium)
                        .foregroundColor(self.isSelected ? Color.init("borderSelected") : .white)
                        .padding()

                    Spacer()

                    ZStack {
                        Circle()
                            .stroke(self.isSelected ? Color.init("borderSelected") : Color("circleBorder"))
                            .frame(width: 18, height: 18)
                            .padding()

                        Circle()
                            .frame(width: 10, height: 10)
                            .foregroundColor(self.isSelected ? Color.init("borderSelected"): Color.clear)

                    }
                }
            }
        }
    }
}

Answer 1

У меня есть похожее решение, используйте метки в качестве хеш-тега, что делает его очень прямым. Таким образом, вам нужно только установить внешний слой: CustomDCPicker, как обычный сборщик.

                 UIHostingController(rootView: CustomDCPicker())

        struct CustomDCPicker: View {
            @State var dcValue: String = ""
            var body: some View {
                VStack{
                    Text(dcValue).bold()
                    DCTable.init(dcValue: $dcValue, Labels: ["sample1","sample2","sample3","sample4","sample5"])
                }
            }
        }

        struct DCTable: View {
            @Binding var dcValue: String
            var Labels: [String] = []
        var body: some View {
            ForEach(Labels, id:\.self){
                DCTableCell(dcValue: self.$dcValue, myLabel: $0)
            }
        }
        }

        struct DCTableCell: View {
            @Binding var dcValue: String
            var isSelected: Bool {
                get{   self.dcValue == self.myLabel}
            }
            var myLabel : String
            var body: some View {
                Button(action: {
                    print("Tapped")
                    self.dcValue = self.myLabel
                }){
                    ZStack {
                        RoundedRectangle(cornerRadius: 8.0)
                            .stroke(self.isSelected ? Color.red: Color.yellow)
                            .frame(height: 56)
                            .foregroundColor(.clear)

                        HStack {
                            Text(myLabel)
                                //.font(.custom("Montserrat", size: 16))
                                .fontWeight(.medium)
                                .foregroundColor(self.isSelected ? Color.red : .black)
                                .padding()

                            Spacer()

                            ZStack {
                                Circle()
                                    .stroke(self.isSelected ? Color.red : Color.black)
                                    .frame(width: 18, height: 18)
                                    .padding()

                                Circle()
                                    .frame(width: 10, height: 10)
                                    .foregroundColor(self.isSelected ? Color.red: Color.clear)

                            }
                        }
                    }
                }
            }
        }

Answer 2

Хорошо, это не идеальное решение, но оно работает и, надеюсь, откроет вам глаза, чтобы улучшить то, что у вас есть. Я даю каждому RadioButton идентификатор, и когда выбранный идентификатор меняет его, он обновляется:

struct DCTableCell: View {

    var id: Int
    @Binding var dcValue: String
    @Binding var selectedID: Int

    var body: some View {
        Button(action: {
            print("Tapped")
            self.selectedID = self.id
        }){
            ZStack {
                RoundedRectangle(cornerRadius: 8)
                    .stroke(self.id == self.selectedID ? Color.blue : Color.white)
                    .frame(height: 56)
                    .foregroundColor(.clear)

                HStack {
                    Text(dcValue)
                        .font(.custom("Montserrat", size: 16))
                        .fontWeight(.medium)
                        .foregroundColor(self.id == self.selectedID ? .blue : .white)
                        .padding()

                    Spacer()

                    ZStack {
                        Circle()
                            .stroke(self.id == self.selectedID ? Color.blue : .black)
                            .frame(width: 18, height: 18)
                            .padding()

                        Circle()
                            .frame(width: 10, height: 10)
                            .foregroundColor(self.id == self.selectedID ? Color.blue: Color.clear)

                    }
                }
            }
        }
    }
}

А вот как его использовать. возможно, вам следует создать массив с идентификаторами и строками, которые вы хотите передать.

struct ContentView: View {
    @State var str = "lolz"
    @State var selectedID = -1

    var body: some View {
        VStack {
            ForEach((1...5), id: \.self) { index in
                DCTableCell(id: index, dcValue: self.$str, selectedID: self.$selectedID)
            }
        }
    }
}

Надеюсь, это поможет!