Change background color of multiple buttons on SwiftUI-CodePudding

I have a problem that I can't solve. I would like to change the background color of one button among others when the user taps on it.

So I made this code

ForEach(allWords, id: \.self) { myRow in
Button{
    if (self.didTap == true){
        self.didTap = false
    }
    else {
        self.didTap = true
    }
    self.variableTitle = myRow
    isNight.toggle()
} label:{
    ULD(title: myRow, textColor: .black, backgroundColor: didTap ? .red : .green)
}

Where I retrieve a list of words in allWords and myRow contains at each time the title that I have on the button.

The problem is that when I tap on one button all buttons change their color but I would like to change only the color of one button that I have tapped.

Can you help me on this ?

Thank you

CodePudding user response：

You need to have one variable didTap for each Button. This can be achieved by moving the button to a separate view.

You can create this view:

struct MyButton: View {

    @State private var didTap = false    // This will change the color

    let myRow: String    // I'm assuming it's a String, otherwise use the correct type

    @Binding var isNight: Bool   // This will change the variable in the parent view
    @Binding var variableTitle: String   // This will change the variable in the parent view (always assuming it's a String)

    var body: some View {
                Button{
                    didTap.toggle()
                    variableTitle = myRow
                    isNight.toggle()
                } label:{
                    ULD(title: myRow, textColor: .black, backgroundColor: didTap ? .red : .green)
                }
    }
}

Then, in your parent view just call it as per the following example. Remember that isNight and variableTitle must both be a @State variable in the parent view.

ForEach(allWords, id: \.self) { myRow in
    MyButton(myRow: myRow, isNight: $isNight, variableTitle: $variableTitle)
}

CodePudding user response：

I hope this will help you,

struct ContentView: View {
    @State var allWords = ["Button1","Button2","Button3","Button4"]
    @State var allSelectedWords = Set<String>()
    var body: some View {
        ForEach(allWords, id: \.self) { myRow in
            if #available(iOS 15.0, *) {
                Button(action:{
                    if allSelectedWords.contains(myRow) {
                        allSelectedWords.remove(myRow)
                    } else {
                        allSelectedWords.removeAll()
                        allSelectedWords.insert(myRow)
                    }
                }){
                    Text(myRow)
                        .foregroundColor(.black)
                        .background(allSelectedWords.contains(myRow) ? .red : .green)
                }
            } else {
                // Fallback on earlier versions
            }
        }
    }
}