SwiftUI Codes

Best SwiftUI Code Warehouse

Lesson 6: Data Binding and State Management

Objective:

Understand data binding and state management in SwiftUI.

Content:

1. @State

The @State property wrapper is used for local state management within a view.

Local State Management:

@State private var count = 0

var body: some View {
    VStack {
        Text("Count: \(count)")
        Button("Increment") {
            count += 1
        }
    }
}Copy Code

Explanation:

• @State private var count = 0: Declares a state variable to hold the count value.
• Text("Count: \(count)"): Displays the current count value.
• Button("Increment") { count += 1 }: Increments the count value by 1 when the button is tapped.

2. @Binding

The @Binding property wrapper allows a child view to read and write a value owned by a parent view.

Passing State to Child Views:

struct ParentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            ChildView(count: $count)
        }
    }
}

struct ChildView: View {
    @Binding var count: Int

    var body: some View {
        Button("Increment in Child") {
            count += 1
        }
    }
}Copy Code

Explanation:

• struct ParentView: View: Defines the parent view.
• @State private var count = 0: Declares a state variable to hold the count value.
• ChildView(count: $count): Passes a binding to the count state variable to the child view.
• struct ChildView: View: Defines the child view.
• @Binding var count: Int: Declares a binding to the count variable.
• Button("Increment in Child") { count += 1 }: Increments the count value by 1 when the button is tapped.

3. @ObservedObject and ObservableObject

The @ObservedObject property wrapper subscribes to an ObservableObject and updates the view when the object's data changes.

Managing State with @ObservedObject:

class Counter: ObservableObject {
    @Published var count = 0
}

struct ContentView: View {
    @ObservedObject var counter = Counter()

    var body: some View {
        VStack {
            Text("Count: \(counter.count)")
            Button("Increment") {
                counter.count += 1
            }
        }
    }
}Copy Code

Explanation:

• class Counter: ObservableObject: Defines a class that conforms to the ObservableObject protocol.
• @Published var count = 0: Declares a published property to hold the count value. Changes to this property will trigger updates to the view.
• @ObservedObject var counter = Counter(): Declares an observed object to hold the counter instance.
• Text("Count: \(counter.count)"): Displays the current count value from the counter instance.
• Button("Increment") { counter.count += 1 }: Increments the count value by 1 when the button is tapped.

4. @EnvironmentObject

The @EnvironmentObject property wrapper allows views to share an object that is accessible across the entire view hierarchy.

Shared State Across Views:

class Settings: ObservableObject {
    @Published var isDarkMode = false
}

struct ContentView: View {
    @EnvironmentObject var settings: Settings

    var body: some View {
        Toggle("Dark Mode", isOn: $settings.isDarkMode)
    }
}Copy Code

Explanation:

• class Settings: ObservableObject: Defines a class that conforms to the ObservableObject protocol.
• @Published var isDarkMode = false: Declares a published property to hold the dark mode setting. Changes to this property will trigger updates to the view.
• @EnvironmentObject var settings: Settings: Declares an environment object to hold the settings instance.
• Toggle("Dark Mode", isOn: $settings.isDarkMode): Displays a toggle switch that binds to the dark mode setting.