Swiftui foreach зацикливание на множестве кнопок

Question

при нажатии кнопки в l oop ее цвет фона меняется на красный, а при нажатии другой кнопки ее цвет также меняется на красный. но оставшаяся кнопка все еще красная, снова не меняется на голубую. Как я могу изменить только нажатую кнопку на красную, а другие кнопки - на голубую?

struct Box: Identifiable  {
    var id: Int
    var title: String
}

struct MainView: View {


    let boxes:[Box] = [
    Box(id: 0, title: "Home"),
    Box(id: 1, title: "Subjects"),
    Box(id: 2, title: "attendence"),
    Box(id: 3, title: "H.W"),
    Box(id: 4, title: "Quizes"),
    Box(id: 5, title: "class schedule"),
    Box(id: 6, title: "Exam Schedule"),
    Box(id: 7, title: "Inbox"),
    Box(id: 8, title: "Evalouation"),
    ]

    @Binding var showMenu: Bool

    var body: some View{
    VStack {
        ScrollView(.horizontal,showsIndicators: false){
                HStack{
                    ForEach(boxes, id: \.id) {
                        box in
                        BoxView(box: box)
                    }

                }
            }


        }.padding()

    }
}

struct BoxView: View {
    @State var selectedBtn: Int = 1
    var box: Box
    var body: some View{
        Button(action: {
            self.selectedBtn = self.box.id

        }){
            Text(box.title)
                .foregroundColor(.white)
        }
    .frame(width: 130, height: 50)
        .background(self.selectedBtn == self.box.id ? Color.red : Color.blue)
    .cornerRadius(25)
    .shadow(radius: 10)
    .padding(10)

    }
}

Answer 1

Это работает:

1) Добавить @State в MainView для отслеживания выбранной кнопки

2) Передать это состояние как привязку к BoxView

3 ) Измените @State на @Binding (= состояние выхода) в BoxView

struct MainView: View {
  [...]
  @Binding var showMenu: Bool
  @State var selected = 0    // 1
  var body: some View{
    VStack {
      ScrollView(.horizontal,showsIndicators: false){
        HStack{
          ForEach(boxes, id: \.id) { box in
            BoxView(box: box, selectedBtn: self.$selected)  // 2
          }
        }
      }
    }.padding()
  }
}

struct BoxView: View {
  var box: Box
  @Binding var selectedBtn: Int  // 3 
  var body: some View{
    Button(action: {
      self.selectedBtn = self.box.id
    }){
      Text(box.title)
       .foregroundColor(.white)
    }
    .frame(width: 130, height: 50)
    .background(self.selectedBtn == self.box.id ? Color.red : Color.blue)
    .cornerRadius(25)
    .shadow(radius: 10)
    .padding(10)
  }
}