SwiftUI 从零开始：基础概念与快速入门 – wiki基地

作者： /

SwiftUI 从零开始：基础概念与快速入门

引言：迎接声明式 UI 的时代

在 iOS、macOS、watchOS 和 tvOS 开发的世界里，构建用户界面（UI）一直是核心任务。长期以来，UIKit（iOS/tvOS）和 AppKit（macOS）是 Apple 平台 UI 开发的主要框架。它们采用了“命令式”（Imperative）的编程范式，开发者需要一步步精确地告诉系统如何创建、配置和管理 UI 元素，例如：创建一个按钮、设置它的位置和大小、添加一个点击事件监听器、手动更新文本等等。

然而，随着应用程序复杂度的不断提升，命令式 UI 开发也带来了挑战：代码量大、维护困难、状态管理复杂、跨平台适配效率低等问题日益突出。

正是在这样的背景下，Apple 在 WWDC 2019 上推出了 SwiftUI。SwiftUI 是一个全新的、跨所有 Apple 平台的 UI 开发框架。它彻底改变了传统的 UI 构建方式，引入了“声明式”（Declarative）编程范式。

声明式 UI 的核心思想是：你只需要描述你的 UI 在给定状态下应该“看起来是什么样子”，而无需关心具体“如何”去实现这个状态的转变。当数据状态发生变化时，SwiftUI 会自动、高效地更新对应的 UI 部分。这极大地简化了 UI 开发流程，提高了开发效率，并让代码更加简洁、易读和易于维护。

如果你是 Swift 语言的初学者，或者是有 UIKit/AppKit 经验但想转型到现代 UI 开发方式的开发者，学习 SwiftUI 无疑是一个明智的选择。本文将带你从零开始，深入理解 SwiftUI 的基础概念，并通过实际操作快速入门。

学习 SwiftUI 的准备工作

在开始 SwiftUI 的学习之旅前，你需要准备以下环境：

  1. 一台 Mac 电脑： SwiftUI 开发必须在 macOS 环境下进行。
  2. Xcode： Apple 官方的集成开发环境（IDE）。你需要安装 Xcode 11 或更高版本，因为 SwiftUI 是从 Xcode 11 开始引入的。建议安装最新稳定版 Xcode，以获得最好的 SwiftUI 支持和预览功能。你可以从 Mac App Store 或 Apple Developer 网站下载。
  3. Swift 语言基础： SwiftUI 是基于 Swift 语言构建的。虽然 SwiftUI 本身有自己独特的语法和概念，但理解 Swift 的基本语法（变量、常量、函数、结构体、枚举、协议等）将非常有帮助。如果你还不熟悉 Swift，建议先花一点时间学习 Swift 的基础知识。

准备好这些，我们就可以开始探索 SwiftUI 的世界了。

SwiftUI 的核心概念

理解 SwiftUI，需要先掌握几个关键的核心概念：

1. 声明式 UI (Declarative UI)

这是 SwiftUI 与 UIKit/AppKit 最本质的区别。

  • 命令式 (Imperative): 你告诉系统每一步操作。例如，构建一个标签和按钮：
    • 创建一个 UILabel 对象。
    • 设置它的文本。
    • 创建一个 UIButton 对象。
    • 设置它的标题。
    • 设置按钮的位置和大小。
    • 添加一个 target-action 方法，指定按钮被点击时执行哪个函数。
    • 将标签和按钮添加到父视图。
  • 声明式 (Declarative): 你描述 UI 的最终状态。例如，构建同样的标签和按钮：
    • “我想要一个垂直堆栈 (VStack)。”
    • “在这个堆栈里，我想要一个显示特定文本的文本视图 (Text)。”
    • “在这个堆栈里，我想要一个带标题的按钮 (Button)，当它被按下时，执行某个操作。”

SwiftUI 框架会根据你的描述（你的视图结构和状态数据）自动构建和更新 UI。你声明了 UI 的“愿景”，框架负责实现它。

2. 视图 (Views)

在 SwiftUI 中，所有的 UI 元素都是视图（View）。一个视图是一个遵循 View 协议的轻量级结构体。它可以是简单的控件，如 Text (文本)、Image (图片)、Button (按钮)，也可以是复杂的布局容器，如 VStack (垂直堆栈)、HStack (水平堆栈)、ZStack (Z轴堆栈，用于叠加视图)，还可以是你自定义的组合视图。

每个视图都有一个 body 计算属性，它返回一个或多个遵循 View 协议的内容。这形成了视图的层级结构。例如：

swift
struct ContentView: View {
var body: some View {
// body 返回一个 VStack
VStack {
// VStack 包含一个 Text 和一个 Image
Text("你好, SwiftUI!") // Text 是一个视图
Image(systemName: "heart.fill") // Image 是一个视图
.foregroundColor(.red) // 使用修饰符改变 Image 外观
} // VStack 也是一个视图
}
}

这里的 ContentView 也是一个视图，它的 body 返回一个 VStack 视图，VStack 内部又包含 Text 和 Image 视图。视图可以无限嵌套，构建出复杂的 UI 结构。

3. 修饰符 (Modifiers)

修饰符是 SwiftUI 中一个极其强大且常用的概念。修饰符是遵循 ViewModifier 协议的类型，它们通过调用视图实例的方法来修改视图的外观或行为，并返回一个新的视图。

修饰符可以链式调用，每个修饰符都会应用到前一个修饰符返回的视图上。例如：

swift
Text("SwiftUI")
.font(.largeTitle) // 应用字体修饰符，返回一个新的 Text 视图
.foregroundColor(.blue) // 应用前景颜色修饰符，返回又一个新的 Text 视图
.padding() // 应用内边距修饰符，返回一个添加了内边距的视图
.shadow(radius: 5) // 应用阴影修饰符

注意：修饰符的顺序很重要，不同的顺序可能产生不同的效果。例如，先设置背景再加内边距，背景会填充到内边距区域；先加内边距再设置背景，背景只填充原始视图区域。

修饰符极大地提高了代码的可读性和复用性，它们是 SwiftUI 视图定制的主要方式。

4. 布局容器 (Layout Containers)

SwiftUI 使用堆栈（Stack）来管理子视图的布局。常见的堆栈有：

  • VStack: 垂直堆栈，将子视图沿垂直方向排列。
  • HStack: 水平堆栈，将子视图沿水平方向排列。
  • ZStack: Z轴堆栈，将子视图沿 Z轴（深度）方向堆叠，后面的视图会覆盖在前面的视图之上。

这些堆栈视图可以设置对齐方式（alignment）和间距（spacing）。它们是构建复杂界面的基础骨架。

swift
HStack(spacing: 20) { // 子视图之间有20点间距
Image(systemName: "star.fill")
VStack(alignment: .leading) { // 垂直堆栈，子视图左对齐
Text("标题").font(.headline)
Text("副标题").font(.subheadline)
}
}

5. 状态管理 (State Management)

声明式 UI 的核心在于“状态决定 UI”。当底层数据状态改变时，SwiftUI 会自动更新 UI。SwiftUI 提供了多种机制来管理应用程序的状态，最基础且常用的包括：

  • @State: 用于管理视图内部的简单值类型状态（如 Int, Bool, String 等）。当 @State 标记的变量值改变时，SwiftUI 会自动重绘（re-render）当前视图及其依赖该状态的子视图。@State 变量通常是私有的，属于视图自身。

    “`swift
    struct CounterView: View {
    @State private var count = 0 // 声明一个私有的状态变量

    var body: some View {
    VStack {
        Text("计数: \(count)") // Text 依赖于 count
        Button("增加") {
            count += 1 // 修改 count，视图会自动更新
        }
    }
}

    }
    “`

  • @Binding: 用于在父视图和子视图之间建立双向绑定。子视图可以通过 @Binding 访问和修改父视图 @State 或其他类型状态变量的值，而无需拥有该状态的所有权。这允许子视图影响父视图的状态。

    “`swift
    struct ParentView: View {
    @State private var isOn = false // 父视图的状态

    var body: some View {
    VStack {
        Text("开关状态: \(isOn ? "开" : "关")")
        // 将 isOn 的绑定传递给子视图
        ChildView(switchState: $isOn)
    }
}

    }

    struct ChildView: View {
    @Binding var switchState: Bool // 接收一个 Bool 类型的绑定

    var body: some View {
    Toggle("切换开关", isOn: $switchState) // Toggle 会通过 binding 修改 switchState
}

    }
    ``
    在    ParentView中，$isOn是@State变量isOn的绑定投影（Binding Projection），它创建了一个Binding类型的值，可以传递给需要@Binding` 参数的子视图。

  • @ObservableObject, @StateObject, @EnvironmentObject 等: 用于管理更复杂的状态，特别是跨多个视图共享或来自外部数据源的状态。这些涉及协议（ObservableObject）和类的使用，适合大型应用的状态管理，在快速入门阶段可以先了解概念，后续再深入学习。

理解 @State 和 @Binding 对于构建交互式 SwiftUI 界面至关重要。

快速入门：创建你的第一个 SwiftUI 项目

现在，让我们动手创建一个简单的 SwiftUI 项目，将上述概念付诸实践。

步骤 1: 创建新项目

  1. 打开 Xcode。
  2. 在欢迎界面选择 “Create a new Xcode project”，或者从菜单栏选择 “File” > “New” > “Project…”。
  3. 在模板选择界面，选择 “iOS” 选项卡下的 “App” 模板，然后点击 “Next”。
  4. 配置你的项目：
    • Product Name: 输入项目名称，例如 MyFirstSwiftUIApp。
    • Team: 如果你加入了 Apple Developer Program，选择你的开发团队。如果没有，可以选择 “Personal Team” 或留空（部分功能如真机调试可能受限）。
    • Organization Identifier: 使用反向域名格式，例如 com.yourcompanyname。这将与 Product Name 结合形成你的 Bundle Identifier。
    • Interface: 重点选择 “SwiftUI”。
    • Life Cycle: 选择 “SwiftUI App”。
    • Language: 确认是 “Swift”。
    • 取消勾选 “Use Core Data” 和 “Include Tests”（对于快速入门，可以简化）。
  5. 点击 “Next”。
  6. 选择一个目录保存你的项目，然后点击 “Create”。

步骤 2: 理解初始项目结构

Xcode 会为你生成一个基本的 SwiftUI 项目结构。主要文件包括：

  • YourAppNameApp.swift: 这是应用程序的入口文件。它包含一个遵循 App 协议的结构体。App 的 body 属性通常返回一个 WindowGroup，WindowGroup 里面指定了应用程序启动时显示的第一个视图（通常是 ContentView）。

    “`swift
    import SwiftUI

    @main // 应用程序入口
    struct MyFirstSwiftUIApp: App {
    var body: some Scene {
    WindowGroup { // 一个窗口场景
    ContentView() // 显示 ContentView 作为根视图
    }
    }
    }
    “`

  • ContentView.swift: 这是应用程序的主视图文件。它包含一个遵循 View 协议的 ContentView 结构体。Xcode 默认会在这里生成一个简单的 “Hello, world!” 示例。

    “`swift
    import SwiftUI

    struct ContentView: View {
    var body: some View {
    VStack { // 垂直堆栈
    Image(systemName: “globe”) // 系统图标
    .imageScale(.large)
    .foregroundColor(.accentColor)
    Text(“Hello, world!”) // 文本视图
    }
    .padding() // 给 VStack 添加内边距
    }
    }

    // 预览区域的代码，不会被编译到最终应用中
    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
    ContentView()
    }
    }
    “`

步骤 3: 使用 Canvas 预览

Xcode 的 SwiftUI Canvas 功能是 SwiftUI 开发的一大利器。它可以在不运行整个应用程序的情况下，实时显示你的视图代码对应的 UI 效果。

  1. 打开 ContentView.swift 文件。
  2. 如果 Canvas 区域没有显示，可以点击 Xcode 右上角的 “Adjust Editor Options” 按钮（看起来像两个交错的圆圈），然后选择 “Canvas”。
  3. Canvas 区域可能会显示一个 “Resume” 按钮，点击它或使用快捷键 Option + Command + P 来启动预览。
  4. 稍等片刻，你应该能在 Canvas 中看到 “Hello, world!” 文本和一个地球图标。

你可以在 Canvas 中与 UI 进行简单交互（需要点击 Canvas 底部的 “Live Preview” 按钮，看起来像一个播放按钮），也可以选择不同的设备模拟器进行预览。

步骤 4: 修改视图并观察变化

现在，让我们修改 ContentView 的代码，并观察 Canvas 中的实时变化。

修改 ContentView.swift 文件：

“`swift
import SwiftUI

struct ContentView: View {
var body: some View {
VStack { // 垂直堆栈
Image(systemName: “swift”) // 将图标改为 Swift 图标
.resizable() // 使图片可调整大小
.scaledToFit() // 按比例缩放到合适大小
.frame(width: 100, height: 100) // 设置图片大小
.foregroundColor(.orange) // 设置图标颜色

        Text("Welcome to SwiftUI!") // 修改文本内容
            .font(.largeTitle)      // 设置字体为大标题
            .fontWeight(.bold)      // 设置字体加粗

        Text("Let's build amazing apps.") // 添加新的文本视图
            .foregroundColor(.gray)   // 设置文本颜色为灰色
            .padding(.top, 5)         // 在顶部添加 5 点内边距
    }
    .padding() // 给 VStack 添加内边距
    .background(Color.yellow.opacity(0.2)) // 给 VStack 添加半透明黄色背景
    .cornerRadius(10) // 给 VStack 添加圆角
}

}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
// 可以在预览中添加修饰符，只影响预览效果
.previewDevice(“iPhone 13 Pro”) // 预览在 iPhone 13 Pro 上
.preferredColorScheme(.dark) // 预览深色模式
}
}
“`

保存文件后，Canvas 会自动刷新（如果开启了自动预览）或在你点击 Resume 后刷新，显示你修改后的 UI 效果。

在这个例子中，我们使用了更多的修饰符：
* .resizable(), .scaledToFit(), .frame() 用于调整 Image 的大小和模式。
* .font(), .fontWeight() 用于修改 Text 的字体样式。
* .foregroundColor() 设置颜色。
* .padding(.top, 5) 只在顶部添加内边距。
* .background() 设置背景。
* .cornerRadius() 设置圆角。

这些修饰符通过链式调用应用到视图上，一步步构建出最终的 UI 效果。

构建一个简单的交互式界面：计数器

现在，让我们结合 @State 来创建一个简单的计数器应用，点击按钮数字会增加。

修改 ContentView.swift：

“`swift
import SwiftUI

struct ContentView: View {
// 声明一个 @State 变量，用于存储计数器的值
@State private var count = 0

var body: some View {
    VStack(spacing: 20) { // 垂直堆栈，间距为 20

        Text("计数器的值:")
            .font(.headline)

        // 显示 count 的值，当 count 改变时，Text 会自动更新
        Text("\(count)")
            .font(.system(size: 60, weight: .bold, design: .rounded))
            .foregroundColor(.blue)

        // 一个按钮
        Button(action: {
            // 按钮的点击操作：修改 @State 变量 count 的值
            count += 1
        }) {
            // 按钮的标签（Button Label），可以是一个 Text，也可以是其他视图
            Text("增加计数")
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
                .cornerRadius(10)
        }
        .shadow(radius: 5) // 给按钮添加阴影
    }
    .padding() // 给整个 VStack 添加内边距
}

}

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

在 Canvas 中点击 “Live Preview” 按钮，然后点击“增加计数”按钮。你会看到文本框中的数字实时增加。

这个例子演示了 @State 的核心作用：
1. 我们使用 @State private var count = 0 声明了一个状态变量。
2. Text("\(count)") 视图依赖于 count 的值。
3. Button 的 action 闭包中，我们修改了 count 的值 (count += 1)。
4. SwiftUI 检测到 @State 变量 count 发生了变化，会自动找到所有依赖 count 的视图（在这里是那个显示数字的 Text），并重新计算它们的 body，从而更新 UI，显示最新的计数。

这就是 SwiftUI 声明式 UI 和状态管理的魅力所在：你只管修改状态，UI 会自动响应变化。

更多的基础视图和布局

除了 Text, Image, Button, VStack, HStack, ZStack 之外，SwiftUI 还提供了许多其他基础视图和布局方式：

  • 输入控件: TextField (文本输入框), SecureField (安全文本输入框，如密码), Toggle (开关), Slider (滑块), Stepper (步进器), Picker (选择器)。
  • 列表与导航: List (列表), NavigationLink (导航链接，用于跳转到另一个视图), NavigationView (导航视图容器)。
  • 组织视图: Group (用于逻辑分组视图，不影响布局), Section (用于在 List 或 Form 中创建带有标题的分组)。
  • 滚动视图: ScrollView (使内容可滚动)。
  • 图形绘制: Shape (形状，如 Circle, Rectangle, Capsule), Path (自定义路径)。

尝试将这些视图添加到你的项目中：

“`swift
import SwiftUI

struct MoreViewsExample: View {
@State private var name = “”
@State private var showGreeting = true
@State private var volume = 0.5

var body: some View {
    NavigationView { // 添加导航视图容器
        Form { // 使用 Form 组织输入控件
            Section(header: Text("用户信息")) { // 分组
                TextField("请输入您的名字", text: $name) // 文本输入框，使用 $name 创建绑定
                Toggle("显示问候语", isOn: $showGreeting) // 开关，使用 $showGreeting 创建绑定
                Slider(value: $volume, in: 0...1) { // 滑块，使用 $volume 创建绑定
                    Text("音量") // 无障碍标签
                } minimumValueLabel: {
                    Text("0")
                } maximumValueLabel: {
                    Text("1")
                }
                Text("当前音量: \(volume, specifier: "%.2f")") // 显示滑块的值
            }

            Section {
                // NavigationLink 用于导航到另一个视图
                NavigationLink(destination: DetailView(name: name)) {
                    Text("前往详情页")
                }
            }
        }
        .navigationTitle("更多视图示例") // 设置导航栏标题
    }
}

}

// 详情页视图
struct DetailView: View {
let name: String // 接收父视图传递的数据

var body: some View {
    VStack {
        if !name.isEmpty {
            Text("你好, \(name)!")
                .font(.largeTitle)
        } else {
             Text("请返回输入您的名字")
                .font(.title2)
        }
        // 你可以在这里添加更多内容
    }
    .navigationTitle("详情页") // 设置详情页导航栏标题
}

}

struct MoreViewsExample_Previews: PreviewProvider {
static var previews: some View {
MoreViewsExample()
}
}
``
将ContentView()在YourAppNameApp.swift中改为MoreViewsExample()来运行这个新视图。或者在ContentView_Previews中直接预览MoreViewsExample()`。

这个例子展示了：
* NavigationView 作为根容器提供导航功能。
* Form 和 Section 组织输入控件。
* TextField, Toggle, Slider 的基本用法，以及如何使用 $variableName 创建绑定来读写 @State 变量。
* NavigationLink 实现页面跳转，并传递数据 (name) 到下一个视图 (DetailView)。

SwiftUI 的优势总结

通过上面的介绍和示例，我们可以总结 SwiftUI 的主要优势：

  1. 声明式语法: 代码更简洁、易读、易于维护，开发者可以专注于“是什么”而不是“如何做”。
  2. 跨平台: SwiftUI 可以在 iOS, macOS, watchOS, tvOS 上使用同一套 API 构建原生应用，大大提高了跨平台开发的效率。
  3. 实时预览: Xcode Canvas 提供强大的实时预览功能，所见即所得，加速 UI 开发和调试过程。
  4. 与 Swift 深度集成: SwiftUI 利用了 Swift 语言的现代特性（如结构体、枚举、协议、属性包装器），提供了流畅的开发体验。
  5. 自动适应和响应: SwiftUI 的布局系统和状态管理机制使得构建能够自动适应不同设备尺寸、方向和 Dark Mode 的界面变得更加容易。
  6. 强大的内置功能: 提供了对动画、手势、拖放、无障碍功能等的原生支持。

进阶方向

本文仅仅是 SwiftUI 的基础入门。要构建更复杂、更强大的应用，你需要进一步学习：

  • 更高级的状态管理: @ObservedObject, @StateObject, @EnvironmentObject, @Environment, Combine 框架的使用。
  • 数据流: 理解各种属性包装器如何协同工作，管理数据在应用中的流动。
  • 复杂布局: GeometryReader (获取视图的几何信息), PreferenceKey, AnchorPreference 等高级布局技术。
  • 动画和手势: 如何为视图添加隐式和显式动画，以及处理各种用户手势。
  • 绘图和图形: 使用 Canvas 进行自定义绘图。
  • 集成现有代码: 在 SwiftUI 中使用 UIKit/AppKit 视图 (UIViewRepresentable, NSViewRepresentable)，反之亦然。
  • 性能优化: 理解 SwiftUI 的渲染机制，如何优化视图更新。

结论

SwiftUI 代表着 Apple 平台 UI 开发的未来。它以其声明式语法、跨平台能力、实时预览和强大的状态管理机制，极大地提高了开发效率和代码质量。从零开始学习 SwiftUI，首先要理解视图、修饰符、布局容器和状态（特别是 @State 和 @Binding）这些核心概念。然后，通过动手创建项目、修改代码、观察预览，将理论知识转化为实践经验。

这篇入门文章为你奠定了基础。现在，最重要的是动手实践。尝试构建更多不同类型的 UI 界面，实现简单的交互逻辑，遇到问题时查阅 Apple 官方文档、开发者社区和在线资源。

随着你对 SwiftUI 越来越熟悉，你将能够更轻松、更愉快地构建出精美、响应迅速且在 Apple 全平台无缝运行的应用程序。祝你在 SwiftUI 的学习和开发旅程中一切顺利！

发表评论

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

滚动至顶部