SwiftUI 声明式界面开发入门

什么是 SwiftUI

SwiftUI 是 Apple 在 2019 年推出的声明式界面框架，用于构建 iOS、macOS、watchOS 和 tvOS 应用。你只需描述界面“长什么样”以及依赖哪些数据，框架会自动处理布局、动画和状态变化时的界面更新。

与传统的 UIKit 命令式编程不同，你不再需要手动添加子视图、设置约束或监听回调。SwiftUI 代码更简洁、更易读，并且能够实时预览。

创建第一个 SwiftUI 项目

在 Xcode 中新建项目，选择 App 模板，语言选 Swift，界面选 SwiftUI。你会得到一个 ContentView.swift 文件，包含如下基础结构：

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

body 是一个计算属性，返回一个 View。所有 SwiftUI 视图都遵循 View 协议，必须实现 body。

核心视图组件

显示文字和图片

Text("欢迎学习 SwiftUI")
    .font(.largeTitle)
    .foregroundColor(.blue)

Image(systemName: "star.fill")
    .resizable()
    .frame(width: 50, height: 50)
    .foregroundColor(.yellow)

Text 显示文字，链式调用修饰符（Modifiers）改变外观。Image 可以加载系统符号或项目中的图片。

使用垂直和水平堆栈

VStack(alignment: .leading, spacing: 10) {
    Text("标题")
        .font(.headline)
    Text("副标题")
        .font(.subheadline)
}
.padding()

HStack {
    Image(systemName: "person")
    Text("用户名")
}

VStack 和 HStack 分别将子视图垂直或水平排列。可以通过参数控制对齐和间距。

按钮与交互

Button(action: {
    print("按钮被点击")
}) {
    Label("收藏", systemImage: "heart")
}
.buttonStyle(.borderedProminent)

Button 的 action 闭包处理点击事件，标签可以是任意视图组合。

列表与动态数据

List 用来展示一组可滚动数据，通常配合 Identifiable 模型使用。

struct Item: Identifiable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    let items = [
        Item(name: "苹果"),
        Item(name: "香蕉"),
        Item(name: "橘子")
    ]
    
    var body: some View {
        List(items) { item in
            Text(item.name)
        }
    }
}

如果数据不需要标识符，也可以用 ForEach 遍历范围。

状态管理：让界面动起来

@State

用于视图内部的可变状态，当值改变时，视图自动重绘。

struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("当前计数：\(count)")
                .font(.title)
            Button("加一") {
                count += 1
            }
        }
    }
}

@Binding

让子视图能够修改父视图的状态，实现双向绑定。

struct ParentView: View {
    @State private var isOn = false
    
    var body: some View {
        ToggleView(isOn: $isOn)
    }
}

struct ToggleView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle("开关", isOn: $isOn)
    }
}

使用 $ 前缀传递绑定。

@StateObject 和 @ObservedObject

当状态逻辑复杂时，使用 ObservableObject 协议和 @Published 属性包装。

class TaskManager: ObservableObject {
    @Published var tasks = ["写代码", "看文档"]
}

struct TaskListView: View {
    @StateObject private var manager = TaskManager()
    
    var body: some View {
        List(manager.tasks, id: \.self) { task in
            Text(task)
        }
    }
}

@StateObject 负责创建并持有实例，@ObservedObject 只负责观察从外部传入的对象。

导航与页面跳转

NavigationStack 实现页面堆栈导航。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("详细页面") {
                    DetailView()
                }
            }
            .navigationTitle("首页")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("这是详情页")
            .navigationTitle("详情")
    }
}

NavigationLink 包裹目标视图，点击后自动压栈并显示返回按钮。

修饰符与样式

修饰符可以链式调用，顺序有时会影响效果。常见修饰符：

• .padding() 添加内边距
• .background(Color.gray) 背景色
• .cornerRadius(10) 圆角
• .shadow(radius: 5) 阴影
• .frame(width: 100, height: 100) 固定尺寸

样式可通过 .buttonStyle()、.listStyle() 等统一修改。

预览与调试

Xcode 画布提供实时预览。修改代码后，预览会立即更新。还可以用不同设备、暗色模式、动态字体测试布局：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.dark)
            .previewDevice("iPhone 14 Pro")
    }
}

总结

SwiftUI 采用声明式语法，大幅简化了界面开发流程。理解 View 协议、常用容器、数据绑定和导航，你就可以开始构建自己的应用。通过多写代码并利用预览即时反馈，你会很快掌握这套现代框架。