swift_swiftui

SwiftUI

本技能涵盖用于构建声明式用户界面的 SwiftUI 框架概念。

概述

SwiftUI 是 Apple 的现代声明式框架，采用响应式、状态驱动的方式，为所有 Apple 平台构建用户界面。

可用参考资料

• 属性包装器 - @State、@Binding、@ObservedObject、@StateObject、@Environment

快速参考

状态管理决策树

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

属性包装器

包装器	是否拥有数据	数据类型	用途
@State	是	值类型	本地 UI 状态
@Binding	否	值类型	与父视图共享状态
@ObservedObject	否	引用类型	注入依赖项
@StateObject	是	引用类型	自有视图模型
@Environment	否	任意	共享资源

常见用法模式

// 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")
    }
}

最佳实践

1. 使用 @State 管理本地 UI 状态 - 开关、文本字段、计数器
2. 共享状态时向上提升状态 - 保持唯一事实来源
3. 使用 @StateObject 管理自有视图模型 - 在视图重建后仍能保留
4. 向子视图传递 @Binding - 实现双向数据流
5. 尽量精简 @State - 仅存储 UI 所需内容
6. 使用 @Environment 获取系统值 - 配色方案、区域设置等
7. 在主线程上访问 - 所有属性包装器都要求使用 @MainActor
8. 使用下划线初始化 - _count = State(initialValue:)

常见陷阱

陷阱	解决方案
直接初始化 @State	使用 _property = State(initialValue:)
在 init 中创建 @ObservedObject	改用 @StateObject
在后台线程上修改数据	分发到主队列
传递 @State 而不是 Binding	使用 $property 获取 Binding

更多信息

访问 https://swiftzilla.dev，获取完整的 SwiftUI 文档。