I'm just learning Swift and SwiftUI.
I'm trying to write a segmented level indicator. Each segment is a separate view (RoundedRectangle) that draws itself with a 0.1 opacity for off or a 1.0 opacity for on. It draws in green, yellow or red depending on the level.
I haven't been able to figure out a way to create an array of @State variables, so there is a lot of otherwise redundant code
struct ContentView: View {
@State private var value = 0.0
@State private var segment0 = false
@State private var segment1 = false
@State private var segment2 = false
@State private var segment3 = false
@State private var segment4 = false
@State private var segment5 = false
@State private var segment6 = false
@State private var segment7 = false
@State private var segment8 = false
@State private var segment9 = false
var body: some View {
let valueBinding = Binding(
get: {return self.value},
set: {
self.value = $0
let intValue = Int(self.value)
for i in 0...9 {
let isOn = intValue > i
switch (i) {
case 0:
if isOn != segment0 {segment0 = isOn}
case 1:
if isOn != segment1 {segment1 = isOn}
case 2:
if isOn != segment2 {segment2 = isOn}
case 3:
if isOn != segment3 {segment3 = isOn}
case 4:
if isOn != segment4 {segment4 = isOn}
case 5:
if isOn != segment5 {segment5 = isOn}
case 6:
if isOn != segment6 {segment6 = isOn}
case 7:
if isOn != segment7 {segment7 = isOn}
case 8:
if isOn != segment8 {segment8 = isOn}
case 9:
if isOn != segment9 {segment9 = isOn}
default:
break
}
}
}
)
VStack {
HStack(
alignment: .top,
spacing: 1
) {
CellView(isOn: $segment0, color:Color.green)
CellView(isOn: $segment1, color:Color.green)
CellView(isOn: $segment2, color:Color.green)
CellView(isOn: $segment3, color:Color.green)
CellView(isOn: $segment4, color:Color.green)
CellView(isOn: $segment5, color:Color.yellow)
CellView(isOn: $segment6, color:Color.yellow)
CellView(isOn: $segment7, color:Color.yellow)
CellView(isOn: $segment8, color:Color.red)
CellView(isOn: $segment9, color:Color.red)
}
SliderView(value: valueBinding)
}
.padding()
}
}
struct SliderView: View {
@Binding var value: Double
var body: some View {
Slider(value: $value, in: 0...10)
.frame(width: 200)
}
}
struct CellView: View {
@Binding var isOn: Bool
let color: Color
let cornerSize: CGFloat = 4
let size:CGFloat = 20
var body: some View {
print ("cell")
return RoundedRectangle(cornerSize: CGSize(width: cornerSize, height: cornerSize))
.opacity(isOn ? 1.0 : 0.1)
.foregroundColor(color)
.frame(width:size, height:size)
}
}
My first attempt bound the value Double (directly from the Slider) to all of the RoundedRectangle views and each view determined whether is was on or off, and it worked, but SwiftUI redrew all the RoundedRectangle views each time value changed and that seemed inefficient. This way, only the views that actually need to change are redrawn.
Any ideas?
Thanks, Mark