Apple SwiftUI 入门指南：快速上手 – wiki基地

作者： /

Apple SwiftUI 入门指南：快速上手

欢迎来到现代 Apple 平台应用开发的奇妙世界！如果你一直对构建 iOS、macOS、watchOS 或 tvOS 应用充满好奇，那么 SwiftUI 绝对是你开启这段旅程的最佳起点。SwiftUI 是 Apple 在 2019 年推出的一个革命性的 UI 开发框架，它以其声明式的语法、强大的预览功能和跨平台的特性，正在迅速改变着 Apple 生态系统的开发方式。

本指南将带你快速走进 SwiftUI 的世界，从基础概念到动手实践，帮助你奠定坚实的学习基础。无论你之前是否有 iOS 开发经验，都能通过本文快速入门。

为什么选择 SwiftUI？

在深入学习之前，先了解一下 SwiftUI 带来了哪些优势，以及为什么它值得你投入时间：

  1. 声明式语法 (Declarative Syntax): 这是 SwiftUI 最核心的特点。不同于传统的命令式 UI 开发（如 UIKit/AppKit，你需要告诉系统“先创建一个按钮，然后设置它的位置，再添加一个点击事件处理程序”），声明式开发是告诉系统“我想要一个长这样、具备这些属性的按钮”。你只需要描述你的 UI 应该是什么样子，以及当状态改变时它应该如何更新，SwiftUI 会处理剩下的细节。这使得代码更加简洁、易读和易于维护。
  2. 跨平台 (Cross-Platform): SwiftUI 是为 Apple 的所有平台设计的。一套 SwiftUI 代码，经过适当的调整，就可以在 iOS、macOS、watchOS、tvOS 甚至最新的 visionOS 上运行。这极大地提高了开发效率。
  3. 强大的预览 (Powerful Previews): Xcode 集成的 SwiftUI 预览功能是开发者的福音。你可以在不运行模拟器或设备的情况下，实时看到你的 UI 代码的渲染效果。这使得 UI 调试和设计变得异常高效。你甚至可以创建多个不同状态、不同设备方向或不同本地化的预览。
  4. 实时交互 (Live Interaction): 在预览模式下，你不仅可以看到 UI，还可以与某些控件进行实时交互（例如点击按钮、拖动滑块），这比每次修改都重新编译运行要快得多。
  5. 与 Swift 深度集成: SwiftUI 完全基于 Swift 语言构建，充分利用了 Swift 的现代特性，如值类型、协议、函数式编程概念等。
  6. 自动支持辅助功能和本地化: SwiftUI 从设计之初就考虑了辅助功能 (Accessibility) 和本地化 (Localization)，开发者可以更容易地构建出对所有用户都友好的应用。

总而言之，SwiftUI 让 UI 开发变得更加直观、高效和愉快。

入门准备

在开始学习 SwiftUI 之前，你需要准备好以下工具：

  1. 一台 Mac 电脑: SwiftUI 开发必须在 macOS 系统上进行。推荐使用配备 Apple Silicon 芯片（M1, M2, M3 等）的 Mac，它们在性能上更有优势。
  2. Xcode 开发环境: Xcode 是 Apple 官方的集成开发环境 (IDE)，包含了 Swift 编译器、SwiftUI 框架、模拟器等所有必要的工具。请确保安装最新版本的 Xcode，因为 SwiftUI 功能在不断迭代和增强，新版本通常支持最新的 SwiftUI 特性，并兼容最新的 macOS、iOS 版本。你可以从 Mac App Store 免费下载 Xcode。

安装好 Xcode 后，打开它，同意用户协议，等待必要的组件安装完成，你就准备好了。

创建你的第一个 SwiftUI 项目

让我们通过创建一个新的 Xcode 项目来开始你的 SwiftUI 之旅：

  1. 打开 Xcode。
  2. 选择 File > New > Project...。
  3. 在模板选择界面，选择 iOS 标签页下的 App 模板，然后点击 Next。
  4. 填写项目信息：
    • Product Name: 给你的项目起一个名字，比如 MyFirstSwiftUIApp。
    • Team: 如果你登录了 Apple Developer 账号，选择你的团队。如果没有，选择 Personal Team 或留空，这不影响学习。
    • Organization Identifier: 一个唯一的标识符，通常是你的公司或组织的域名反写，比如 com.yourcompany。产品名称和组织标识符组合起来构成 Bundle Identifier (com.yourcompany.MyFirstSwiftUIApp)。
    • Interface: 重点来了！ 确保这里选择 SwiftUI。
    • Life Cycle: 选择 SwiftUI App。
    • Language: 确保选择 Swift。
    • Use Core Data 和 Include Tests：暂时不需要勾选。
  5. 点击 Next。
  6. 选择一个位置保存你的项目，点击 Create。

Xcode 会自动为你创建一个基本的 SwiftUI 项目结构，并在屏幕中间打开 ContentView.swift 文件。

理解初始项目结构

打开 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()

}
“`

以及在同一个目录或旁边会有一个 [YourProjectName]App.swift 文件，例如 MyFirstSwiftUIAppApp.swift:

“`swift
import SwiftUI

@main
struct MyFirstSwiftUIAppApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
“`

让我们解析一下这些代码的含义：

  1. import SwiftUI: 导入 SwiftUI 框架，这是使用 SwiftUI 所有组件和功能的前提。
  2. struct ContentView: View: 这定义了一个名为 ContentView 的结构体 (struct)，它遵循了 View 协议。在 SwiftUI 中，所有的 UI 元素都是遵循 View 协议的结构体。结构体是值类型，这在 SwiftUI 的数据流管理中非常重要。
  3. var body: some View: 这是 View 协议要求实现的一个计算属性。它返回一个 some View 类型，表示它返回的是某种遵循 View 协议的类型，但具体是哪种类型由编译器决定。body 是 SwiftUI 视图的核心，你在这里描述你的 UI 结构。
  4. VStack { ... }: VStack 是一种布局容器，它将其内部的视图垂直地堆叠起来。SwiftUI 提供了多种堆叠方式：
    • VStack: 垂直堆叠
    • HStack: 水平堆叠
    • ZStack: 沿 Z 轴（深度）堆叠，后声明的视图会覆盖在先声明的视图上面。
  5. Image(systemName: "globe"): 创建一个 Image 视图，使用 SF Symbols 图标库中的 “globe” 图标。
  6. .imageScale(.large): 这是一个 修饰符 (Modifier)。修饰符用于改变视图的外观或行为。它们通过链式调用的方式应用到视图上。这里设置图片的缩放比例为大号。
  7. .foregroundStyle(.tint): 另一个修饰符，设置图片的前景样式（颜色）为当前系统的 accent color。
  8. Text("Hello, world!"): 创建一个 Text 视图，显示文本 “Hello, world!”。
  9. .padding(): 应用一个内边距修饰符，给 VStack 的内容添加一些内边距。
  10. #Preview { ... }: 这是一个宏 (Macro)，用于定义视图的预览。在 Xcode 的画布 (Canvas) 区域，你可以看到 ContentView 的实时预览。#Preview 宏是 Swift 5.9 (Xcode 15) 引入的，替代了之前的 struct PreviewProvider.
  11. @main: 这是一个属性，标记了应用的入口点。
  12. struct MyFirstSwiftUIAppApp: App: 定义了一个遵循 App 协议的结构体，代表了整个应用。
  13. var body: some Scene: App 协议要求实现的属性，它定义了应用的场景结构。
  14. WindowGroup { ... }: 这是最常见的场景类型，代表应用的主窗口。
  15. ContentView(): 在 WindowGroup 中实例化 ContentView，表示应用启动时显示 ContentView。

在 Xcode 中，你应该能看到代码编辑器的右侧（或下方，取决于你的布局）有一个预览区域 (Canvas)。如果没看到，可以点击右上角的调整器按钮（或 Editor > Canvas）打开。你应该能立即看到 “Hello, world!” 和一个地球图标的预览。

核心概念详解

现在，我们来深入了解 SwiftUI 中几个最核心的概念。

1. 视图 (Views) 与视图组合 (View Composition)

如前所述，一切皆视图。Text, Image, Button, List 等都是内置的视图类型。你也可以通过组合这些基本视图来创建更复杂的自定义视图。

视图组合通过将视图嵌套在布局容器（如 VStack, HStack, ZStack）中实现。例如：

swift
struct MyCustomView: View {
var body: some View {
HStack { // 水平堆叠
Image(systemName: "star.fill")
.foregroundColor(.yellow)
Text("Important Item")
.font(.headline)
Spacer() // 添加一个 Spacer，将左边的内容推到最左边
Text("Details")
.foregroundColor(.gray)
}
.padding() // 给整个 HStack 添加内边距
}
}

这里，我们创建了一个 MyCustomView，它包含一个 HStack，HStack 里又包含了 Image, Text, Spacer 和另一个 Text。Spacer 是一个特殊的视图，它会尽可能地扩展，常用于在布局中创建空间。

2. 修饰符 (Modifiers)

修饰符是 SwiftUI 中改变视图外观和行为的强大工具。它们通过链式调用的方式应用。每个修饰符都会返回一个新的视图，这个新视图是原视图应用了修饰符后的结果。修饰符的顺序有时很重要。

例如：

“`swift
Text(“Hello”)
.padding() // 先添加内边距
.background(.blue) // 再设置背景颜色，蓝色背景会包含内边距
.foregroundColor(.white) // 设置文字颜色

Text(“Hello”)
.background(.blue) // 先设置背景颜色
.padding() // 再添加内边距，内边距在蓝色背景外面
.foregroundColor(.white)
“`

这两个 Text 看起来会有所不同，因为修饰符的应用顺序不同。

常见的修饰符：

  • .padding(): 添加内边距。
  • .font(): 设置字体样式。
  • .foregroundColor(): 设置文本颜色。
  • .background(): 设置背景。
  • .cornerRadius(): 设置圆角。
  • .shadow(): 添加阴影。
  • .opacity(): 设置透明度。
  • .frame(): 设置视图的尺寸、对齐方式。
  • .onTapGesture { ... }: 添加点击手势。

SwiftUI 提供了非常丰富的内置修饰符，你可以通过 Xcode 的代码自动补全来探索它们。

3. 状态 (State) 与数据流

应用的 UI 往往需要根据数据变化而更新。在 SwiftUI 中，我们使用 状态管理 来实现这一目标。最基础的状态管理机制是 @State 属性包装器 (Property Wrapper)。

用 @State 标记的属性，当其值发生变化时，SwiftUI 会自动重新计算依赖于该属性的视图的 body，从而更新 UI。

“`swift
struct CounterView: View {
@State private var count = 0 // 使用 @State 标记状态变量

var body: some View {
    VStack {
        Text("Count: \(count)") // UI 显示 count 的值
            .font(.largeTitle)

        Button("Increment") {
            count += 1 // 点击按钮，修改 count 的值
        }
    }
}

}
“`

在这个例子中：
* @State private var count = 0 声明了一个名为 count 的整数状态变量，初始值为 0。private 是一个访问控制修饰符，建议对 @State 属性使用 private，表明它只在这个视图内部管理。
* Text("Count: \(count)") 视图直接依赖于 count 的值。
* Button("Increment") { count += 1 } 的操作闭包修改了 count 的值。

当 count += 1 执行时，SwiftUI 检测到 @State 变量 count 发生了变化，它会自动找到所有依赖 count 的视图（这里是 Text），并重新渲染它们的 body。因此，Text 会自动更新显示新的 count 值。

重要概念： @State 适用于在单个视图内部管理简单的、局部的状态。对于需要在多个视图之间共享或从外部传入的数据，需要使用其他更高级的状态管理方式，例如 @Binding, @ObservedObject, @StateObject, @EnvironmentObject 等，我们会在进阶时学习它们。

4. 绑定 (Binding)

当你想让一个视图（特别是表单控件，如 TextField, Toggle, Slider）能够读取和写入父视图或其他来源的状态时，就需要使用 @Binding。@Binding 提供了一个对值的引用，而不是拥有值本身。

例如，我们创建一个子视图 CounterButton，它接收一个 Binding<Int> 来修改父视图的计数：

“`swift
struct CounterButton: View {
@Binding var value: Int // 使用 @Binding 接收父视图的状态引用
let buttonTitle: String

var body: some View {
    Button(buttonTitle) {
        value += 1 // 通过 Binding 修改引用的值
    }
}

}

struct ParentView: View {
@State private var totalCount = 0 // 父视图拥有状态

var body: some View {
    VStack {
        Text("Total: \(totalCount)")
            .font(.largeTitle)

        // 将 totalCount 的 Binding 传递给子视图
        CounterButton(value: $totalCount, buttonTitle: "Add One")
        CounterButton(value: $totalCount, buttonTitle: "Add Five") // 可以传递给多个子视图
    }
}

}
“`

在 ParentView 中，我们用 @State 声明了 totalCount。在创建 CounterButton 实例时，我们使用 $ 符号将 totalCount 的 @State 变量转换为一个 Binding<Int>，并传递给子视图的 value 参数。$ 符号是 @State 属性包装器提供的一个投影值 (projected value)，它代表了对底层状态的绑定。

子视图 CounterButton 使用 @Binding var value: Int 来接收这个绑定。当 CounterButton 内部修改 value 时，实际上修改的是父视图的 totalCount 状态，这也会触发 ParentView 的 UI 更新。

@Binding 允许创建可复用的子视图，而无需子视图拥有或管理状态本身。

5. 布局系统 (Layout System)

SwiftUI 的布局系统基于以下几个核心原则：

  • 父视图提议，子视图选择，父视图定位:
    • 父视图提议: 父视图会向子视图提议一个可用空间大小。
    • 子视图选择: 子视图根据这个提议的空间以及自己的内容、修饰符等，决定自己的实际大小。
    • 父视图定位: 父视图根据子视图选择的大小，决定其在布局中的最终位置。
  • 贪婪与抵抗: 有些视图（如 Text, Image 没有固定大小约束时）会根据内容调整大小，是“内容驱动”的。有些视图（如 Color, Rectangle）默认会尽可能填满父视图提供的空间，是“贪婪”的。修饰符如 .frame(width:height:alignment:) 可以用来约束视图的大小。
  • 堆叠容器 (VStack, HStack, ZStack): 这是最常用的布局工具。
    • 它们可以指定 alignment（对齐方式，如 .leading, .trailing, .center, .top, .bottom, .firstTextBaseline, .lastTextBaseline）。
    • 它们可以指定 spacing（子视图之间的间距）。
  • Spacer(): 在堆叠容器中，Spacer 会吸收尽可能多的空间，将其他视图推开。
  • GeometryReader: 用于获取父视图提供的空间信息，从而可以基于可用空间进行布局计算。这对于创建响应式或更复杂的布局非常有用，但入门阶段可以先聚焦于堆叠容器。

理解 SwiftUI 的布局系统原理，对于构建复杂且响应式的 UI 至关重要。

6. 列表 (List) 与导航 (Navigation)

在大多数应用中，列表和导航是不可或缺的部分。

  • 列表 (List): List 类似于 UIKit 的 UITableView 或 AppKit 的 NSTableView，用于显示多行数据。它可以直接接收一个数据集合（遵循 Identifiable 协议或提供 id 参数）来自动生成行。

    “`swift
    struct TodoItem: Identifiable {
    let id = UUID() // List 需要数据是可识别的
    var task: String
    var isCompleted: Bool
    }

    struct TodoListView: View {
    // 通常数据会通过 @State, @StateObject 或 EnvironmentObject 管理
    @State private var todos = [
    TodoItem(task: “Buy milk”, isCompleted: false),
    TodoItem(task: “Walk the dog”, isCompleted: true),
    TodoItem(task: “Learn SwiftUI”, isCompleted: false)
    ]

    var body: some View {
    List {
        // List 直接遍历数据集合
        ForEach(todos) { todo in
            HStack {
                Text(todo.task)
                Spacer()
                Image(systemName: todo.isCompleted ? "checkmark.circle.fill" : "circle")
                    .foregroundColor(todo.isCompleted ? .green : .gray)
            }
        }
        // 也可以手动添加静态行
        Text("More items...")
    }
    .navigationTitle("My Todo List") // 常与导航结合使用设置标题
}

    }
    “`

  • 导航 (NavigationStack / NavigationView): 用于在不同视图之间进行层级导航。NavigationStack 是 iOS 16+ 推荐的新方式，NavigationView 用于旧版本。

    “`swift
    // 使用 NavigationStack (iOS 16+)
    struct MasterView: View {
    var body: some View {
    NavigationStack { // NavigationStack 作为导航容器
    List {
    NavigationLink(“Go to Detail A”, value: “Detail A”) // 使用 value 进行基于数据的导航
    NavigationLink(“Go to Detail B”, value: “Detail B”)
    }
    .navigationTitle(“Master”)
    // 定义导航目的地，当接收到特定 value 时显示对应视图
    .navigationDestination(for: String.self) { value in
    DetailView(detailText: value)
    }
    }
    }
    }

    struct DetailView: View {
    let detailText: String
    var body: some View {
    Text(“This is (detailText)”)
    .navigationTitle(detailText) // 在详情页设置标题
    }
    }
    ``
    对于旧版本（iOS 13-15），使用    NavigationView和.navigationTitle()、.navigationBarTitleDisplayMode()、NavigationLink(destination:label:)` 的方式：

    swift
    // 使用 NavigationView (iOS 13-15)
    struct MasterView_Old: View {
    var body: some View {
    NavigationView { // NavigationView 作为导航容器
    List {
    NavigationLink { // destination 是要导航到的视图
    DetailView(detailText: "Detail A")
    } label: { // label 是在列表中显示的视图
    Text("Go to Detail A")
    }
    NavigationLink {
    DetailView(detailText: "Detail B")
    } label: {
    Text("Go to Detail B")
    }
    }
    .navigationTitle("Master") // 设置导航栏标题
    .navigationBarTitleDisplayMode(.inline) // 设置标题显示模式
    }
    }
    }
    推荐优先使用 NavigationStack，因为它更灵活且性能更好。

7. 实时预览 (Live Preview)

这是 SwiftUI 开发的杀手级功能。Xcode 的 Canvas 区域会实时渲染你的代码。

  • 静态预览: 默认情况下，预览是静态的，只显示 UI 的最终状态。
  • 实时预览 (Live Preview): 点击 Canvas 左上角的 “Live Activities” 按钮（或播放按钮），可以进入实时预览模式。在此模式下，你可以与 UI 进行交互，例如点击按钮、滑动 Slider、操作 Toggle 等，这对于调试 UI 行为非常有用。

  • 多重预览: 你可以在 #Preview（或 PreviewProvider）中创建多个不同配置的预览，比如不同设备、不同方向、不同字体大小、不同本地化语言等等。

    “`swift

    Preview {

    ContentView() // 默认预览

ContentView() // 同一个视图的不同配置预览
    .previewDevice("iPhone SE (3rd generation)")
    .previewDisplayName("iPhone SE")

ContentView()
    .environment(\.sizeCategory, .accessibilityExtraExtraLarge) // 大字体模式
    .previewDisplayName("Large Text")

    }
    ``
    或者使用    PreviewProvider` (旧方式或复杂场景)：

    “`swift
    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
    Group { // 使用 Group 组合多个预览
    ContentView()
    .previewDisplayName(“Default”)

            ContentView()
            .previewDevice("iPad Pro (11-inch) (4th generation)")
            .previewDisplayName("iPad Pro")
            .preferredColorScheme(.dark) // 暗黑模式
    }
}

    }
    “`

实时预览极大地加快了开发迭代速度，鼓励你频繁地修改代码并查看效果。

动手实践：构建一个简单的互动应用

我们来创建一个简单的应用：一个显示文本的视图，点击按钮可以改变文本内容。

  1. 打开你之前创建的项目，找到 ContentView.swift。
  2. 修改 ContentView 的代码如下：

“`swift
import SwiftUI

struct ContentView: View {
// 1. 声明一个 @State 变量来保存文本内容
@State private var message = “Hello, SwiftUI!”

var body: some View {
    // 2. 使用 VStack 垂直布局
    VStack(spacing: 20) { // 添加一些间距
        // 3. 显示文本，绑定到 message 状态
        Text(message)
            .font(.largeTitle) // 设置字体大小
            .padding() // 添加内边距
            .background(.yellow) // 设置背景颜色
            .cornerRadius(10) // 设置圆角
            .shadow(radius: 5) // 添加阴影

        // 4. 添加一个按钮
        Button("Change Message") {
            // 5. 按钮的动作：修改 message 状态
            message = "SwiftUI is awesome!"
        }
        .padding() // 给按钮添加内边距
        .background(.blue) // 设置按钮背景
        .foregroundColor(.white) // 设置按钮文字颜色
        .cornerRadius(8) // 设置按钮圆角
    }
    .padding() // 给整个 VStack 添加外层内边距
}

}

// 预览部分

Preview {

ContentView()

}
“`

代码解释：

  • @State private var message = "Hello, SwiftUI!": 我们声明了一个私有的 @State 字符串变量 message，初始值是 “Hello, SwiftUI!”。
  • VStack(spacing: 20): 使用 VStack 容器垂直堆叠内容，子视图之间有 20 个点的间距。
  • Text(message): Text 视图直接使用 message 变量的内容。当 message 改变时，Text 会自动更新。
  • Button("Change Message") { ... }: 创建一个按钮，按钮上显示的文字是 “Change Message”。按钮的第二个参数是一个闭包 { ... }，这里面的代码会在按钮被点击时执行。
  • message = "SwiftUI is awesome!": 在按钮的动作闭包中，我们修改了 @State 变量 message 的值。这触发了 SwiftUI 的更新机制。
  • 各种 .modifier(): 我们使用了一系列修饰符来美化 Text 和 Button 的外观。

运行和预览：

  1. 在 Xcode 的 Canvas 区域，你应该能看到这个界面的实时预览。
  2. 点击 Canvas 左上角的播放按钮，进入实时预览模式。
  3. 现在你可以在预览中点击 “Change Message” 按钮。你会发现文本从 “Hello, SwiftUI!” 变成了 “SwiftUI is awesome!”。
  4. 你也可以选择一个模拟器（Product > Destination），然后点击工具栏上的运行按钮（或 Cmd + R）将应用运行在模拟器中进行测试。

恭喜你！你已经成功创建了一个简单的 SwiftUI 应用，并理解了 @State 的基本用法。

进一步学习的方向

掌握了上述核心概念后，你可以继续探索 SwiftUI 的更高级特性：

  • 更复杂的状态管理:
    • @ObservedObject, @StateObject: 用于管理引用类型的数据模型 (classes)。
    • @EnvironmentObject: 用于在视图层级中传递共享数据。
    • @Observable (iOS 17+): Swift 5.9 引入的新宏，更简洁高效的引用类型状态管理方式。
  • 手势识别 (Gestures): .onTapGesture, .onLongPressGesture, .dragGesture() 等。
  • 动画 (Animations): .animation(), withAnimation { ... }, .transition().
  • 数据持久化: 结合 Core Data 或 SwiftData (iOS 17+)。
  • 图形与绘制: Shape, Path, Canvas.
  • 自定义视图: 创建可复用的视图组件。
  • 更复杂的布局: GeometryReader, Grids, 自定义 Layout (iOS 16+).
  • 集成现有代码: 在 SwiftUI 中使用 UIKit/AppKit 视图 (UIViewRepresentable, NSViewRepresentable)，以及在 UIKit/AppKit 中使用 SwiftUI 视图 (UIHostingController, NSHostingController)。

学习资源推荐

  • Apple 官方文档: SwiftUI 的官方文档非常详细和权威。当遇到问题或想深入了解某个视图/修饰符时，查阅官方文档是最佳选择。
  • WWDC 视频: Apple 每年都会发布大量关于 SwiftUI 的 WWDC (Worldwide Developer Conference) 讲座视频，它们是学习最新特性和最佳实践的重要资源。
  • SwiftUI Tutorials (Apple Developer Website): Apple 提供了一系列优秀的 SwiftUI 教程，通过动手实践构建真实应用来学习。
  • 社区和论坛: Stack Overflow、Reddit (r/SwiftUI)、开发者论坛等是提问和交流的好地方。
  • 在线课程和书籍: 许多平台提供了高质量的 SwiftUI 付费或免费课程。

常见问题与技巧

  • 值类型 vs 引用类型: SwiftUI 的视图是值类型 (structs)。修改一个视图并不会改变原视图，而是创建了一个新的视图。状态管理（如 @State）就是用来处理这种值类型更新导致 UI 变化的需求。而对于数据模型，通常使用引用类型 (classes)，并通过 @ObservedObject 或 @StateObject 来观察其变化。
  • 为什么需要 $?: $ 符号用于从属性包装器（如 @State, @StateObject, @EnvironmentObject）中“提取”一个绑定 (Binding) 或动态成员查找，以便将状态的双向同步能力传递给其他视图。
  • 预览不工作: 确保你的代码没有编译错误。有时需要 Clean Build Folder (Product > Clean Build Folder) 或重启 Xcode。
  • 理解数据流: SwiftUI 的一个关键挑战是理解数据如何在视图之间流动以及状态是如何管理的。花时间学习 @State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject 等的工作原理至关重要。
  • 拥抱声明式思维: 从命令式编程转向声明式编程需要适应。不要思考“我如何一步步构建这个 UI”，而是思考“当数据是 X 时，我的 UI 应该长什么样”。

结语

SwiftUI 是 Apple 平台开发的未来。它提供了一种现代、高效且愉快的 UI 开发体验。通过本文的入门指南，你已经掌握了 SwiftUI 的核心概念，包括视图、修饰符、状态管理、布局、列表和导航。

记住，最好的学习方法是动手实践。不断尝试构建小的 UI 组件，理解每个视图和修饰符的作用，通过预览和运行应用来观察效果。不要害怕犯错，调试和解决问题是学习过程的重要组成部分。

祝你在 SwiftUI 的学习旅程中一切顺利，期待看到你用 SwiftUI 构建出色的应用！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部