SwiftUI 入门指南：迈向声明式 UI 开发新世界

序言

欢迎来到 SwiftUI 的世界！如果你是 iOS、macOS、watchOS 或 tvOS 开发的初学者，或者你是一位有经验的开发者，希望拥抱 Apple 生态系统中最新的 UI 开发范式，那么你来对地方了。

长期以来，Apple 平台的 UI 开发主要依赖于 UIKit (iOS/tvOS) 和 AppKit (macOS)。这两个框架强大且成熟，但它们基于命令式编程范式，涉及到大量的代码、代理模式、数据源以及繁琐的状态管理。随着技术的发展，声明式 UI 编程因其代码简洁、易于理解和维护的优势，在跨平台和现代应用开发中越来越受欢迎（例如 React、Vue、Flutter）。

SwiftUI 是 Apple 在 2019 年推出的全新 UI 框架，它彻底改变了 Apple 平台的 UI 开发方式。SwiftUI 基于 Swift 语言的强大特性，采用声明式语法，让你能够以更直观、更少代码的方式构建精美的跨平台应用界面。

本指南旨在为你提供一个全面的 SwiftUI 入门介绍，带你了解 SwiftUI 的核心概念、开发环境搭建以及如何构建一个简单的界面。无论你是否有 UI 开发经验，本指南都将为你打下坚实的基础。

第一部分：认识 SwiftUI

1.1 什么是 SwiftUI？

SwiftUI 是 Apple 为其所有平台（iOS、macOS、watchOS、tvOS）设计的一套声明式 UI 框架。它的核心思想是：描述你的界面应该是什么样子，以及当状态发生变化时，它应该如何响应，而不是告诉系统如何一步一步地绘制界面。

你可以将 SwiftUI 看作是：

声明式 (Declarative)： 你只需声明 UI 的结构和外观，SwiftUI 会负责将其渲染到屏幕上，并在数据变化时自动更新。
跨平台 (Cross-Platform)： 一套代码（或少量调整）可以运行在 iPhone、iPad、Mac、Apple Watch 和 Apple TV 上。
快速 (Fast)： 配合 Swift 语言和现代编译器优化，SwiftUI 的性能很高。
易用 (Easy to Use): 语法简洁，与 Swift 高度集成，并且拥有强大的实时预览功能。

1.2 为什么选择 SwiftUI？

相比传统的 UIKit/AppKit，SwiftUI 带来了诸多优势：

代码更少，更易读： 声明式语法大大减少了需要编写的代码量，UI 结构一目了然。
强大的实时预览 (Live Previews)： 在 Xcode 中，你可以实时看到代码修改带来的界面变化，甚至可以直接在预览中与界面互动，极大提高了开发效率和调试速度。
内置状态管理： SwiftUI 提供了 @State, @Binding, @ObservedObject, @EnvironmentObject 等一系列强大的属性包装器 (Property Wrappers)，让状态管理和数据流变得前所未有的简单和安全。
轻松实现动画和交互： 动画和复杂交互在 SwiftUI 中通常只需一行代码或几行代码即可实现。
自动支持 Dark Mode, Accessibility, Localization： SwiftUI 从设计之初就考虑到了这些现代应用的需求，提供了便捷的支持。
一套框架，多平台： 学习 SwiftUI，意味着你同时获得了开发所有 Apple 平台应用的能力。

第二部分：开发环境准备

学习 SwiftUI，你需要以下工具：

Mac 电脑： SwiftUI 开发必须在 macOS 环境下进行。
Xcode： SwiftUI 需要 Xcode 11 或更高版本。建议使用最新版本的 Xcode 以获得最佳体验和最新的功能。Xcode 可以从 Mac App Store 免费下载。

确保你的 Xcode 版本支持你想要开发的 SwiftUI 版本。 例如，如果你想使用 iOS 16/macOS Ventura 中引入的 SwiftUI 特性，你需要 Xcode 14 或更高版本。

第三部分：创建你的第一个 SwiftUI 项目

打开 Xcode，让我们来创建一个新的 SwiftUI 项目：

选择 File > New > Project...。
在模板选择界面，选择 iOS (或你想要开发的平台)，然后选择 App 模板。点击 Next。
在项目选项配置界面：
- Product Name: 输入你的项目名称，例如 MyFirstSwiftUIApp。
- Interface: 非常重要！ 确保这里选择 SwiftUI。
- Life Cycle: 确保这里选择 SwiftUI App。
- Language: 确保这里选择 Swift。
- Optional: 根据需要勾选 Use Core Data 或 Include Tests。
点击 Next，选择项目保存位置，点击 Create。

Xcode 会为你创建一个新的 SwiftUI 项目。项目的基本结构通常包括：

YourAppNameApp.swift: 这是你的应用入口文件，遵循 App 协议。它是应用的顶层结构，通常包含一个 WindowGroup，里面会指定应用的第一个视图。
ContentView.swift: 这是 Xcode 默认创建的第一个视图文件。你将在这里编写大部分 UI 代码。

第四部分：理解 SwiftUI 的核心概念

打开 ContentView.swift 文件。你可能会看到类似这样的代码：

“`swift
import SwiftUI

struct ContentView: View {
var body: some View {
VStack {
Image(systemName: “globe”)
.imageScale(.large)
.foregroundColor(.accentColor)
Text(“Hello, world!”)
}
.padding()
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
“`

这段代码虽然简短，但包含了 SwiftUI 的几个核心概念。让我们逐一解析：

4.1 View (视图)

定义： 在 SwiftUI 中，View 是构建用户界面的基本单元。任何你看到或与之交互的屏幕元素——文本、图像、按钮、列表等等——都是一个 View。
View 协议： ContentView 遵循了 View 协议。任何遵循 View 协议的类型都可以被视为一个视图。
body 属性： View 协议要求实现一个 body 计算属性。body 返回一个或多个组成当前视图界面的其他视图。SwiftUI 利用 body 来了解如何渲染这个视图。some View 是一个不透明返回类型，意味着它返回某种遵循 View 协议的类型，但具体的类型由编译器决定。

在上面的例子中，ContentView 的 body 包含了一个 VStack，VStack 又包含了 Image 和 Text 两个视图。

4.2 Modifiers (修饰符)

定义： 修饰符是一些方法，你可以通过链式调用的方式应用到视图上，以改变其外观或行为。
如何使用： 使用点语法 (.) 连接到视图后面。每个修饰符都会返回一个新的视图，这个新视图是原始视图应用了该修饰符后的结果。
链式调用： 你可以按顺序应用多个修饰符。修饰符的应用顺序通常很重要，因为它会影响最终的效果。

在示例代码中：

.imageScale(.large) 修饰了 Image，改变了图像的大小。
.foregroundColor(.accentColor) 修饰了 Image，改变了图像的颜色。
.padding() 修饰了 VStack，给整个垂直栈添加了内边距。

通过修饰符，你可以轻松地自定义视图的字体、颜色、边框、阴影、大小、对齐方式等等。

4.3 Layout (布局)

SwiftUI 使用一套强大的自动布局系统。你主要通过以下几种方式来组织和排列视图：

Stacks (栈)：
- VStack: 垂直排列子视图。
- HStack: 水平排列子视图。
- ZStack: 将子视图叠加在一起（类似图层）。
  栈是 SwiftUI 中最常用的布局容器。你可以设置它们的对齐方式 (alignment) 和子视图间的间距 (spacing)。
Padding (内边距): 使用 .padding() 修饰符可以在视图周围添加空间。可以指定添加内边距的边缘和具体数值。
Spacer (占位符): Spacer 是一个灵活的空间，它会尽可能地扩展以填充其所在的栈中的剩余空间。常用于将视图推到栈的一端。
Frames (尺寸): 使用 .frame() 修饰符可以设置视图的固定或最小/最大尺寸。

示例中的 VStack 就是一个垂直布局容器，将 Image 和 Text 垂直排列。.padding() 修饰符则给整个 VStack 添加了四周的内边距。

4.4 State Management and Data Flow (状态管理与数据流)

这是 SwiftUI 最强大也是最重要的概念之一。UI 的核心是响应数据的变化。当数据（状态）改变时，UI 应该自动更新。SwiftUI 提供了一系列属性包装器来简化这一过程：

@State: 用于管理视图内部的、简单的、局部状态。当被标记为 @State 的属性值发生变化时，SwiftUI 会自动重新渲染包含该 @State 的视图及其依赖它的子视图。这通常用于 UI 元素自身的临时状态，比如一个开关是开还是关，一个计数器的值。

“`swift
struct CounterView: View {
@State private var count = 0 // 使用 @State 标记 count
```
var body: some View {
    VStack {
        Text("Count: \(count)") // 显示 count 的值
        Button("Increment") {
            count += 1 // 修改 count 的值
        }
    }
}
```
}
`` 当点击按钮时，count的值改变，@State会通知 SwiftUI，然后CounterView的body会被重新计算，界面上的Text就会显示新的计数。private是一个好习惯，表明@State` 变量是该视图私有的。
@Binding: 用于在父视图和子视图之间双向同步数据。当子视图需要修改父视图管理的状态时，可以使用 @Binding。它提供了一个对原始数据的引用，而不是创建副本。

“`swift
// 父视图
struct ParentView: View {
@State private var isOn = false // 父视图的状态
```
var body: some View {
    VStack {
        Text("Toggle is: \(isOn ? "On" : "Off")")
        // 将 isOn 的绑定传递给子视图
        ChildView(isToggleOn: $isOn)
    }
}
```
}

// 子视图
struct ChildView: View {
@Binding var isToggleOn: Bool // 声明一个 Binding
```
var body: some View {
    Toggle("Turn On/Off", isOn: $isToggleOn) // 使用 Binding
}
```
}
`` 注意ChildView中使用$isToggleOn来访问isToggleOn的绑定。$` 前缀是 Swift 属性包装器提供的语法糖，用于访问包装器本身（这里是 Binding 结构体），从而能够获取或修改底层数据。
@ObservedObject / @StateObject: 用于在视图中使用外部引用类型的可观察对象（通常是类），例如一个数据模型或一个服务。这些类需要遵循 ObservableObject 协议，并且使用 @Published 属性包装器标记其需要被观察的属性。当 @Published 属性变化时，@ObservedObject 或 @StateObject 会通知 SwiftUI 更新依赖该对象的视图。
- @StateObject: 用于在视图首次创建时实例化并持有可观察对象。适用于对象的生命周期与视图生命周期一致的情况。
- @ObservedObject: 用于接收由外部创建并传入的可观察对象。适用于多个视图共享同一个对象，或者对象的生命周期独立于当前视图的情况。
“`swift
// 定义一个可观察对象
class UserSettings: ObservableObject {
@Published var username = “Guest” // @Published 标记需要被观察的属性
}

// 在视图中使用
struct SettingsView: View {
// 使用 @StateObject 创建并持有 UserSettings 实例
@StateObject var settings = UserSettings()
```
var body: some View {
    VStack {
        Text("Username: \(settings.username)")
        TextField("Enter Username", text: $settings.username)
            .padding()
            .border(.gray)
    }
}
```
}
`` 当你输入文本时，settings.username改变，@Published通知settings对象变化，@StateObject通知SettingsView更新，界面上的Text` 就会实时显示你输入的内容。
@EnvironmentObject: 允许你在视图层级结构中共享一个对象，而无需通过层层传递 @ObservedObject 或 @Binding。这适用于在整个应用或某个大部分子视图中都需要访问的对象（如用户设置、主题信息等）。对象需要在视图层级的某个祖先视图上使用 .environmentObject() 修饰符注入到环境中。

“`swift
// 假设 UserSettings 仍然是上面的 ObservableObject
// 应用的顶层结构
@main
struct MyApp: App {
@StateObject var settings = UserSettings() // 在应用启动时创建
```
var body: some Scene {
    WindowGroup {
        ContentView()
            .environmentObject(settings) // 将 settings 注入到环境中
    }
}
```
}

// 在任何需要访问 UserSettings 的子视图中
struct ProfileView: View {
@EnvironmentObject var settings: UserSettings // 从环境中获取 UserSettings
```
var body: some View {
    Text("Welcome, \(settings.username)!")
}
```
}
``@EnvironmentObject` 大大简化了深层嵌套视图的数据传递问题。

理解并熟练运用这些属性包装器是掌握 SwiftUI 的关键。它们是 SwiftUI 数据流和响应式更新的基础。

4.5 List 和 ForEach

构建列表是移动应用中非常常见的需求。SwiftUI 提供了强大的 List 视图来处理列表显示。

List: 类似于 UIKit 的 UITableView 或 AppKit 的 NSTableView，但使用起来更简单。它可以显示静态内容，也可以结合 ForEach 显示动态数据集合。

“`swift
// 静态列表
List {
Text(“Item 1”)
Text(“Item 2”)
Text(“Item 3”)
}

// 动态列表 (需要数据遵循 Identifiable 协议或提供 id)
struct TodoItem: Identifiable {
let id = UUID() // 使用 UUID 作为唯一标识符
var task: String
var isCompleted = false
}

struct TodoListView: View {
var todos = [
TodoItem(task: “Buy milk”),
TodoItem(task: “Walk the dog”),
TodoItem(task: “Learn SwiftUI”)
]
```
var body: some View {
    List {
        ForEach(todos) { item in // ForEach 遍历集合
            HStack {
                Text(item.task)
                Spacer()
                if item.isCompleted {
                    Image(systemName: "checkmark.circle.fill")
                }
            }
        }
    }
}
```
}
``ForEach是 SwiftUI 中用于根据集合数据创建多个动态视图的结构。它常与List或 Stacks 结合使用。ForEach需要知道如何唯一标识集合中的每个元素，这通常通过让数据模型遵循Identifiable协议来实现（如上面的TodoItem结构体），或者在创建ForEach时提供一个id参数（例如ForEach(myArray, id: .self)` 用于简单类型数组）。

4.6 Handling User Input (处理用户输入)

Button (按钮): Button 是一个用于响应用户点击的视图。它有两个主要部分：一个 action 闭包（点击时执行的代码）和一个 label 视图（按钮的外观）。

“`swift
Button(“Tap Me”) { // Text 作为 label
print(“Button was tapped!”) // action
}

Button { // 复杂的 label
// action
print(“Image button tapped!”)
} label: {
Image(systemName: “star.fill”)
.foregroundColor(.yellow)
Text(“Favorite”)
}
“`
TextField (文本输入框): TextField 用于获取用户的文本输入。它需要一个用于显示提示文本的参数，以及一个 @State 或 @Binding 变量来存储用户输入的文本。

“`swift
struct InputView: View {
@State private var name = “” // 用于存储输入文本的状态
```
var body: some View {
    VStack {
        TextField("Enter your name", text: $name) // $name 提供了双向绑定
            .padding()
            .border(.gray)
        Text("Hello, \(name)!")
    }
}
```
}
``TextField使用$name实现了与@State var name的双向绑定，当用户在输入框中输入文本时，name` 变量会自动更新，反之亦然。

4.7 Navigation (导航)

在多页应用中，你需要一种方式在不同视图之间切换。SwiftUI 提供了 NavigationView 和 NavigationLink 来实现基本的导航功能。

NavigationView: 是一个容器视图，用于管理视图栈。通常作为应用或某个模块的顶层视图。它提供了导航栏的功能。
NavigationLink: 是一个视图，点击它可以导航到另一个目标视图。它类似于 UIKit 中的 UIStoryboardSegue 或通过 pushViewController 实现的导航。

“`swift
struct MasterView: View {
var body: some View {
NavigationView { // 导航容器
List {
NavigationLink(“Go to Detail View”) { // 导航链接
DetailView() // 目标视图
}
Text(“Another Row”)
}
.navigationTitle(“Master”) // 设置导航栏标题
}
}
}

struct DetailView: View {
var body: some View {
Text(“This is the detail view!”)
.navigationTitle(“Detail”) // 设置当前视图的导航栏标题
}
}
`` 在MasterView中，NavigationView包裹了List。NavigationLink在列表的行中创建了一个可点击的区域，点击后会跳转到DetailView。navigationTitle` 修饰符用于设置当前视图在导航栏中显示的标题。

4.8 Preview Canvas (预览画布)

当你打开一个 SwiftUI 文件时，Xcode 界面右侧通常会显示一个预览区域，这就是 Preview Canvas。

作用： 它能够实时渲染你的 SwiftUI 视图，让你在编写代码的同时立即看到界面的效果。
特点：
- Live Preview: 你可以直接在预览中与你的界面进行交互（例如点击按钮、滚动列表）。
- Selectable: 你可以在预览中选中视图元素，Xcode 会高亮对应的代码，方便你快速定位。
- Configurable: 你可以在 PreviewProvider 结构体中配置不同的预览状态，比如不同的设备、不同的屏幕方向、不同的数据状态，甚至 Dark Mode。
“`swift
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
// 基本预览
ContentView()
```
    // 配置不同的预览
    ContentView()
        .preferredColorScheme(.dark) // 深色模式

    ContentView()
        .previewDevice("iPhone 8") // 特定设备

    ContentView()
        .previewLayout(.sizeThatFits) // 根据内容调整大小
        .padding()
}
```
}
``PreviewProvider是一个遵循同名协议的结构体，它的previews` 静态计算属性返回一个或多个需要预览的视图。通过在这里配置，你可以方便地检查视图在不同条件下的显示效果。

第五部分：动手实践：构建一个简单的计数器应用

让我们综合运用上面学到的知识，构建一个简单的计数器应用：屏幕上显示当前计数，有两个按钮分别用于增加和减少计数。

“`swift
import SwiftUI

struct CounterAppView: View {
// 1. 使用 @State 管理视图的内部状态：计数器的值
@State private var count = 0

var body: some View {
    // 2. 使用 VStack 垂直布局所有元素
    VStack(spacing: 20) { // 添加一些垂直间距
        // 3. 显示计数器的 Text 视图
        Text("Count: \(count)")
            .font(.largeTitle) // 应用字体修饰符
            .padding() // 添加内边距
            .background(Color.yellow.opacity(0.3)) // 添加背景修饰符
            .cornerRadius(10) // 添加圆角修饰符

        // 4. 使用 HStack 水平布局两个按钮
        HStack(spacing: 50) { // 添加水平间距
            // 减少按钮
            Button {
                // action: 减少计数，确保不小于0
                if count > 0 {
                    count -= 1
                }
            } label: {
                // label: 按钮外观
                Image(systemName: "minus.circle.fill")
                    .resizable() // 允许调整大小
                    .frame(width: 50, height: 50) // 设置固定尺寸
                    .foregroundColor(.red) // 设置颜色
            }

            // 增加按钮
            Button {
                // action: 增加计数
                count += 1
            } label: {
                // label: 按钮外观
                Image(systemName: "plus.circle.fill")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .foregroundColor(.green)
            }
        }

        // 5. 添加一个重置按钮（可选）
        Button("Reset Count") {
            count = 0
        }
        .padding(.top, 30) // 在顶部添加更多内边距
    }
    .padding() // 给整个 VStack 添加外层内边距
    // .navigationTitle("计数器") // 如果在 NavigationView 中，可以设置标题
}

}

// Preview Provider
struct CounterAppView_Previews: PreviewProvider {
static var previews: some View {
CounterAppView()
// .previewLayout(.sizeThatFits) // 在预览中调整布局以适应内容
}
}
“`

将这段代码粘贴到你的 ContentView.swift 文件中（替换掉原来的内容），或者创建一个新的 SwiftUI View 文件 (File > New > File... > SwiftUI View) 并命名为 CounterAppView，然后将代码粘贴进去。

在 Xcode 的预览画布中，你应该能看到一个简单的计数器界面。点击加号和减号按钮，观察文本标签中的数字是如何实时更新的。这就是 @State 和声明式 UI 的魔力！你没有写任何代码来手动找到文本标签并更新它的值， SwiftUI 在 count 状态改变时自动完成了这一切。

第六部分：进阶学习方向

恭喜你，你已经掌握了 SwiftUI 的基础知识！但这只是冰山一角。SwiftUI 是一个功能丰富的框架，还有很多值得深入学习的地方：

更复杂的数据流： @ObservedObject, @StateObject, @EnvironmentObject 的详细用法和适用场景。
高级布局： GeometryReader, ScrollView, LazyVStack/LazyHStack, Grid (iOS 16+), 自定义布局。
手势识别： Gesture 协议和各种内置手势（Tap, Drag, LongPress 等）。
动画： 显式动画和隐式动画，withAnimation。
绘图： Path, Shape, Canvas。
集成 UIKit/AppKit： 如何在 SwiftUI 中使用 UIKit/AppKit 视图 (UIViewRepresentable, UIViewControllerRepresentable)，反之亦然。
框架集成： Core Data, Core Animation, Combine 的集成。
应用架构： 如何使用 MVVM 或其他模式组织大型 SwiftUI 应用的代码。
更丰富的控件： Toggle, Slider, Stepper, Picker, DatePicker, Map, WebKit 等。
Modifier 顺序的影响： 深入理解修饰符链的工作原理。

总结

SwiftUI 是 Apple UI 开发的未来。它以其声明式语法、强大的实时预览、内置的状态管理和跨平台能力，极大地简化了现代应用的开发。本指南带你了解了 SwiftUI 的基本概念：视图、修饰符、布局、状态管理（重点是 @State）、列表、按钮和文本输入、导航以及预览画布。

从现在开始，最重要的是动手实践。尝试修改上面的计数器例子，添加更多功能；或者从头开始构建一个简单的待办事项列表应用，尝试使用 List、TextField、Button 以及状态管理。

SwiftUI 的学习曲线初期可能与传统的命令式框架有所不同，特别是状态管理和数据流的概念。但一旦你理解了声明式范式和 SwiftUI 的核心原理，你会发现它能让你以更高效、更愉快的方式构建出色的用户界面。

祝你在 SwiftUI 的学习旅程中一切顺利！不断探索，不断实践，享受创造的乐趣吧！

SwiftUI 入门指南 – wiki基地

SwiftUI 入门指南：迈向声明式 UI 开发新世界

序言

第一部分：认识 SwiftUI

1.1 什么是 SwiftUI？

1.2 为什么选择 SwiftUI？

第二部分：开发环境准备

第三部分：创建你的第一个 SwiftUI 项目

第四部分：理解 SwiftUI 的核心概念

4.1 View (视图)

4.2 Modifiers (修饰符)

4.3 Layout (布局)

4.4 State Management and Data Flow (状态管理与数据流)

4.5 List 和 ForEach

4.6 Handling User Input (处理用户输入)

4.7 Navigation (导航)

4.8 Preview Canvas (预览画布)

第五部分：动手实践：构建一个简单的计数器应用

第六部分：进阶学习方向

总结

发表评论取消回复

SwiftUI 入门指南：迈向声明式 UI 开发新世界

序言

第一部分：认识 SwiftUI

1.1 什么是 SwiftUI？

1.2 为什么选择 SwiftUI？

第二部分：开发环境准备

第三部分：创建你的第一个 SwiftUI 项目

第四部分：理解 SwiftUI 的核心概念

4.1 View (视图)

4.2 Modifiers (修饰符)

4.3 Layout (布局)

4.4 State Management and Data Flow (状态管理与数据流)

4.5 List 和 ForEach

4.6 Handling User Input (处理用户输入)

4.7 Navigation (导航)

4.8 Preview Canvas (预览画布)

第五部分：动手实践：构建一个简单的计数器应用

第六部分：进阶学习方向

总结

发表评论 取消回复

发表评论取消回复