SwiftUI 入门

SwiftUI 是 Apple 2019 年推出的声明式 UI 框架：View 描述界面，@State / @Binding 驱动更新。对照 /roadmaps/ios「SwiftUI」节点；新项目默认选型，与 React 组件模型高度相似。

学习目标

• 理解 View 协议与 body 计算属性
• 使用 @State、@Binding、@ObservedObject 管理状态
• 实现 NavigationStack 导航与 List 列表
• 对照 React 理解声明式 UI 心智模型

核心概念

基础 View 与状态

import SwiftUI

struct LessonRow: View {
    let lesson: Lesson
    @Binding var isSelected: Bool

    var body: some View {
        HStack {
            Image(systemName: lesson.completed ? "checkmark.circle.fill" : "circle")
                .foregroundStyle(lesson.completed ? .green : .secondary)
            Text(lesson.title)
            Spacer()
            if isSelected {
                Image(systemName: "chevron.right")
            }
        }
        .contentShape(Rectangle())
        .onTapGesture { isSelected.toggle() }
    }
}

struct LessonListView: View {
    @State private var lessons: [Lesson] = [
        Lesson(id: 1, title: "Swift 基础", completed: true),
        Lesson(id: 2, title: "SwiftUI 状态", completed: false),
    ]
    @State private var selectedId: Int?

    var body: some View {
        NavigationStack {
            List(lessons) { lesson in
                NavigationLink(value: lesson.id) {
                    LessonRow(
                        lesson: lesson,
                        isSelected: .constant(selectedId == lesson.id)
                    )
                }
            }
            .navigationTitle("课时")
            .navigationDestination(for: Int.self) { id in
                if let lesson = lessons.first(where: { $0.id == id }) {
                    LessonDetailView(lesson: lesson)
                }
            }
        }
    }
}

struct LessonDetailView: View {
    let lesson: Lesson

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(lesson.title).font(.title)
            Text(lesson.completed ? "已完成" : "进行中")
                .foregroundStyle(.secondary)
        }
        .padding()
        .navigationTitle("详情")
    }
}

@State 拥有数据并触发重绘；@Binding 双向绑定子视图；NavigationStack 替代旧版 NavigationView。

状态层级

属性包装器	用途
@State	视图私有简单值
@Binding	父视图传入的可变引用
@ObservedObject	外部 ObservableObject
@StateObject	视图创建并持有的 ObservableObject
@EnvironmentObject	全局注入（类似 React Context）

预览与修饰符

#Preview {
    LessonListView()
}

SwiftUI 用 Modifier 链式组合样式（.font()、.padding()），类似 React 的 props 层层传递。

与 Java/Spring 或 React 对照

SwiftUI	React	Spring (后端)
View / body	函数组件 + JSX	—
@State	useState	—
@Binding	受控组件 props	—
@EnvironmentObject	Context	—
List + ForEach	map 渲染列表	—
@Published + ObservableObject	外部 store (Zustand)	—

SwiftUI 无虚拟 DOM，依赖 Diff 最小化更新；React 有 Fiber 调度，概念类似。

练习

• 用 SwiftUI 实现 Todo 列表，支持切换完成状态
• 添加 @StateObject ViewModel 管理 lessons 数组
• 对照 react-props-state 比较状态设计

小结

SwiftUI = 声明式 View + 属性包装器状态。 下一课架构模式。见 ios-essentials。