Как сделать каждую кнопку, нажав изменить свой собственный цвет фона в SwiftUI?

Question

Я хочу, чтобы каждая кнопка меняла свой цвет, когда я нажимал на нее, и меняла цвет обратно, когда я нажимал снова. Поэтому я сделал логическое значение didTap и в соответствии с его значением должно изменить фон.

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

Что делать? Как получить нужный мне результат? Должен ли я использовать что-то еще (не кнопку)? Должен ли я использовать что-то вроде didTapB1 и т. Д. (Кажется, будет длинным кодом, если использовать это?)

import SwiftUI

var headLine = ["B", "I", "N", "G", "O"]
var numB = ["5","9","11","15","9"]
var numI = ["16","19","21","25","22"]
var numN = ["35","39","41","45","42"]
var numG = ["55","59","61","57","52"]
var numO = ["66","69","71","75","72"]

struct TestView: View {

@State private var didTap:Bool = false
 var body: some View {


    ZStack {
        Color.orange
    .edgesIgnoringSafeArea(.all)


    HStack {

        VStack {
            Text("B")
                ForEach(numB, id: \.self) { tekst in
                   Button(action: {
                    if self.didTap == false {
                        self.didTap = true
                    } else {
                        self.didTap = false
                    }

                        }) {
                    Text(tekst)
                        .padding()
                        .background(self.didTap ? Color.red : Color.black)
                            .clipShape(Circle())
                }
            }
        }
        VStack {
            Text("I")
                ForEach(numI, id: \.self) { tekst in
                   Button(action: {
                    if self.didTap == false {
                        self.didTap = true
                    } else {
                        self.didTap = false
                    }

                        }) {
                    Text(tekst)
                        .padding()
                        .background(self.didTap ? Color.red : Color.black)
                            .clipShape(Circle())
                }
            }
        }
    VStack {
        Text("N")
            ForEach(numN, id: \.self) { tekst in
               Button(action: {
                if self.didTap == false {
                    self.didTap = true
                } else {
                    self.didTap = false
                }

                    }) {
                Text(tekst)
                    .padding()
                    .background(self.didTap ? Color.red : Color.black)
                        .clipShape(Circle())
            }
        }
    }
        VStack {
            Text("G")
                ForEach(numG, id: \.self) { tekst in
                   Button(action: {
                    if self.didTap == false {
                        self.didTap = true
                    } else {
                        self.didTap = false
                    }

                        }) {
                    Text(tekst)
                        .padding()
                        .background(self.didTap ? Color.red : Color.black)
                            .clipShape(Circle())
                }
            }
        }
        VStack {
            Text("O")
                ForEach(numO, id: \.self) { tekst in
                   Button(action: {
                    if self.didTap == false {
                        self.didTap = true
                    } else {
                        self.didTap = false
                    }

                        }) {
                    Text(tekst)
                        .padding()
                        .background(self.didTap ? Color.red : Color.black)
                            .clipShape(Circle())
                }
            }
        }
    }
    }
  }
} 

Answer 1

Вам нужно добавить didTap к каждой кнопке. Вы можете просто сделать это, создав пользовательское представление:

struct BingoButton: View {
    var text: String
    @State private var didTap = false

    var body: some View {
        Button(action: {
            self.didTap.toggle()
        }) {
            Text(text)
            .padding()
            .background(didTap ? Color.red : Color.black)
                .clipShape(Circle())
        }
    }
}

И затем вы можете изменить свою реализацию на что-то вроде этого:

        VStack {
            Text("I")
                ForEach(numI, id: \.self) { tekst in
                   BingoButton(text: tekst)
                }
            }
        }

---

---

Вы можете изменитьвашей модели и сделайте ваше определение пользовательского интерфейса меньше и неповторяющимся:

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

struct SimpleView: View {
    var rows = [
        BingoRow(headline: "B", numbers: ["5","9","11","15","9"]),
        BingoRow(headline: "I", numbers: ["16","19","21","25","22"]),
        BingoRow(headline: "N", numbers: ["35","39","41","45","42"]),
        BingoRow(headline: "G", numbers: ["55","59","61","57","52"]),
        BingoRow(headline: "O", numbers: ["66","69","71","75","72"])
    ]

    var body: some View {
        HStack {
            ForEach(rows) { row in
                VStack {
                    Text(row.headline)
                    ForEach(row.numbers, id: \.self) { text in
                        BingoButton(text: text)
                    }
                }
            }
        }
    }
}