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代码示例，展示了视图结构和声明式语法的应用：
import SwiftUIstruct 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：垂直堆栈视图，将子视图垂直排列。VStack { Text("Item 1") Text("Item 2") Text("Item 3")}HStack { Text("Left") Spacer() Text("Right")}ZStack { Circle() .foregroundColor(.blue) .frame(width: 100, height: 100) Text("Centered Text") .foregroundColor(.white)}List { Text("Item 1") Text("Item 2") Text("Item 3")}Form { TextField("Username", text: $username) SecureField("Password", text: $password) Button("Login") { // Login action }}3.2.2 视图组合
视图组合是指将多个视图组合在一起形成复杂的UI结构，可以通过嵌套不同的布局视图和控件视图来实现。例如：
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 最简单的方式是传入一个字符串作为其内容：
struct ContentView: View { var body: some View { Text("Hello, SwiftUI!") }}4.1.2 样式设置
通过在 Text 上使用修饰符来设置文本的样式，比如字体、颜色、对齐方式等。
字体和颜色Text("Welcome") .font(.title) .foregroundColor(.blue)Text("Centered Text") .multilineTextAlignment(.center)Text("Bold and Italic") .bold() .italic()4.1.3 动态文本
在 Text 中使用字符串插值或者变量来显示动态文本内容。例如：
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() 来设置文本的行数限制和对齐方式。
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 中。
struct ContentView: View { var body: some View { Image("yourImageName") }}4.2.2 图像样式和调整
图像调整可以使用修饰符来调整图像的大小、比例和裁剪。
Image("yourImageName") .resizable() // 可调整大小 .scaledToFit() // 按原始宽高比缩放适合父视图 .frame(width: 200, height: 200) // 设置框架大小可以对图像进行进一步的修饰，例如添加圆角、边框或者使用遮罩。
Image("yourImageName") .resizable() .clipShape(Circle()) // 添加圆形遮罩 .overlay(Circle().stroke(Color.blue, lineWidth: 4)) // 添加蓝色边框 .shadow(radius: 10) // 添加阴影效果4.2.3 加载网络图像
要加载来自URL的图像，可以使用 URLImage 库或者自定义 View。以下是一个简单的示例，演示如何加载网络图像：
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），作为按钮的标签。
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 按钮样式和修饰
自定义按钮样式可以通过添加不同的修饰符来自定义按钮的外观和行为。
Button(action: { // 点击按钮后的操作}) { HStack { Image(systemName: "person.fill") Text("Login") .fontWeight(.semibold) } .padding() .foregroundColor(.white) .background(Color.green) .cornerRadius(8) .shadow(radius: 5)}可以根据视图状态来动态更改按钮的标签或样式。
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），当用户点击按钮时，这个操作会被触发。操作通常是一个闭包，用于定义按钮点击后的行为。
Button(action: { print("Button tapped!")}) { Text("Tap me!")}5. 列表和导航
5.1 列表视图（List）
List 是一个用于显示可滚动的内容列表的视图组件。List 适用于展示动态和静态数据，它支持多种自定义选项和交互功能。下面是对 List 视图的详细介绍，包括基本用法、动态数据展示和自定义样式。
5.1.1 基本用法
要创建一个简单的列表视图，您只需将视图内容传递给 List。可以用静态内容或动态数据来填充列表项。
静态内容struct ContentView: View { var body: some View { List { // 显示了三个列表项 Text("Item 1") Text("Item 2") Text("Item 3") } }}
5.1.2 动态数据
通常情况下，List 用于展示动态数据，您可以将数据绑定到 List 中，从而实现数据驱动的UI更新。
基本动态数据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) } }}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 自定义列表项
可以自定义每个列表项的视图，添加更多的视图元素和样式。
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 支持多种交互功能，如行的删除、移动等。
删除列表项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) }}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 包裹在其他视图的外层，提供导航和管理导航层次结构的功能。
struct ContentView: View { var body: some View { NavigationView { Text("Welcome to SwiftUI") .navigationTitle("Home") } }}5.2.2 导航链接
NavigationLink 用于在视图之间创建导航链接。当用户点击链接时，会推送目标视图到导航堆栈中。
基本导航链接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") }}还可以通过导航链接传递数据到目标视图。
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 提供了一些方法来定制导航栏的外观和行为，例如添加按钮或修改标题。
添加导航栏按钮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") }) } }}可以使用自定义视图作为导航栏标题，以实现更多样的设计。
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 导航栏样式
可以调整导航栏的样式，例如背景颜色、透明度等。
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) } }}