1. 介绍
SwiftUI是由苹果公司推出的现代化用户界面（UI）框架，用于开发iOS、macOS、watchOS和tvOS应用程序。它于2019年首次发布，是苹果在Swift编程语言之上的一层抽象，旨在简化和改进应用程序的UI开发过程。相比UIKit具有多方面的优势和特点，这些特点使得它成为iOS和其他Apple平台开发中的强大工具：
声明式语法：
- SwiftUI：开发者通过简单的Swift代码描述UI的结构和外观，采用声明式语法。这种方式比传统的UIKit的命令式编程风格更直观和易于理解。
- UIKit：开发者需要编写大量的代码来配置和管理UI元素的属性和行为，这种方式容易导致代码的复杂性和难以维护性。
实时预览和交互性：
- SwiftUI：结合Xcode的实时预览功能，开发者可以即时查看和交互他们所写的UI代码，无需在模拟器或真机上运行应用程序。
- UIKit：开发者需要不断地在模拟器或真机上运行应用程序来查看UI效果，这增加了开发周期和调试的复杂性。
跨平台开发：
- SwiftUI：支持iOS、macOS、watchOS和tvOS平台的开发，可以共享大部分代码和UI逻辑，减少了重复工作。
- UIKit：虽然UIKit也能够跨平台开发，但是每个平台之间的UI代码和布局通常需要显著的适配和调整。
自动化布局：
- SwiftUI：提供了一系列简单且强大的布局视图（如VStack、HStack、ZStack等），帮助开发者轻松地实现复杂的UI布局。
- UIKit：虽然Auto Layout提供了强大的布局管理系统，但是配置和管理约束条件需要编写大量的代码，对于复杂布局来说较为繁琐。
状态管理和数据绑定：
- SwiftUI：引入了属性绑定（@State、@Binding）和状态对象（@StateObject、@ObservedObject），使得数据与UI视图之间的绑定更加简单和直观。
- UIKit：开发者需要手动管理数据和UI视图之间的同步，通常需要使用委托、通知或KVO等模式。
现代化设计支持：
- SwiftUI：内置支持现代化设计语言，如暗黑模式、动态字体调整等，能够自动响应系统级别的外观变化。
- UIKit：虽然也能够支持现代化设计语言，但是需要开发者显式地处理外观变化和主题切换。
综上所述，SwiftUI通过其声明式语法、实时预览、跨平台开发支持以及更简单的布局和状态管理等特点，显著提升了iOS开发的效率和开发体验，使得开发者能够更快速地构建出现代化和响应式的应用程序。
2. 环境搭建
2.1 Xcode安装和配置
从Mac AppStore或者苹果开发者网站 Sign In - Apple 下载并安装Xcode，可以依据需要，安装iPhone/iPad/Apple VisionPro模拟器，支持模拟器/真机调试。
2.2 创建第一个SwiftUI项目
打开Xcode，创建新项目，配置项目信息：
- 名称（e.g:"MyFirstSwiftUIApp"）
- 组织标识符（e.g:"com.yourcompany"）
- 选择开发团队
- 选择开发语言（Swift或Objective-C）和界面（Storyboard或SwiftUI）
即可创建并预览项目，运行第一个SwiftUI项目。
3. SwiftUI基础
3.1 SwiftUI的视图结构和声明式语法
3.1.1 视图结构
SwiftUI的视图结构是基于一种嵌套和组合的方式来构建UI界面的，核心的视图类型包括：
View：所有的UI组件都是视图（View）。视图可以是简单的文本、图像，也可以是更复杂的组合视图。
Container Views：这些视图用于组合其他视图，常见的容器视图包括：
- VStack：垂直堆栈，将子视图垂直排列。
- HStack：水平堆栈，将子视图水平排列。
- ZStack：层叠视图，将子视图层叠在一起。
- List：列表视图，显示动态内容列表。
Control Views：用于用户交互的视图，如按钮（Button）、滑块（Slider）、文本输入框（TextField）等。
Modifier ：修饰符可以应用于视图，以更改其外观或行为。例如，.foregroundColor(.blue)可以设置文本颜色为蓝色。
3.1.2 声明式语法
SwiftUI使用声明式语法来描述UI的外观和行为，与传统的命令式编程风格有显著不同。声明式语法的关键点包括：
简单和直观：您只需描述UI应该显示什么样子，而不是告诉计算机如何绘制它。
无需手动更新：当视图的状态（state）发生变化时，SwiftUI会自动更新视图的显示，而不需要手动管理UI的刷新。
数据驱动 ：视图通常会绑定到某些数据，当数据变化时，视图会相应地更新。这通过属性绑定（@State、@Binding）、状态对象（@StateObject、@ObservedObject）来实现。
组合性：可以将小的视图组合成更大的视图，形成复杂的UI结构。这种组合性使得UI的构建更加灵活和模块化。
预览功能：Xcode的实时预览功能允许开发者在编写代码时即时看到UI的外观，这大大提高了开发效率。
3.1.3 示例代码
下面是一个简单的SwiftUI代码示例，展示了视图结构和声明式语法的应用：
Swift
import SwiftUI
struct ContentView: View {
@State private var isButtonVisible = true // 属性包装器用于管理视图状态
var body: some View {
VStack { // 垂直堆栈视图 (VStack)
Text("Hello, SwiftUI!") // 简单文本视图
if isButtonVisible {
Button("Toggle Button") {
self.isButtonVisible.toggle()
}
}
}
.padding() // 修饰符，添加内边距
}
}
// 实时预览
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}3.2 布局和视图组合
在SwiftUI中，布局和视图组合是构建用户界面的关键部分。SwiftUI提供了一系列容器视图和布局视图，使得开发者能够以简单和直观的方式创建复杂的布局和组合视图。
3.2.1 布局视图
SwiftUI中的布局视图是用来排列和组织其他视图的容器，常用的布局视图包括：
- VStack：垂直堆栈视图，将子视图垂直排列。
Swift
VStack {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}- HStack：水平堆栈视图，将子视图水平排列。
Swift
HStack {
Text("Left")
Spacer()
Text("Right")
}- ZStack：层叠视图，将子视图层叠在一起。
Swift
ZStack {
Circle()
.foregroundColor(.blue)
.frame(width: 100, height: 100)
Text("Centered Text")
.foregroundColor(.white)
}- List：列表视图，用于显示动态内容列表。
Swift
List {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}- Form：表单视图，用于显示表单和输入控件。
Swift
Form {
TextField("Username", text: $username)
SecureField("Password", text: $password)
Button("Login") {
// Login action
}
}3.2.2 视图组合
视图组合是指将多个视图组合在一起形成复杂的UI结构，可以通过嵌套不同的布局视图和控件视图来实现。例如：
Swift
VStack {
Text("Welcome to SwiftUI!")
.font(.largeTitle)
HStack {
Image(systemName: "star.fill")
.foregroundColor(.yellow)
Text("SwiftUI Basics")
.font(.title)
}
Spacer()
Button("Get Started") {
// Action to start the app
}
.padding()
}
.padding()在这个例子中：
- 使用 VStack 将视图垂直堆叠。
- 在 VStack 中使用 HStack 将图标和标题水平排列。
- 使用 Spacer() 在垂直堆栈中创建一个可伸缩的空间。
- 在底部添加一个带有动作的按钮，并对其进行内边距修饰。
4. 基本组件
4.1 文本（Text）
Text 是用来显示文本内容的视图组件。它允许您在应用程序中轻松地显示静态和动态文本，同时支持对文本进行样式和布局设置。让我们来详细了解 Text 的用法和一些常见的样式设置。
4.1.1 基本用法
使用 Text 最简单的方式是传入一个字符串作为其内容：
Swift
struct ContentView: View {
var body: some View {
Text("Hello, SwiftUI!")
}
}4.1.2 样式设置
通过在 Text 上使用修饰符来设置文本的样式，比如字体、颜色、对齐方式等。
- 字体和颜色
Swift
Text("Welcome")
.font(.title)
.foregroundColor(.blue)- 对齐方式
Swift
Text("Centered Text")
.multilineTextAlignment(.center)- 加粗和斜体
Swift
Text("Bold and Italic")
.bold()
.italic()4.1.3 动态文本
在 Text 中使用字符串插值或者变量来显示动态文本内容。例如：
Swift
struct ContentView: View {
let username = "John Doe"
var body: some View {
Text("Welcome, \(username)!")
.font(.headline)
.foregroundColor(.green)
}
}4.1.4 多行文本
如果文本内容较长或者需要显示多行文本，您可以使用 Text 的 lineLimit(nil) 和 multilineTextAlignment() 来设置文本的行数限制和对齐方式。
Swift
Text("This is a long text that may span multiple lines depending on the available space.")
.lineLimit(nil)
.multilineTextAlignment(.leading)4.2 图像（Image）
Image 是用来显示图像内容的视图组件。它允许您在应用程序中加载和显示图像，并支持对图像进行大小调整、裁剪和其他样式设置。让我们来详细了解 Image 的用法和一些常见的样式设置。
4.2.1 基本用法
使用 Image 最简单的方式是指定图像的名称，SwiftUI会自动查找和加载相应的图像资源。通常，您需要将图像资源添加到项目的 Assets.xcassets 中。
Swift
struct ContentView: View {
var body: some View {
Image("yourImageName")
}
}4.2.2 图像样式和调整
- 图像调整
可以使用修饰符来调整图像的大小、比例和裁剪。
Swift
Image("yourImageName")
.resizable() // 可调整大小
.scaledToFit() // 按原始宽高比缩放适合父视图
.frame(width: 200, height: 200) // 设置框架大小- 图像修饰
可以对图像进行进一步的修饰，例如添加圆角、边框或者使用遮罩。
Swift
Image("yourImageName")
.resizable()
.clipShape(Circle()) // 添加圆形遮罩
.overlay(Circle().stroke(Color.blue, lineWidth: 4)) // 添加蓝色边框
.shadow(radius: 10) // 添加阴影效果4.2.3 加载网络图像
要加载来自URL的图像，可以使用 URLImage 库或者自定义 View。以下是一个简单的示例，演示如何加载网络图像：
Swift
struct RemoteImage: View {
var imageUrl: String
var body: some View {
if let url = URL(string: imageUrl), let imageData = try? Data(contentsOf: url) {
Image(uiImage: UIImage(data: imageData)!)
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
} else {
Text("Image not found")
}
}
}
struct ContentView: View {
var body: some View {
RemoteImage(imageUrl: "https://example.com/yourImage.jpg")
}
}4.3 按钮（Button）
Button 是用来创建用户可以点击的交互性控件。它允许您在应用程序中添加按钮，以触发各种操作和响应用户的输入。让我们来详细了解 Button 的用法和一些常见的设置。
4.3.1 基本用法
使用 Button 最简单的方式是在其构造函数中传入一个视图（通常是 Text 或者 Image），作为按钮的标签。
Swift
struct ContentView: View {
var body: some View {
Button(action: {
// 点击按钮后的操作
print("Button tapped!")
}) {
Text("Tap me!")
.font(.title)
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(10)
}
}
}4.3.2 按钮样式和修饰
- 自定义按钮样式
可以通过添加不同的修饰符来自定义按钮的外观和行为。
Swift
Button(action: {
// 点击按钮后的操作
}) {
HStack {
Image(systemName: "person.fill")
Text("Login")
.fontWeight(.semibold)
}
.padding()
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(8)
.shadow(radius: 5)
}- 动态按钮
可以根据视图状态来动态更改按钮的标签或样式。
Swift
struct ContentView: View {
@State private var isLogged = false
var body: some View {
Button(action: {
self.isLogged.toggle()
}) {
Text(isLogged ? "Logout" : "Login")
.fontWeight(.semibold)
.padding()
.foregroundColor(.white)
.background(isLogged ? Color.red : Color.blue)
.cornerRadius(8)
}
}
}4.3.3 按钮响应和动作
每个按钮都需要一个操作（action），当用户点击按钮时，这个操作会被触发。操作通常是一个闭包，用于定义按钮点击后的行为。
Swift
Button(action: {
print("Button tapped!")
}) {
Text("Tap me!")
}5. 列表和导航
5.1 列表视图（List）
List 是一个用于显示可滚动的内容列表的视图组件。List 适用于展示动态和静态数据，它支持多种自定义选项和交互功能。下面是对 List 视图的详细介绍，包括基本用法、动态数据展示和自定义样式。
5.1.1 基本用法
要创建一个简单的列表视图，您只需将视图内容传递给 List。可以用静态内容或动态数据来填充列表项。
- 静态内容
Swift
struct ContentView: View {
var body: some View {
List { // 显示了三个列表项
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
}
5.1.2 动态数据
通常情况下，List 用于展示动态数据，您可以将数据绑定到 List 中，从而实现数据驱动的UI更新。
- 基本动态数据
Swift
struct ContentView: View {
let items = ["Item 1", "Item 2", "Item 3", "Item 4"]
var body: some View {
List(items, id: \.self) { item in
Text(item)
}
}
}- 使用自定义数据模型
Swift
struct Item: Identifiable {
var id = UUID()
var name: String
var detail: String
}
struct ContentView: View {
let items = [
Item(name: "Item 1", detail: "Detail 1"),
Item(name: "Item 2", detail: "Detail 2"),
Item(name: "Item 3", detail: "Detail 3")
]
var body: some View {
List(items) { item in
VStack(alignment: .leading) {
Text(item.name)
.font(.headline)
Text(item.detail)
.font(.subheadline)
}
.padding()
}
}
}如果您的数据模型更加复杂，可以创建一个自定义的结构体并使用它。
5.1.3 自定义列表项
可以自定义每个列表项的视图，添加更多的视图元素和样式。
Swift
struct Item: Identifiable {
var id = UUID()
var name: String
var detail: String
}
struct ContentView: View {
let items = [
Item(name: "Item 1", detail: "Detail 1"),
Item(name: "Item 2", detail: "Detail 2"),
Item(name: "Item 3", detail: "Detail 3")
]
var body: some View {
List(items) { item in
VStack(alignment: .leading) {
Text(item.name)
.font(.headline)
Text(item.detail)
.font(.subheadline)
}
.padding()
}
}
}5.1.4 列表的交互
List 支持多种交互功能，如行的删除、移动等。
- 删除列表项
Swift
struct ContentView: View {
@State private var items = ["Item 1", "Item 2", "Item 3"]
var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(item)
}
.onDelete(perform: delete) // 修饰符允许用户从列表中删除项目
}
}
func delete(at offsets: IndexSet) {
items.remove(atOffsets: offsets)
}
}- 移动列表项
Swift
struct ContentView: View {
@State private var items = ["Item 1", "Item 2", "Item 3"]
var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(item)
}
.onMove(perform: move) // 修饰符允许用户移动列表中的项目
}
.navigationBarItems(trailing: EditButton()) // 进入编辑模式的按钮
}
func move(from source: IndexSet, to destination: Int) {
items.move(fromOffsets: source, toOffset: destination)
}
}5.2 导航视图（NavigationView）
NavigationView 是用于在应用程序中创建导航层次结构的视图容器。它允许用户通过导航链接（NavigationLink）在不同的视图之间切换，并提供了导航栏的功能，如标题、按钮和其他交互元素。下面是对 NavigationView 的详细介绍，包括基本用法、导航链接、以及自定义导航栏。
5.2.1 基本用法
NavigationView 包裹在其他视图的外层，提供导航和管理导航层次结构的功能。
Swift
struct ContentView: View {
var body: some View {
NavigationView {
Text("Welcome to SwiftUI")
.navigationTitle("Home")
}
}
}5.2.2 导航链接
NavigationLink 用于在视图之间创建导航链接。当用户点击链接时，会推送目标视图到导航堆栈中。
- 基本导航链接
Swift
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailView()) { //创建了一个可以点击的区域，点击时会导航到 DetailView
Text("Go to Detail View")
}
.padding()
}
.navigationTitle("Home")
}
}
}
struct DetailView: View { //显示了一个简单的文本，并设置了导航栏标题为 "Detail"
var body: some View {
Text("This is the detail view")
.navigationTitle("Detail")
}
}- 导航链接与数据
还可以通过导航链接传递数据到目标视图。
Swift
struct ContentView: View {
let items = ["Item 1", "Item 2", "Item 3"]
var body: some View {
NavigationView {
List(items, id: \.self) { item in
NavigationLink(destination: DetailView(item: item)) {
Text(item)
}
}
.navigationTitle("Items")
}
}
}
struct DetailView: View {// 接受一个 item 参数，通过 NavigationLink 将选中的项传递到目标视图。
let item: String
var body: some View {
Text("Detail for \(item)")
.navigationTitle(item)
}
}5.2.3 自定义导航栏
NavigationView 提供了一些方法来定制导航栏的外观和行为，例如添加按钮或修改标题。
- 添加导航栏按钮
Swift
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Welcome to SwiftUI")
}
.navigationTitle("Home")
.navigationBarItems(trailing: Button(action: {
// 右侧按钮的动作
print("Edit tapped")
}) {
Image(systemName: "pencil")
})
}
}
}- 使用自定义视图作为导航栏标题
可以使用自定义视图作为导航栏标题，以实现更多样的设计。
Swift
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Welcome to SwiftUI")
}
.navigationTitle("Home")
.navigationBarTitleDisplayMode(.inline)
.navigationBarItems(leading: HStack {
Image(systemName: "star.fill")
Text("Favorites")
})
}
}
}5.2.4 导航栏样式
可以调整导航栏的样式，例如背景颜色、透明度等。
Swift
struct ContentView: View {
init() {
UINavigationBar.appearance().backgroundColor = UIColor.systemTeal
UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]
}
var body: some View {
NavigationView {
VStack {
Text("Welcome to SwiftUI")
}
.navigationTitle("Home")
.navigationBarTitleDisplayMode(.large)
}
}
}