距离上一次学习SwiftUI已经过去几年的时间了，好多知识点都些忘记了，最近刚好有有一些时间就好好的在从零回顾一下吧。
1.1 什么是 SwiftUI？
官方定义
根据 Apple 官方文档，SwiftUI 是一个现代的声明式 UI 框架，它允许开发者使用 Swift 语言创建跨 Apple 平台的用户界面。
SwiftUI 的核心优势
- 声明式语法：描述界面"是什么"而不是"怎么做"
- 跨平台：一次编写，在 iOS、iPadOS、macOS、watchOS 和 tvOS 上运行
- 实时预览：在 Xcode 中实时查看界面效果
- 与 Swift 语言深度集成：充分利用 Swift 的类型安全和现代特性
- 自动适配：自动处理不同尺寸设备的布局
与 UIKit 的对比
| 特性 | SwiftUI | UIKit |
|---|---|---|
| 编程范式 | 声明式 | 命令式 |
| 代码风格 | 简洁、直观 | 冗长、命令式 |
| 布局系统 | 自动布局，基于栈 | Auto Layout，需要手动设置约束 |
| 状态管理 | 自动状态同步 | 手动更新 UI |
| 跨平台 | 支持所有 Apple 平台 | 主要针对 iOS/tvOS |
| 开发效率 | 高 | 相对较低 |
1.2 Xcode 开发环境配置
系统要求
- macOS：最新版本（推荐 macOS Sonoma 或更高）
- Xcode：最新版本（推荐 Xcode 15 或更高）
- Swift：Swift 5.7 或更高
- iOS：iOS 15.0 或更高（如果需要支持旧版本，最低可到 iOS 13.0）
安装 Xcode
- 打开 App Store
- 搜索 "Xcode"
- 点击 "获取" 进行安装
- 安装完成后，打开 Xcode 并同意许可协议
安装额外组件
首次打开 Xcode 时，会提示安装额外的组件，包括：
- 命令行工具
- 模拟器运行时
- 其他必要的开发工具
1.3 创建你的第一个 SwiftUI 项目
步骤 1：打开 Xcode
步骤 2：创建新项目
- 点击 "Create a new Xcode project"
- 选择 "iOS" 标签页
- 选择 "App" 模板
- 点击 "Next"
步骤 3：配置项目信息
- Product Name：输入项目名称，例如 "SwiftUIHelloWorld"
- Team：选择你的开发团队（如果没有，可以选择 "None"）
- Organization Identifier：输入你的组织标识符，例如 "com.yourname"
- Interface：选择 "SwiftUI"
- Language：选择 "Swift"
- Life Cycle：选择 "SwiftUI App"
- 取消勾选 "Use Core Data"（暂时不需要）
- 点击 "Next"
步骤 4：选择保存位置
选择一个合适的文件夹保存项目，然后点击 "Create"
步骤 5：项目结构介绍
创建完成后，你会看到以下文件结构：
- SwiftUIHelloWorldApp.swift：应用程序入口
- ContentView.swift：主视图
- Assets.xcassets：资源文件
- Info.plist：应用配置
1.4 认识 Xcode 预览功能
预览面板
Xcode 右侧的预览面板是 SwiftUI 最强大的特性之一，它允许你实时查看界面效果。
使用预览
- 打开
ContentView.swift文件 - 确保右侧的预览面板可见（如果不可见，点击 Xcode 顶部的 "Editor" → "Canvas"）
- 你会看到
ContentView的实时预览 - 修改代码，预览会自动更新
预览配置
你可以在预览代码中添加多个预览，例如：
swift
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
.previewDisplayName("默认预览")
ContentView()
.previewDisplayName("暗黑模式")
.preferredColorScheme(.dark)
ContentView()
.previewDisplayName("iPhone 15 Pro")
.previewDevice(PreviewDevice(rawValue: "iPhone 15 Pro"))
}
}
}预览快捷键
- Option + Command + P：刷新预览
- Command + K：清除构建
1.5 SwiftUI 项目结构解析
应用程序入口
SwiftUIHelloWorldApp.swift 是应用的入口点，它定义了应用的结构：
swift
import SwiftUI
@main
struct SwiftUIHelloWorldApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}主视图
ContentView.swift 是应用的主视图：
swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
}
}
#Preview {
ContentView()
}关键概念解析
- @main：标记应用程序的入口点
- App 协议：定义应用的结构
- Scene：表示应用的一个场景
- WindowGroup：创建应用的窗口
- View 协议：所有 SwiftUI 视图必须遵循的协议
- body：计算属性，返回视图的内容
- #Preview：Xcode 15+ 的新语法，用于创建预览
资源管理
- Assets.xcassets：管理应用的图片、颜色等资源
- Info.plist：应用的配置信息，如应用名称、版本号等
实战：创建一个简单的欢迎页面
需求分析
创建一个包含以下元素的欢迎页面：
- 应用图标
- 应用名称
- 欢迎标语
- 开始按钮
代码实现
swift
import SwiftUI
struct WelcomeView: View {
// 状态变量，用于控制是否显示欢迎页面
@State private var isWelcomeShown = true
var body: some View {
if isWelcomeShown {
VStack(spacing: 20) {
// 应用图标
Image(systemName: "star.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100, height: 100)
.foregroundStyle(.yellow)
// 应用名称
Text("欢迎使用 SwiftUI")
.font(.largeTitle)
.fontWeight(.bold)
// 欢迎标语
Text("一个现代、简洁的 UI 框架")
.font(.subheadline)
.foregroundStyle(.secondary)
// 开始按钮
Button("开始探索") {
// 点击按钮后隐藏欢迎页面
isWelcomeShown = false
}
.buttonStyle(.borderedProminent)
.tint(.blue)
}
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
LinearGradient(
colors: [.blue.opacity(0.1), .purple.opacity(0.1)],
startPoint: .top,
endPoint: .bottom
)
)
} else {
// 主内容页面
VStack {
Text("探索 SwiftUI 的世界！")
.font(.title)
Text("这里是你的应用主界面")
.foregroundStyle(.secondary)
}
.padding()
}
}
}
#Preview {
WelcomeView()
}代码解析
- @State：用于创建视图的本地状态
- VStack：垂直堆叠视图
- Image：显示图片，使用系统图标
- Text：显示文本
- Button：创建按钮，带有点击动作
- LinearGradient：创建线性渐变背景
- 条件渲染：使用 if-else 控制显示不同的内容
小结
本章介绍了 SwiftUI 的基本概念和开发环境搭建，包括：
- SwiftUI 的核心优势和与 UIKit 的对比
- Xcode 的安装和配置
- 创建第一个 SwiftUI 项目的步骤
- Xcode 预览功能的使用
- SwiftUI 项目的基本结构
- 一个简单欢迎页面的实现
通过本章的学习，你已经了解了 SwiftUI 的基本概念和开发环境，为后续的学习打下了基础。