本篇目标

理解 SwiftUI 的声明式语法，掌握 View 协议与视图构建方式，能创建和组合基础视图，了解 SwiftUI 的预览与实时刷新机制。

一、SwiftUI 是什么

SwiftUI 是 Apple 在 2019 年推出的新一代界面框架，用声明式语法构建用户界面。

声明式 vs 命令式：

  • 命令式（UIKit）：告诉程序每一步怎么做。

  • 声明式（SwiftUI）：告诉程序界面应该是什么样。

SwiftUI 的优势：

  • 代码更简洁，可读性高

  • 实时预览，开发效率高

  • 跨平台（iOS、iPadOS、macOS、watchOS、tvOS）

  • 自动适配深色模式、动态字体、本地化

  • 数据驱动界面，状态变化自动刷新

SwiftUI 的局限：

  • 部分复杂界面仍需 UIKit 桥接

  • 最低支持 iOS 13

  • 部分高级功能依赖新系统版本

二、View 协议

SwiftUI 中所有界面元素都是 View。

protocol View {
    associatedtype Body: View
    var body: Body { get }
}

自定义视图：

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

说明：

  • struct 定义视图，遵循 View 协议。

  • body 是计算属性，返回 some View。

  • some View 表示不透明返回类型，隐藏具体类型。

为什么用 struct：

  • 值类型，轻量，适合频繁创建。

  • 无继承，用组合代替。

  • 状态管理更清晰。

三、基础视图

Text

显示文字。

Text("Hello, World!")

Image

显示图片，支持系统图标和资源图片。

Image(systemName: "star.fill")
Image("logo")

Button

可点击按钮。

Button("点击我") {
    print("按钮被点击")
}

其他常用视图

  • Toggle：开关

  • Slider：滑块

  • TextField：文本输入

  • List：列表

  • VStack / HStack / ZStack：布局容器

四、视图修饰符

修饰符用于修改视图的外观和行为。

Text("Hello")
    .font(.title)
    .foregroundColor(.blue)
    .padding()

常用修饰符：

修饰符

作用

.font()

设置字体

.foregroundColor()

设置前景色

.padding()

添加内边距

.background()

设置背景

.cornerRadius()

设置圆角

.frame()

设置尺寸

.opacity()

设置透明度

修饰符链：

修饰符按顺序应用，顺序不同效果可能不同。

Text("Hello")
    .padding()
    .background(Color.blue)
    .cornerRadius(10)

五、视图组合

SwiftUI 通过组合小视图构建复杂界面。

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.blue)
            Text("Hello, SwiftUI!")
                .font(.title)
            Text("从零开始学习 iOS 开发")
                .font(.subheadline)
                .foregroundColor(.gray)
        }
        .padding()
    }
}

提取子视图：

struct HeaderView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.blue)
            Text("Hello, SwiftUI!")
                .font(.title)
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            HeaderView()
            Text("从零开始学习 iOS 开发")
                .font(.subheadline)
                .foregroundColor(.gray)
        }
        .padding()
    }
}

六、预览与实时刷新

Xcode Preview

SwiftUI 支持实时预览，修改代码后界面自动更新。

打开预览：

  1. 打开包含 #Preview 的文件。

  2. 点击右上角 Adjust Editor Options。

  3. 选择 Canvas。

  4. 或使用快捷键 Command + Option + Enter。

#Preview 宏：

#Preview {
    ContentView()
}

多设备预览：

#Preview {
    ContentView()
}

#Preview("iPad") {
    ContentView()
        .previewDevice("iPad Pro (11-inch)")
}

预览不刷新解决：

  • 点击 Resume

  • 清理项目：Command + Shift + K

  • 重启 Xcode

  • 检查代码是否有编译错误

七、SwiftUI 与 UIKit 的关系

  • SwiftUI 是未来方向，新项目优先使用。

  • UIKit 仍可用于复杂界面、旧系统兼容。

  • 可以通过 UIViewRepresentable 在 SwiftUI 中使用 UIKit 视图。

  • 也可以通过 UIHostingController 在 UIKit 中使用 SwiftUI 视图。

八、避坑指南

  • body 中不要写复杂逻辑：只负责描述界面。

  • 修饰符顺序很重要：先 padding 再 background 与反过来效果不同。

  • 预览不刷新先检查编译错误：编译错误会导致预览失败。

  • 不要在 body 中创建状态：状态应使用 @State 等属性包装器。

  • some View 不能返回不同类型：需要条件返回时用 Group 或 AnyView。

九、检查清单

  • [ ] 理解声明式与命令式的区别

  • [ ] 能定义遵循 View 协议的视图

  • [ ] 会使用 Text、Image、Button 基础视图

  • [ ] 掌握常用修饰符

  • [ ] 能组合视图构建界面

  • [ ] 会使用 #Preview 预览

  • [ ] 了解 SwiftUI 与 UIKit 的关系