SwiftUI @State & @Binding

SwiftUI presents two Property Wrappers – @State and @Binding . They achieve two-way binding. That is, when the value of a variable changes, it will be redisplayed. This chapter will explain how to use @State and @Binding by making a custom view.

The complete code can be found in .

@Binding

Declare a view called CounterView. It mainly displays a counter variable, and there are two buttons that add and subtract the value of the counter.

CounterView.counter is declared with @Binding. If it is without @Binding, which is just var counter: Int, then when its parent view passes a value to CounterView(counter:), it just passes a simple value. In other words, regardless of how CounterView set values to  CounterView.counter, its parent view’s counter does not change.

However, with @Binding, CounterView.counter connect to its parent view’s counter. So, when CounterView set a value to CounterView.counter, the parent view’s counter will change.

struct CounterView: View {
    @Binding var counter: Int
    
    var body: some View {
        HStack {
            Text(String(counter))
            Button(action: { self.counter -= 1 }, label: { Text("-") })
            Button(action: { self.counter += 1 }, label: { Text("+") })
        }
            .padding()
    }
}

struct CounterView_Previews: PreviewProvider {
    static var previews: some View {
        CounterView(counter: .constant(0))
    }
}

@State

ContentView.counter is declared with @State. So, when the value of counter is changed, ContentView will be set to invalidated, leading to ContentView will refresh. This effect is called two-way binding.

But, this only happens in ContentView. If we pass the value of counter to CounterView and want the view will be invalidated when CounterView changes the value of counter, we have to also use @Binding.

CoutnerView.counter is declared with @Binding. When ContentView passes counter to CounterView, we will need to add $ prefix.

struct ContentView: View {
    @State var counter = 0
    
    var body: some View {
        VStack {
            Text("Counter: \(counter)")
            CounterView(counter: $counter)
        }
    }
}

Conclusion

@State and @Binding are very important features in SwiftUI. They let SwiftUI achieve Two-way Binding. It is very easy to understand for developers to manage variables between a parent view and its child views. For web developers, this is a very common thing, but for App developers, this is new.