如何分离两个SwiftUI Stepper的颜色值并实现独立控制

修复后的完整代码 #

import SwiftUI

struct StepColorChange: View {
    // 用数组存储两个Stepper的选中值，初始都为0
    @State private var selectedValues = [0, 0]
    let colors: [Color] = [.orange, .red, .gray, .blue, .green, .purple, .pink]

    // 新增index参数，指定操作哪个Stepper的值
    func incrementStep(for index: Int) {
        selectedValues[index] += 1
        if selectedValues[index] >= colors.count {
            selectedValues[index] = 0
        }
    }

    func decrementStep(for index: Int) {
        selectedValues[index] -= 1
        if selectedValues[index] < 0 {
            selectedValues[index] = colors.count - 1
        }
    }
    
    // 封装可复用的颜色选择Stepper子视图
    private func colorStepper(for index: Int) -> some View {
        Stepper {
            Text("Value: \(selectedValues[index]) Color: \(colors[selectedValues[index]].description)")
        } onIncrement: {
            incrementStep(for: index)
        } onDecrement: {
            decrementStep(for: index)
        }
        .padding(5)
        .background(colors[selectedValues[index]])
    }

    var body: some View {
        VStack {
            // 第一个Stepper对应数组索引0
            colorStepper(for: 0)
            // 第二个Stepper对应数组索引1
            colorStepper(for: 1)
            
            // 可选：展示当前选中的两个值，验证存储结果
            Text("选中的值数组：\(selectedValues)")
                .padding(.top, 20)
        }
        .padding()
    }
}

struct StepColorChange_Previews: PreviewProvider {
    static var previews: some View {
        StepColorChange()
    }
}

关键修改点 #

• 独立状态管理：将单个value变量替换为数组selectedValues，每个元素对应一个Stepper的选中值，实现独立控制
• 参数化增减函数：给incrementStep和decrementStep添加index参数，明确操作数组中的哪个元素，避免逻辑混淆
• 代码复用：封装colorStepper子视图，减少重复代码，后续如果需要更多Stepper可以直接复用
• 结果存储：selectedValues数组实时保存两个Stepper的选中值，后续可直接用于业务逻辑

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