SwiftUI中实现按顺序点击数字按钮变色的方法

核心思路 #

通过状态变量跟踪当前目标数字、已选中数字集合，结合LazyVGrid实现网格布局，在点击事件中校验数字匹配状态，动态更新按钮样式并触发错误提示。

完整实现代码 #

import SwiftUI

struct NumberGridGameView: View {
    // 当前需要点击的目标数字
    @State private var currentTarget = 1
    // 随机排列的1-25数字数组
    @State private var numbers = (1...25).shuffled()
    // 记录已正确点击的数字
    @State private var selectedNumbers = Set<Int>()
    // 控制错误提示弹窗显示
    @State private var showError = false
    
    // 网格布局配置：5列自适应宽度
    private let gridItems = Array(repeating: GridItem(.flexible()), count: 5)
    
    var body: some View {
        NavigationStack {
            LazyVGrid(columns: gridItems, spacing: 10) {
                ForEach(numbers, id: \.self) { number in
                    Button(action: {
                        handleNumberTap(number)
                    }) {
                        Text("\(number)")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .padding()
                            // 根据选中状态切换背景色
                            .background(selectedNumbers.contains(number) ? Color.green : Color.gray)
                            .cornerRadius(8)
                    }
                }
            }
            .padding()
            .navigationTitle("数字排序游戏")
            .alert("错误提示", isPresented: $showError) {
                Button("确定", role: .cancel) {}
            } message: {
                Text("请按1到25的顺序点击数字！")
            }
        }
    }
    
    // 数字点击处理逻辑
    private func handleNumberTap(_ number: Int) {
        if number == currentTarget {
            // 点击正确，更新已选中集合与目标数字
            selectedNumbers.insert(number)
            currentTarget += 1
            // 通关逻辑可在此扩展
            if currentTarget > 25 {
                print("游戏通关！")
            }
        } else {
            // 点击错误，触发提示弹窗
            showError = true
        }
    }
}

#Preview {
    NumberGridGameView()
}

关键细节说明 #

• 状态控制：currentTarget标记下一个需要点击的数字，selectedNumbers存储已正确点击的数字，用于动态切换按钮背景色；showError控制错误弹窗的显示状态。
• 随机数组生成：(1...25).shuffled()直接生成1-25的随机排列数组，无需额外复杂逻辑。
• 样式动态更新：通过selectedNumbers.contains(number)判断数字是否已被正确点击，自动切换背景色为绿色（已选中）或灰色（未点击）。
• 点击校验：在handleNumberTap方法中完成数字匹配判断，正确则更新状态，错误则触发提示。

内容的提问来源于stack exchange，提问作者Greg Xu