更改 SwiftUI 上多个按钮的背景颜色

Change background color of multiple buttons on SwiftUI

我有一个我无法解决的问题。我想在用户点击时更改其中一个按钮的背景颜色。

所以我做了这个代码

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)
}

我在 allWords 和 myRow 中检索单词列表的地方每次都包含按钮上的标题。

问题是,当我点击一个按钮时,所有按钮都会改变颜色,但我只想更改我点击的一个按钮的颜色。

你能帮我解决这个问题吗?

谢谢

每个 Button 需要一个变量 didTap。这可以通过将按钮移动到单独的视图来实现。

您可以创建此视图:

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)
                }
    }
}

然后,在您的父视图中按照以下示例调用它。请记住 isNightvariableTitle 必须 都是父视图中的 @State 变量。

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

希望对您有所帮助,

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
            }
        }
    }
}