SwiftUI 是 Apple 在 2019 年推出的声明式 UI 框架，专为 Swift 设计，用于构建跨 Apple 平台（iOS、macOS、watchOS 和 tvOS）的用户界面。其核心思想是 声明式语法（Declarative Syntax），开发者只需描述 UI 应该是什么样子，而无需手动管理界面状态和更新逻辑。以下是 SwiftUI 声明式语法的详细介绍：

1. 声明式 vs 命令式

  • 命令式（如 UIKit）：通过代码一步步描述如何创建和更新 UI（例如 button.frame = CGRect(...)）。
  • 声明式（SwiftUI）：直接声明 UI 的最终状态（例如 Button("OK") { ... }），由框架自动处理布局和状态变化。

2. 核心语法特性

视图（View）作为基本单元

  • 所有 UI 组件都是 View 协议的结构体（值类型），通过组合这些视图构建界面。
  • 示例：
    struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!") // 声明一个文本视图
            .font(.title)
            .foregroundColor(.blue)
    }
}

修饰符（Modifiers）

  • 通过链式调用修饰符（如 .font(), .padding()）来配置视图属性。
  • 修饰符返回新视图，因此顺序可能影响最终效果：
    Text("Hello")
    .padding()      // 先添加内边距
    .background(.red) // 再设置背景色（作用于包含 padding 的视图）

状态管理

  • 使用 @State, @Binding, @ObservedObject 等属性包装器声明数据依赖。
  • 当状态变化时，SwiftUI 自动更新关联的视图。
    struct CounterView: View {
    @State private var count = 0 // 声明状态

    var body: some View {
        Button("Tap me: \(count)") {
            count += 1 // 修改状态会自动触发视图更新
        }
    }
}

布局系统

  • 基于父视图和子视图的协商机制（如 HStack, VStack, ZStack）。
  • 通过 Spacer(), frame(), alignment 等控制布局：
    HStack {
    Text("Left")
    Spacer() // 填充剩余空间
    Text("Right")
}
.padding()

条件与循环

  • 直接在视图中使用 if、switch 或 ForEach 动态生成 UI：
    VStack {
    if isLoggedIn {
        Text("Welcome!")
    } else {
        Button("Login") { ... }
    }
    ForEach(items) { item in
        ItemView(item: item)
    }
}

3. 数据流与绑定

  • 单向数据流：状态变化驱动 UI 更新。
  • 双向绑定：通过 $ 语法实现控件与状态的同步（如 TextField）：
    @State private var name = ""
TextField("Enter name", text: $name) // 双向绑定

4. 动画与过渡

  • 通过 .animation() 或 withAnimation 声明动画效果：
    Button("Toggle") {
    withAnimation {
        isVisible.toggle()
    }
}
.opacity(isVisible ? 1 : 0)

5. 与 UIKit/AppKit 交互

  • 通过 UIViewRepresentable 或 NSViewRepresentable 包装传统视图。

6. 预览（Preview）

  • 使用 PreviewProvider 实时预览 UI，无需编译运行：
    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 15")
    }
}

7. 代码示例：完整界面

struct TodoList: View {
    @State private var tasks = ["Task 1", "Task 2"]
    @State private var newTask = ""

    var body: some View {
        NavigationStack {
            VStack {
                HStack {
                    TextField("New task", text: $newTask)
                    Button("Add") {
                        tasks.append(newTask)
                        newTask = ""
                    }
                }
                .padding()

                List {
                    ForEach(tasks, id: \.self) { task in
                        Text(task)
                    }
                    .onDelete { indices in
                        tasks.remove(atOffsets: indices)
                    }
                }
            }
            .navigationTitle("Todo List")
        }
    }
}

优势总结

  1. 简洁性：代码更直观，减少样板代码。
  2. 实时性：Xcode 预览即时反馈。
  3. 安全性：状态管理避免手动同步错误。
  4. 性能优化：SwiftUI 自动处理差异更新。

SwiftUI 的声明式语法通过将 UI 视为状态的函数，大幅简化了界面开发流程，是 Apple 生态中现代 UI 开发的未来方向。

Last Updated::