在SwiftUI中单击forEach语句中的按钮时如何更改不同颜色的按钮背景？

Question

我想将按钮着色为上面的颜色数组。例如：如果用户首先选择任何按钮，则该按钮的颜色应为橙色，如果用户选择另一个按钮，则该按钮的颜色应为绿色，依此类推。用户最多可以从 10 个按钮中选择 7 个按钮，如果选择了 7 个不同的按钮，那么它们应该有 7 种不同的颜色。

import SwiftUI

struct ColorModel: Identifiable {
    let value: Color
    let id = UUID()
}
let colors = [
    ColorModel(value: Color.orange),
    ColorModel(value: Color.green),
    ColorModel(value: Color.blue),
    ColorModel(value: Color.red),
    ColorModel(value: Color.yellow),
    ColorModel(value: Color.gray),
    ColorModel(value: Color.pink),
]
let totalButtons: Int = 10

struct ContentView: View {
    @State private var selectedButtons = [Int]()

    var body: some View {
        ForEach(0..<totalButtons) { index in
            Button(action: {
                self.updateSelectButton(value: index)
            }) {
                Text("Button \(index)")
            }
            .background(self.selectedButtons.contains(index) ? colors[index].value : Color.white)
        }
    }

    func updateSelectButton(value: Int) {
        guard value < colors.count else {
            return
        }
        if let index = self.selectedButtons.firstIndex(of: value) {
            self.selectedButtons.remove(at: index)
        } else {
            self.selectedButtons.append(value)
        }
    }
}

代码如上所示。 上面代码的问题是用户无法选择数组中的第 8、9 和 10 个按钮。用户只能选择前 7 个按钮。

Answer 1

您可以尝试以下方法：

struct ContentView: View {
    @State private var selectedButtons = [Int]()

    var body: some View {
        ForEach(0 ..< totalButtons) { index in
            Button(action: {
                self.updateSelectButton(value: index)
            }) {
                Text("Button \(index)")
            }
            .background(self.buttonColor(value: index)) // <- extract to another function for clarity
        }
    }

    func updateSelectButton(value: Int) {
        if let index = selectedButtons.firstIndex(of: value) {
            selectedButtons.remove(at: index)
        } else if selectedButtons.count < 7 { // <- make sure we never go above 7
            selectedButtons.append(value)
        }
    }
    
    func buttonColor(value: Int) -> Color {
        if let index = selectedButtons.firstIndex(of: value), index < colors.count { // <- safety check
            return colors[index].value
        } else {
            return .white
        }
    }
}

此解决方案将保持您添加按钮的顺序。这意味着如果您删除您添加的第一个按钮（橙色），第二个按钮将成为第一个按钮，并且会从绿色重新着色为橙色。

您可能还想提取硬编码值7 并将其替换为某个变量。

Answer 2

您需要删除这行代码。由于这条线，用户无法选择数组中的第 8、9 和 10 个按钮。

   guard value < colors.count else {
        return
    }

改用此代码

    if self.selectedButtons.count >= 7 {
        return
    }

}