SwiftUI入门篇

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代码示例，展示了视图结构和声明式语法的应用：

1. import SwiftUI
3. struct ContentView: View {
4.     @State private var isButtonVisible = true  // 属性包装器用于管理视图状态
5.     
6.     var body: some View {
7.         VStack { // 垂直堆栈视图 (VStack)
8.             Text("Hello, SwiftUI!") // 简单文本视图
9.             
10.             if isButtonVisible {
11.                 Button("Toggle Button") {
12.                     self.isButtonVisible.toggle()
13.                 }
14.             }
15.         }
16.         .padding() // 修饰符，添加内边距
17.     }
18. }
19. // 实时预览
20. struct ContentView_Previews: PreviewProvider {
21.     static var previews: some View {
22.         ContentView()
23.     }
24. }

复制代码

3.2 布局和视图组合

在SwiftUI中，布局和视图组合是构建用户界面的关键部分。SwiftUI提供了一系列容器视图和布局视图，使得开发者能够以简单和直观的方式创建复杂的布局和组合视图。

3.2.1 布局视图

SwiftUI中的布局视图是用来分列和组织其他视图的容器，常用的布局视图包罗：

• VStack：垂直堆栈视图，将子视图垂直分列。
  

1. VStack {
2.     Text("Item 1")
3.     Text("Item 2")
4.     Text("Item 3")
5. }

复制代码

• HStack：程度堆栈视图，将子视图程度分列。
  

1. HStack {
2.     Text("Left")
3.     Spacer()
4.     Text("Right")
5. }

复制代码

• ZStack：层叠视图，将子视图层叠在一起。
  

1. ZStack {
2.     Circle()
3.         .foregroundColor(.blue)
4.         .frame(width: 100, height: 100)
5.     
6.     Text("Centered Text")
7.         .foregroundColor(.white)
8. }

复制代码

• List：列表视图，用于显示动态内容列表。
  

1. List {
2.     Text("Item 1")
3.     Text("Item 2")
4.     Text("Item 3")
5. }

复制代码

• Form：表单视图，用于显示表单和输入控件。
  

1. Form {
2.     TextField("Username", text: $username)
3.     SecureField("Password", text: $password)
4.     Button("Login") {
5.         // Login action
6.     }
7. }

复制代码

3.2.2 视图组合

视图组合是指将多个视图组合在一起形成复杂的UI结构，可以通过嵌套差别的布局视图和控件视图来实现。比方：​​​​​​​

1. VStack {
2.     Text("Welcome to SwiftUI!")
3.         .font(.largeTitle)
4.     
5.     HStack {
6.         Image(systemName: "star.fill")
7.             .foregroundColor(.yellow)
8.         Text("SwiftUI Basics")
9.             .font(.title)
10.     }
11.     
12.     Spacer()
13.     
14.     Button("Get Started") {
15.         // Action to start the app
16.     }
17.     .padding()
18. }
19. .padding()

复制代码

在这个例子中：

• 使用 VStack 将视图垂直堆叠。
  

• 在 VStack 中使用 HStack 将图标和标题程度分列。
  

• 使用 Spacer() 在垂直堆栈中创建一个可伸缩的空间。
  

• 在底部添加一个带有动作的按钮，并对其进行内边距修饰。
  

4. 基本组件

4.1 文本（Text）

Text 是用来显示文本内容的视图组件。它答应您在应用步伐中轻松地显示静态和动态文本，同时支持对文本进行样式和布局设置。让我们来详细了解 Text 的用法和一些常见的样式设置。

4.1.1 基本用法

使用 Text 最简单的方式是传入一个字符串作为其内容：

1. struct ContentView: View {
2.     var body: some View {
3.         Text("Hello, SwiftUI!")
4.     }
5. }

复制代码

4.1.2 样式设置

通过在 Text 上使用修饰符来设置文本的样式，比如字体、颜色、对齐方式等。

• 字体和颜色
  

1. Text("Welcome")
2.     .font(.title)
3.     .foregroundColor(.blue)

复制代码

• 对齐方式
  

1. Text("Centered Text")
2.     .multilineTextAlignment(.center)

复制代码

• 加粗和斜体
  

1. Text("Bold and Italic")
2.     .bold()
3.     .italic()

复制代码

4.1.3 动态文本

在 Text 中使用字符串插值大概变量来显示动态文本内容。比方：

1. struct ContentView: View {
2.     let username = "John Doe"
3.     
4.     var body: some View {
5.         Text("Welcome, \(username)!")
6.             .font(.headline)
7.             .foregroundColor(.green)
8.     }
9. }

复制代码

4.1.4 多行文本

如果文本内容较长大概需要显示多行文本，您可以使用 Text 的 lineLimit(nil) 和 multilineTextAlignment() 来设置文本的行数限定和对齐方式。

1. Text("This is a long text that may span multiple lines depending on the available space.")
2.     .lineLimit(nil)
3.     .multilineTextAlignment(.leading)

复制代码

4.2 图像（Image）

Image 是用来显示图像内容的视图组件。它答应您在应用步伐中加载和显示图像，并支持对图像进行巨细调整、裁剪和其他样式设置。让我们来详细了解 Image 的用法和一些常见的样式设置。

4.2.1 基本用法

使用 Image 最简单的方式是指定图像的名称，SwiftUI会自动查找和加载相应的图像资源。通常，您需要将图像资源添加到项目的 Assets.xcassets 中。

1. struct ContentView: View {
2.     var body: some View {
3.         Image("yourImageName")
4.     }
5. }

复制代码

4.2.2 图像样式和调整

• 图像调整
  

可以使用修饰符来调整图像的巨细、比例和裁剪。

1. Image("yourImageName")
2.     .resizable() // 可调整大小
3.     .scaledToFit() // 按原始宽高比缩放适合父视图
4.     .frame(width: 200, height: 200) // 设置框架大小

复制代码

• 图像修饰
  

可以对图像进行进一步的修饰，比方添加圆角、边框大概使用遮罩。

1. Image("yourImageName")
2.     .resizable()
3.     .clipShape(Circle()) // 添加圆形遮罩
4.     .overlay(Circle().stroke(Color.blue, lineWidth: 4)) // 添加蓝色边框
5.     .shadow(radius: 10) // 添加阴影效果

复制代码

4.2.3 加载网络图像

要加载来自URL的图像，可以使用 URLImage 库大概自界说 View。以下是一个简单的示例，演示如何加载网络图像：

1. struct RemoteImage: View {
2.     var imageUrl: String
3.     
4.     var body: some View {
5.         if let url = URL(string: imageUrl), let imageData = try? Data(contentsOf: url) {
6.             Image(uiImage: UIImage(data: imageData)!)
7.                 .resizable()
8.                 .scaledToFit()
9.                 .frame(width: 200, height: 200)
10.         } else {
11.             Text("Image not found")
12.         }
13.     }
14. }
16. struct ContentView: View {
17.     var body: some View {
18.         RemoteImage(imageUrl: "https://example.com/yourImage.jpg")
19.     }
20. }

复制代码

4.3 按钮（Button）

Button 是用来创建用户可以点击的交互性控件。它答应您在应用步伐中添加按钮，以触发各种操作和响应用户的输入。让我们来详细了解 Button 的用法和一些常见的设置。

4.3.1 基本用法

使用 Button 最简单的方式是在其构造函数中传入一个视图（通常是 Text 大概 Image），作为按钮的标签。

1. struct ContentView: View {
2.     var body: some View {
3.         Button(action: {
4.             // 点击按钮后的操作
5.             print("Button tapped!")
6.         }) {
7.             Text("Tap me!")
8.                 .font(.title)
9.                 .foregroundColor(.white)
10.                 .padding()
11.                 .background(Color.blue)
12.                 .cornerRadius(10)
13.         }
14.     }
15. }

复制代码

4.3.2 按钮样式和修饰

• 自界说按钮样式
  

可以通过添加差别的修饰符来自界说按钮的外观和行为。

1. Button(action: {
2.     // 点击按钮后的操作
3. }) {
4.     HStack {
5.         Image(systemName: "person.fill")
6.         Text("Login")
7.             .fontWeight(.semibold)
8.     }
9.     .padding()
10.     .foregroundColor(.white)
11.     .background(Color.green)
12.     .cornerRadius(8)
13.     .shadow(radius: 5)
14. }

复制代码

• 动态按钮
  

可以根据视图状态来动态更改按钮的标签或样式。

1. struct ContentView: View {
2.     @State private var isLogged = false
3.     
4.     var body: some View {
5.         Button(action: {
6.             self.isLogged.toggle()
7.         }) {
8.             Text(isLogged ? "Logout" : "Login")
9.                 .fontWeight(.semibold)
10.                 .padding()
11.                 .foregroundColor(.white)
12.                 .background(isLogged ? Color.red : Color.blue)
13.                 .cornerRadius(8)
14.         }
15.     }
16. }

复制代码

4.3.3 按钮响应和动作

每个按钮都需要一个操作（action），当用户点击按钮时，这个操作会被触发。操作通常是一个闭包，用于界说按钮点击后的行为。

1. Button(action: {
2.     print("Button tapped!")
3. }) {
4.     Text("Tap me!")
5. }

复制代码

​​​​​​​5. 列表和导航

5.1 列表视图（List）

List 是一个用于显示可滚动的内容列表的视图组件。List 适用于展示动态和静态数据，它支持多种自界说选项和交互功能。下面是对 List 视图的详细先容，包罗基本用法、动态数据展示和自界说样式。

5.1.1 基本用法

要创建一个简单的列表视图，您只需将视图内容传递给 List。可以用静态内容或动态数据来添补列表项。

• 静态内容
  

1. struct ContentView: View {
2.     var body: some View {
3.         List { // 显示了三个列表项
4.             Text("Item 1")
5.             Text("Item 2")
6.             Text("Item 3")
7.         }
8.     }
9. }

复制代码

​​​​​​​

5.1.2 动态数据

通常情况下，List 用于展示动态数据，您可以将数据绑定到 List 中，从而实现数据驱动的UI更新。

• 基本动态数据
  

1. struct ContentView: View {
2.     let items = ["Item 1", "Item 2", "Item 3", "Item 4"]
3.     
4.     var body: some View {
5.         List(items, id: \.self) { item in
6.             Text(item)
7.         }
8.     }
9. }

复制代码

• 使用自界说数据模型
  

1. struct Item: Identifiable {
2.     var id = UUID()
3.     var name: String
4.     var detail: String
5. }
7. struct ContentView: View {
8.     let items = [
9.         Item(name: "Item 1", detail: "Detail 1"),
10.         Item(name: "Item 2", detail: "Detail 2"),
11.         Item(name: "Item 3", detail: "Detail 3")
12.     ]
13.     
14.     var body: some View {
15.         List(items) { item in
16.             VStack(alignment: .leading) {
17.                 Text(item.name)
18.                     .font(.headline)
19.                 Text(item.detail)
20.                     .font(.subheadline)
21.             }
22.             .padding()
23.         }
24.     }
25. }

复制代码

如果您的数据模型更加复杂，可以创建一个自界说的结构体并使用它。

​​​​​​​

5.1.3 自界说列表项

可以自界说每个列表项的视图，添加更多的视图元素和样式。

1. struct Item: Identifiable {
2.     var id = UUID()
3.     var name: String
4.     var detail: String
5. }
7. struct ContentView: View {
8.     let items = [
9.         Item(name: "Item 1", detail: "Detail 1"),
10.         Item(name: "Item 2", detail: "Detail 2"),
11.         Item(name: "Item 3", detail: "Detail 3")
12.     ]
13.     
14.     var body: some View {
15.         List(items) { item in
16.             VStack(alignment: .leading) {
17.                 Text(item.name)
18.                     .font(.headline)
19.                 Text(item.detail)
20.                     .font(.subheadline)
21.             }
22.             .padding()
23.         }
24.     }
25. }

复制代码

5.1.4 列表的交互

List 支持多种交互功能，如行的删除、移动等。

• 删除列表项
  

1. struct ContentView: View {
2.     @State private var items = ["Item 1", "Item 2", "Item 3"]
3.     
4.     var body: some View {
5.         List {
6.             ForEach(items, id: \.self) { item in
7.                 Text(item)
8.             }
9.             .onDelete(perform: delete) // 修饰符允许用户从列表中删除项目
10.         }
11.     }
12.     
13.     func delete(at offsets: IndexSet) {
14.         items.remove(atOffsets: offsets)
15.     }
16. }

复制代码

• 移动列表项
  

1. struct ContentView: View {
2.     @State private var items = ["Item 1", "Item 2", "Item 3"]
3.     
4.     var body: some View {
5.         List {
6.             ForEach(items, id: \.self) { item in
7.                 Text(item)
8.             }
9.             .onMove(perform: move) // 修饰符允许用户移动列表中的项目
10.         }
11.         .navigationBarItems(trailing: EditButton()) // 进入编辑模式的按钮
12.     }
13.     
14.     func move(from source: IndexSet, to destination: Int) {
15.         items.move(fromOffsets: source, toOffset: destination)
16.     }
17. }

复制代码

5.2 导航视图（NavigationView）

NavigationView 是用于在应用步伐中创建导航层次结构的视图容器。它答应用户通过导航链接（NavigationLink）在差别的视图之间切换，并提供了导航栏的功能，如标题、按钮和其他交互元素。下面是对 NavigationView 的详细先容，包罗基本用法、导航链接、以及自界说导航栏。

5.2.1 基本用法

NavigationView 包裹在其他视图的外层，提供导航和管理导航层次结构的功能。

1. struct ContentView: View {
2.     var body: some View {
3.         NavigationView {
4.             Text("Welcome to SwiftUI")
5.                 .navigationTitle("Home")
6.         }
7.     }
8. }

复制代码

5.2.2 导航链接

NavigationLink 用于在视图之间创建导航链接。当用户点击链接时，会推送目标视图到导航堆栈中。

• 基本导航链接
  

1. struct ContentView: View {
2.     var body: some View {
3.         NavigationView {
4.             VStack {
5.                 NavigationLink(destination: DetailView()) { //创建了一个可以点击的区域，点击时会导航到 DetailView
6.                     Text("Go to Detail View")
7.                 }
8.                 .padding()
9.             }
10.             .navigationTitle("Home")
11.         }
12.     }
13. }
15. struct DetailView: View { //显示了一个简单的文本，并设置了导航栏标题为 "Detail"
16.     var body: some View {
17.         Text("This is the detail view")
18.             .navigationTitle("Detail")
19.     }
20. }

复制代码

• 导航链接与数据
  

还可以通过导航链接传递数据到目标视图。

​​​​​​​

1. struct ContentView: View {
2.     let items = ["Item 1", "Item 2", "Item 3"]
3.     
4.     var body: some View {
5.         NavigationView {
6.             List(items, id: \.self) { item in
7.                 NavigationLink(destination: DetailView(item: item)) {
8.                     Text(item)
9.                 }
10.             }
11.             .navigationTitle("Items")
12.         }
13.     }
14. }
16. struct DetailView: View {// 接受一个 item 参数，通过 NavigationLink 将选中的项传递到目标视图。
17.     let item: String
18.     
19.     var body: some View {
20.         Text("Detail for \(item)")
21.             .navigationTitle(item)
22.     }
23. }

复制代码

5.2.3 自界说导航栏

NavigationView 提供了一些方法来定制导航栏的外观和行为，比方添加按钮或修改标题。

• 添加导航栏按钮
  

1. struct ContentView: View {
2.     var body: some View {
3.         NavigationView {
4.             VStack {
5.                 Text("Welcome to SwiftUI")
6.             }
7.             .navigationTitle("Home")
8.             .navigationBarItems(trailing: Button(action: {
9.                 // 右侧按钮的动作
10.                 print("Edit tapped")
11.             }) {
12.                 Image(systemName: "pencil")
13.             })
14.         }
15.     }
16. }

复制代码

• 使用自界说视图作为导航栏标题
  

可以使用自界说视图作为导航栏标题，以实现更多样的计划。

1. struct ContentView: View {
2.     var body: some View {
3.         NavigationView {
4.             VStack {
5.                 Text("Welcome to SwiftUI")
6.             }
7.             .navigationTitle("Home")
8.             .navigationBarTitleDisplayMode(.inline)
9.             .navigationBarItems(leading: HStack {
10.                 Image(systemName: "star.fill")
11.                 Text("Favorites")
12.             })
13.         }
14.     }
15. }

复制代码

5.2.4 导航栏样式

可以调整导航栏的样式，比方背景颜色、透明度等。

​​​​​​​

1. struct ContentView: View {
2.     init() {
3.         UINavigationBar.appearance().backgroundColor = UIColor.systemTeal
4.         UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]
5.     }
6.     
7.     var body: some View {
8.         NavigationView {
9.             VStack {
10.                 Text("Welcome to SwiftUI")
11.             }
12.             .navigationTitle("Home")
13.             .navigationBarTitleDisplayMode(.large)
14.         }
15.     }
16. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。