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。