第一章：SwiftUI入门

说实话，我第一次接触 SwiftUI 的时候，心里是有点抵触的。毕竟 UIKit 用了那么多年，突然让我换一套全新的 UI 框架，总觉得没必要。但真正上手之后，我发现——嗯，真香。

这一章，咱们就从零开始，把 SwiftUI 的底子打扎实。你不需要有任何 SwiftUI 经验，但最好对 Swift 语言有个基本了解。

1.1 SwiftUI 到底是什么？

SwiftUI 是苹果在 2019 年推出的 UI 框架。它覆盖了 iOS、macOS、watchOS、tvOS 四个平台。说白了，你写一套代码，就能跑在苹果全家桶上。

我个人习惯把它理解成「UI 界的 Swift 语言」。为什么这么说？因为 SwiftUI 和 Swift 一样，强调安全、简洁、现代化。

核心特点：

  • 声明式语法：你告诉系统「我要什么」，而不是「怎么去做」
  • 实时预览：改代码的同时，右边就能看到效果
  • 跨平台：一套代码，多端运行
  • 数据驱动：数据变了，UI 自动更新

你想想看，以前用 UIKit 写一个列表，你得写代理、数据源、注册 cell……一堆模板代码。SwiftUI 呢？几行代码搞定。我在项目中遇到过好几次，用 UIKit 要写 50 行的功能，SwiftUI 10 行就解决了。

1.2 声明式语法 vs 命令式语法

这是新手最容易困惑的地方。我简单解释一下。

命令式语法：你一步步告诉计算机「先做 A，再做 B，最后做 C」。就像你给下属布置任务：「先去仓库拿货，再打包，最后贴快递单。」

声明式语法：你只告诉计算机「我要什么结果」。就像你点外卖：「我要一份红烧肉饭。」至于厨师怎么切肉、怎么炒、怎么装盘，你不用管。

来看个实际例子。用 UIKit 创建一个标签：

// UIKit - 命令式
let label = UILabel()
label.text = "Hello, SwiftUI!"
label.textColor = .blue
label.font = UIFont.systemFont(ofSize: 18)
label.textAlignment = .center
view.addSubview(label)

// 还要设置约束...
label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

再看看 SwiftUI 怎么做：

// SwiftUI - 声明式
Text("Hello, SwiftUI!")
    .font(.system(size: 18))
    .foregroundColor(.blue)
    .frame(maxWidth: .infinity, maxHeight: .infinity)

看到了吗？SwiftUI 的代码更短、更直观。你直接描述「我要一个蓝色的、18号字体的文本，居中显示」。系统会自动帮你处理布局。

我的建议：刚开始学的时候，别想着「用 SwiftUI 替代 UIKit」。把它们当成互补的工具。有些场景 UIKit 更合适，有些场景 SwiftUI 更高效。我现在的项目就是两者混用。

1.3 Xcode 15 环境搭建

工欲善其事，必先利其器。咱们先把开发环境搭好。

最低要求：

  • macOS Ventura 或更高版本
  • Xcode 15 或更高版本
  • iOS 17+ 模拟器（可选，但建议装）

安装步骤很简单：

  1. 打开 Mac App Store
  2. 搜索「Xcode」
  3. 点击「获取」并等待下载（大概 8-10GB）
  4. 安装完成后，打开 Xcode，它会自动安装一些工具链

注意：Xcode 15 要求 macOS Ventura 以上。如果你还在用 macOS Monterey，建议先升级系统。我曾经因为系统版本不够，折腾了半天才发现问题。

安装完成后，建议做两件事：

  • 打开 Xcode → Preferences → Platforms，确保 iOS 17 的模拟器已下载
  • 安装 Command Line Tools：在终端运行 xcode-select --install

1.4 创建第一个 SwiftUI 项目

好，现在咱们动手创建一个项目。跟着我一步步来：

  1. 打开 Xcode，点击「Create New Project」
  2. 选择「App」模板，点击 Next
  3. 填写项目信息：
    • Product Name：HelloSwiftUI
    • Team：选你自己的账号（没有就选 None）
    • Interface：SwiftUI
    • Language：Swift
  4. 点击 Next，选择保存位置

创建完成后，你会看到这样的代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

这就是 SwiftUI 的「Hello World」。咱们来拆解一下：

  • struct ContentView: View：声明一个视图结构体，遵循 View 协议
  • var body: some View：这是视图的内容。所有 UI 元素都放在这里
  • VStack：垂直排列容器，里面的元素从上到下排列
  • Image 和 Text：两个基础组件
  • #Preview：预览宏，让你在画布中看到效果

小技巧：点击右上角的「Resume」按钮（或者按 Command + Option + P），就能看到实时预览。改代码的时候，预览会自动刷新。这个功能我每天都在用，效率提升很明显。

试着改一下代码，把 Text("Hello, world!") 改成 Text("你好，SwiftUI！")。看看预览区是不是立刻变了？

这就是 SwiftUI 的魅力——所见即所得。你不需要像 UIKit 那样，改完代码还要重新编译运行才能看到效果。

1.5 本章小结

这一章咱们走完了 SwiftUI 的入门流程。你知道了：

  • SwiftUI 是什么，它和 UIKit 有什么区别
  • 声明式语法和命令式语法的核心差异
  • 如何搭建 Xcode 15 开发环境
  • 如何创建并运行第一个 SwiftUI 项目

下一章，咱们会深入 SwiftUI 的核心概念——视图、修饰符和布局系统。到时候你会看到，SwiftUI 的布局方式有多灵活。

嗯，先消化一下今天的内容。有任何问题，欢迎随时交流。

公众号：蓝海资料掘金营，微信 deep3321

← 上一章 📖 返回目录 下一章 →