How to separated the two color value - arrays

Question

I have a demo SwiftUI for selected two color & value as below, I want to collect the color value when user select different color.
But they're always linked same value and I cannot separate the two 'Stepper' and got them into an Array.
import SwiftUI
struct StepColorChange: View {
#State private var value = 0
let colors: [Color] = [.orange, .red, .gray, .blue, .green, .purple, .pink]
func incrementStep() {
value += 1
if value >= colors.count { value = 0}
}
func decrementStep() {
value -= 1
if value < 0 {
value = colors.count - 1}
}
var body: some View {
// change color with value stepper
VStack {
Stepper {
Text("Value: \(value) Color: \(colors[value].description)")
} onIncrement: {
incrementStep()
} onDecrement: {
decrementStep()
}
.padding(5)
.background(colors[value])
Stepper {
Text("Value: \(value) Color: \(colors[value].description)")
} onIncrement: {
incrementStep()
} onDecrement: {
decrementStep()
}
.padding(5)
.background(colors[value])
}
}
}
Thanks a lot!

Answer 1

This is not rocket science here. Try something like this, using two values,
to change the stepper background color independently according each stepper value.
struct ContentView: View {
var body: some View {
StepColorChange()
}
}
struct StepColorChange: View {
#State private var value1 = 0
#State private var value2 = 0
let colors: [Color] = [.orange, .red, .gray, .blue, .green, .purple, .pink]
var body: some View {
VStack {
Stepper {
Text("Value: \(value1) Color: \(colors[value1].description)")
} onIncrement: {
value1 += 1
if value1 >= colors.count { value1 = 0}
} onDecrement: {
value1 -= 1
if value1 < 0 { value1 = colors.count - 1 }
}
.padding(5)
.background(colors[value1])
Stepper {
Text("Value: \(value2) Color: \(colors[value2].description)")
} onIncrement: {
value2 += 1
if value2 >= colors.count { value2 = 0}
} onDecrement: {
value2 -= 1
if value2 < 0 { value2 = colors.count - 1 }
}
.padding(5)
.background(colors[value2])
}
}
}
EDIT-1: condensed code
struct StepColorChange: View {
#State private var values = [0,0]
let colors: [Color] = [.orange, .red, .gray, .blue, .green, .purple, .pink]
func stepper(_ ndx: Int) -> some View {
Stepper {
Text("Value: \(values[ndx]) Color: \(colors[values[ndx]].description)")
} onIncrement: {
values[ndx] += 1
if values[ndx] >= colors.count { values[ndx] = 0}
} onDecrement: {
values[ndx] -= 1
if values[ndx] < 0 { values[ndx] = colors.count - 1}
}
.padding(5)
.background(colors[values[ndx]])
}
var body: some View {
VStack {
stepper(0)
stepper(1)
Text("stepper(0): \(values[0])")
Text("stepper(1): \(values[1])")
Text("color stepper(0): \(colors[values[0]].description)")
Text("color stepper(1): \(colors[values[1]].description)")
}
}
}