单击 SwiftUI 中的 forEach 语句中的按钮时，如何更改不同颜色按钮的背景? [英] How to change background of buttons with different color when clicking the buttons inside forEach statement in SwiftUI?

问题描述

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

I want to color the buttons as colors array above. For eg: if a user first selects any button then the color of that button should be orange, and if the user selects another button then it should be green and so on. The user can select upto 7 buttons from the total of 10 buttons and if 7 different buttons are selected, then they should have 7 different color.

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 个按钮.

The code looks like above. The problem with above code is that user can't select the 8th, 9th and 10th buttons in the array. User can only select first 7 buttons.

推荐答案

您可以尝试以下操作:

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

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

This solution will keep the order in which you add buttons. Which means if you remove the first button you added (in orange colour) the second button will become first and will be recoloured form green to orange.

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

You may also want to extract the hardcoded value 7 and replace it with some variable.

这篇关于单击 SwiftUI 中的 forEach 语句中的按钮时，如何更改不同颜色按钮的背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！