工作技术分享

核心特性

SwiftUI 从底层重新思考了 UI 构建方式，让界面开发更快、更安全、更直观。

★

声明式语法

只需描述界面应该「是什么」，框架自动处理「怎么做」。状态变化时，SwiftUI 高效地只更新真正需要变化的部分。

◯

原生跨平台

同一套代码运行在 iOS、iPadOS、macOS、watchOS、tvOS 和 visionOS。平台自适应 API 自动处理字体、布局和交互差异。

▶

实时预览

Xcode 中的 Canvas 实时渲染 UI，修改代码即刻看到效果。支持多个设备、深色模式、动态字号同时预览，零等待编译。

⇄

数据驱动

@State、@Binding、@Observable 让数据流清晰可控。数据变，界面自动刷新——不需要手动 reload、不需要 KVO、不需要 delegate。

⚙

Swift 并发

内置 async/await 和 MainActor 支持。网络请求、数据库操作、文件 I/O 自然地与 UI 状态绑定，告别回调地狱。

♦

组合式设计

每个 View 都是一个轻量的值类型 struct。将小 View 像搭积木一样组合成复杂界面，拆解和复用都极其简单。

更少的代码，更多的表达

同样的功能，SwiftUI 可以用 UIKit 约 1/4 的代码量完成。声明式语法让意图一目了然。

UIKit

class ViewController: UIViewController {

    let label = UILabel()
    let button = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        label.text = "Hello"
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)

        button.setTitle("Tap", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.addTarget(self, action: #selector(tap),
                         for: .touchUpInside)
        button.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(button)

        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(
                equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(
                equalTo: view.centerYAnchor),
            button.topAnchor.constraint(
                equalTo: label.bottomAnchor,
                constant: 20),
            button.centerXAnchor.constraint(
                equalTo: view.centerXAnchor)
        ])
    }

    @objc func tap() { /* ... */ }
}

SwiftUI

struct ContentView: View {
    @State private var counter = 0

    var body: some View {
        VStack(spacing: 20) {
            Text("Hello")
            Button("Tap") {
                counter += 1
            }
        }
    }
}

一个列表，几行代码

构建一个支持滑动删除、自动行高、分组样式的完整功能列表。

import SwiftUI

struct Task: Identifiable {
    let id = UUID()
    var title: String
    var isCompleted: Bool
}

struct TaskListView: View {
    // @State 自动触发 UI 刷新
    @State private var tasks = [
        Task(title: "完成项目评审", isCompleted: false),
        Task(title: "回复邮件",    isCompleted: true),
        Task(title: "更新文档",    isCompleted: false)
    ]
    @State private var newTask = ""

    var body: some View {
        NavigationStack {
            List {
                // 每个 section 自动获得 iOS 原生分组样式
                Section("待办事项") {
                    ForEach(tasks) { task in
                        HStack {
                            Image(systemName: task.isCompleted
                                ? "checkmark.circle.fill"
                                : "circle")
                                .foregroundStyle(task.isCompleted
                                    ? .green : .gray)

                            Text(task.title)
                                .strikethrough(task.isCompleted)
                        }
                        // 点一下即切换完成状态
                        .onTapGesture { toggle(task) }
                    }
                    // 支持原生滑动删除
                    .onDelete(perform: delete)
                }

                Section("添加任务") {
                    TextField("输入新任务", text: $newTask)
                        .onSubmit { addTask() }
                }
            }
            .navigationTitle("任务列表")
        }
    }

    private func toggle(_ task: Task) {
        guard let i = tasks.firstIndex(where: { $0.id == task.id })
            else { return }
        tasks[i].isCompleted.toggle()
    }

    private func delete(at offsets: IndexSet) {
        tasks.remove(atOffsets: offsets)
    }

    private func addTask() {
        let trimmed = newTask.trimmingCharacters(in: .whitespaces)
        guard !trimmed.isEmpty else { return }
        tasks.append(Task(title: trimmed, isCompleted: false))
        newTask = ""
    }
}

数据流：清晰可控

SwiftUI 的属性包装器让状态管理变得简单直观。每个包装器有明确的职责边界。

S

@State

本地视图状态。当值改变时自动重绘视图。适用于 String、Bool、Int 等简单值类型。框架负责存储和生命周期。

B

@Binding

双向引用父视图的 @State。让子视图可以读取并修改父视图的状态，而无需知道数据来源，实现视图解耦。

O

@Observable

iOS 17+ 全新宏驱动的观察机制。替代 ObservableObject/@Published，自动追踪属性访问，零样板代码。

E

@Environment

从视图层级中读取共享值（如颜色方案、尺寸类别、自定义环境值）。无需逐层手动传递，自动注入。

A

@AppStorage

直接读写 UserDefaults，变更自动触发视图刷新。适合轻量级的用户偏好存储，如主题、排序方式。

Q

@Query

与 SwiftData 深度集成。用一行声明即可从持久化存储中获取数据，结果自动保持与数据库同步。

持续演进

自 2019 年发布以来，SwiftUI 每个版本都在快速进化。

2019 · iOS 13

首次亮相

声明式语法、List、NavigationView、实时预览。宣告 Apple UI 框架的新纪元。

2020 · iOS 14

走向成熟

LazyVGrid/HGrid、Map、ProgressView、原生 App Clip 支持。macOS 上迎来完整 SwiftUI 生命周期。

2021 · iOS 15

文本与搜索

Markdown 原生渲染、.searchable 修饰符、下拉刷新、FocusState 键盘管理、Swipe Actions。

2022 · iOS 16

导航革命

NavigationStack / NavigationSplitView 替代旧导航、Charts 框架、ShareLink、Layout 协议。

2023 · iOS 17

观察与动画

@Observable 宏、SwiftData、ScrollView 新 API、sensoryFeedback、PhaseAnimator、KeyframeAnimator。

2024 · iOS 18

交互升级

Tab 重设计、新的 MeshGradient、文字动画、混合色彩、Animated 底栏、增强的 Swift Charts API。

最佳实践

🧩 小而专注的 View

将复杂界面拆分为多个小 View 结构体。每个 View 只负责一件事。拆分后的代码在 SwiftUI 中没有性能损耗——因为 View 是值类型。

🔄 单一数据源

避免多处存储相同的状态。用 @Binding 传递引用，用 @Observable 集中管理。不要让 UI 内部出现独立于业务逻辑的状态副本。

⏱ 异步放在 Task 里

用 .task { } 修饰符替代 onAppear + DispatchQueue。task 自动支持取消，当视图消失时会自动中断进行中的异步操作。

🎨 善用 Modifier 链

SwiftUI 的修饰符顺序决定最终渲染效果。优先用 .foregroundStyle() 替代废弃的 .foregroundColor()，用语义化的字体 API 替代硬编码大小。

📱 提前规划跨平台

即使目前只做 iOS，也要用 #if os() 或平台自适应 API。避免用 UIScreen 等单平台 API——它们在未来扩展时会变成技术债。

🧪 用 Preview 驱动开发

在 Model 层注入模拟数据，用 Preview 同时验证多种状态（加载中、空数据、错误态、深色模式）。这比在真机上调试快一个数量级。