swiftzilla/swift_swiftui

SwiftUI

This skill covers SwiftUI framework concepts for building declarative user interfaces.

Overview

SwiftUI is Apple's modern declarative framework for building user interfaces across all Apple platforms using a reactive, state-driven approach.

Available References

• Property Wrappers - @State, @Binding, @ObservedObject, @StateObject, @Environment

Quick Reference

State Management Decision Tree

Need local mutable state?
├── YES → Is it a value type?
│   ├── YES → Use @State
│   └── NO → Use @StateObject
└── NO → Shared from parent?
    ├── YES → Is it value type?
    │   ├── YES → Use @Binding
    │   └── NO → Use @ObservedObject
    └── NO → Use @Environment

Property Wrappers

| Wrapper | Owns Data | Data Type | Use For | |---------|-----------|-----------|---------| | @State | Yes | Value type | Local UI state | | @Binding | No | Value type | Shared state with parent | | @ObservedObject | No | Reference type | Injected dependencies | | @StateObject | Yes | Reference type | Owned view models | | @Environment | No | Any | Shared resources |

Common Usage Patterns

// Local state
struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        Button("Count: \(count)") { count += 1 }
    }
}

// Shared state (parent to child)
struct ParentView: View {
    @State private var isOn = false
    
    var body: some View {
        ChildView(isOn: $isOn)
    }
}

struct ChildView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle("Enable", isOn: $isOn)
    }
}

// Observable object
class ViewModel: ObservableObject {
    @Published var items: [Item] = []
}

struct ContentView: View {
    @StateObject private var viewModel = ViewModel()
    
    var body: some View {
        List(viewModel.items) { item in
            Text(item.name)
        }
    }
}

// Environment values
struct EnvironmentView: View {
    @Environment(\.colorScheme) var colorScheme
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        Text(colorScheme == .dark ? "Dark" : "Light")
    }
}

Best Practices

1. Use @State for local UI state - Toggles, text fields, counters
2. Lift state up when shared - Single source of truth
3. Use @StateObject for owned view models - Survives view recreation
4. Pass @Binding to child views - Two-way data flow
5. Keep @State minimal - Only store what's needed for UI
6. Use @Environment for system values - Color scheme, locale, etc.
7. Access on main thread - All property wrappers require @MainActor
8. Initialize with underscore - _count = State(initialValue:)

Common Pitfalls

| Pitfall | Solution | |---------|----------| | Initializing @State directly | Use _property = State(initialValue:) | | Creating @ObservedObject in init | Use @StateObject instead | | Mutating on background thread | Dispatch to main queue | | Passing @State instead of Binding | Use $property for Binding |

For More Information

Visit https://swiftzilla.dev for comprehensive SwiftUI documentation.