SwiftUI 开发技能

指令

使用此技能编写声明式、响应式的 UI 代码。始终遵循 iOS 人机交互指南 (HIG)。

此技能的功能

• UI 构建: 使用 View, Modifier, Layout 容器构建界面。
• 状态管理: 使用 Observation 框架 (@Observable, @State, @Environment) 管理数据流。
• 导航: 使用 NavigationStack 和 navigationDestination 处理路由。
• 预览: 使用 #Preview 宏快速迭代 UI。
• 持久化集成: 将 SwiftData (@Query) 无缝集成到视图中。

何时使用此技能

触发场景：当用户提出以下请求时，使用本 skill：

• 编写 .swift 视图文件时。
• 设计 App 的导航结构时。
• 处理动画和转场效果时。
• 将 ViewModel 的数据绑定到界面时。

示例

示例 1：基于 Observation 的 ViewModel 和 View

@Observable
class CounterModel {
    var count = 0
    
    func increment() {
        count += 1
    }
}

struct CounterView: View {
    @State private var model = CounterModel()
    
    var body: some View {
        VStack {
            Text("Count: \(model.count)")
                .font(.largeTitle)
            Button("Add") {
                model.increment()
            }
        }
    }
}

#Preview {
    CounterView()
}

示例 2：使用 NavigationStack 进行类型安全导航

enum Route: Hashable {
    case profile(id: String)
    case settings
}

struct ContentView: View {
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            List {
                NavigationLink("Go to Profile", value: Route.profile(id: "123"))
                NavigationLink("Settings", value: Route.settings)
            }
            .navigationDestination(for: Route.self) { route in
                switch route {
                case .profile(let id):
                    ProfileView(userId: id)
                case .settings:
                    SettingsView()
                }
            }
        }
    }
}

最佳实践

• Single Source of Truth: 始终保持单一数据源。
• Environment: 使用 .environment() 注入全局依赖或主题数据。
• Avoid Massive Views: 将复杂的视图拆分为小的组件视图 (struct SubView: View)。
• State vs Binding: 当视图拥有数据时使用 @State，当视图仅修改父视图数据时使用 @Binding (@Bindable for Observable)。
• Computed Properties: 使用计算属性来派生 UI 状态，而不是手动同步多个状态变量。

备注

• 对于 IOS 17+，@Observable 是首选。对于旧版本支持，可能需要退回到 ObservableObject，但应明确标注。
• 所有的 UI 更新必须在主线程执行（SwiftUI 通常会自动处理，但从后台任务回调时要注意）。