How to use Binding<Color> in SwiftUI? - swiftui

Question

How to change a color dynamically in SwiftUI, like in this example
#Binding var randomColor: Color
public var body: some View {
ZStack {
Circle()
.stroke(lineWidth: 20)
.opacity(0.5)
.foregroundColor($randomColor)
}
}
This does'nt work because .foregroundColor only takes Color. Is there any way of using #Binding with colors or is this just not the way of doing it in SwiftUI?

Answer 1

You only need to use the $variableName form of a binding variable in subviews that need to change, as well as read, the variable’s value.
If all your subview is doing is reading the currently set value, you would access variableName directly. So your body in the example you provided would be
public var body: some View {
ZStack {
Circle()
.stroke(lineWidth: 20)
.opacity(0.5)
.foregroundColor(randomColor)
}
}
Furthermore, using #Binding says that your view is going to need to edit the value of a state variable that is owned by the parent’s view. If you’re not making any changes to it, there is no point declaring it as a binding at all.
On the other hand, if you are going to be changing the value of the variable, but this view “owns" the variable, you’d use #State instead.
For example:
struct ContentView: View {
// owned by this view (and with a starting value defined)
#State var myColor: Color = .accessColor
var body: some View {
VStack {
// This subview is allowed to change the value, so it takes a binding
ColorPicker("Color", selection: $myColor)
// This subview is only going to display the color, so it takes a read-only property
ExampleColorView(color: myColor)
}
}
}
struct ExampleColorView: View {
var color: Color
var body: some View {
ZStack {
Circle()
.stroke(lineWidth: 20)
.opacity(0.5)
.foregroundColor(color)
}
}
}
Whenever the parent view’s myColor variable changes, the SwiftUI system creates a new ExampleColorView struct with the new color defined – and it spots the difference between the old view and the new one, and redraws the screen.