SwiftUI - Как изменить цвет всех других кнопок при нажатии на кнопку?

Question

Ниже в моем коде у меня есть настройка, в которой есть 4 кнопки, каждый раз, когда я нажимаю кнопку, она действует как переключатель (как переключатель). Чего я хотел бы добиться, так это чтобы все остальные кнопки были серыми при нажатии на одну из кнопок. Только одна кнопка может быть зеленой или активной одновременно.

struct hzButton: View {
  var text: String
  @State var didTap: Bool

  var body: some View {
    Button(action: {
      if self.didTap == true{
        self.didTap = false
      }else{
        self.didTap = true
      }
      selectFreq(frequency: self.text)
    }) {
      Text(text)
        .font(.body)
        .fontWeight(.semibold)
        .foregroundColor(Color.white)
        .multilineTextAlignment(.center)
        .padding(.all)
        .background(didTap ? Color.green : Color.gray)
        .cornerRadius(6.0)
    }
    .frame(width: nil)
  }
}

struct Row: Identifiable {
  let id = UUID()
  let headline: String
  let numbers: [String]
}

struct ContentView: View {
  var rows = [
    Row(headline: "", numbers: ["250","500","750","1000"]),
  ]
  var body: some View {
    HStack {
      ForEach(rows) { row in
        HStack {
          ForEach(row.numbers, id: \.self) { text in
            hzButton(text: text, didTap: false)
          }
        }
      }
    }
  }
}

Answer 1

В SwiftUI все вызвано изменением состояния. Чтобы реализовать изменение стиля переключателя, вам нужно сделать что-то вроде:

struct MyRadioButton: View {
    let id: Int
    @Binding var currentlySelectedId: Int
    var body: some View {
        Button(action: { self.currentlySelectedId = self.id }, label: { Text("Tap Me!") })
            .foregroundColor(id == currentlySelectedId ? .green : .red)
    }
}


struct MyRadioButtons: View {
    @State var currentlySelectedId: Int = 0
    var body: some View {
        VStack {
            MyRadioButton(id: 1, currentlySelectedId: $currentlySelectedId)
            MyRadioButton(id: 2, currentlySelectedId: $currentlySelectedId)
            MyRadioButton(id: 3, currentlySelectedId: $currentlySelectedId)
            MyRadioButton(id: 4, currentlySelectedId: $currentlySelectedId)
        }
    }
}

При изменении общего значения currentSelectedId все кнопки, зависящие от этого состояния, будут обновлены соответствующим образом.

Answer 2

Вместо того, чтобы думать об этом как о 4 отдельных кнопках, каждая из которых имеет свое собственное состояние включения / выключения, подумайте о группе в целом и о том, как они представляют одно состояние текущего значения. Затем, когда каждая кнопка определяет свой цвет фона, она может подумать «соответствует ли мое значение текущему выбранному значению?». Таким образом, вместо переключения логического значения при нажатии кнопки, пусть кнопка обновит текущее выбранное значение (общее для всех кнопок в группе) своим собственным значением.