说实话，距离上一次我真正静下心来钻研 SwiftUI Yi经过去好几个年头了。技术圈子的迭代速度简直让人咋舌，好多曾经烂熟于心的知识点，现在回想起来竟然有些模糊不清。Zui近刚好手头项目告一段落，腾出了一些空档，心想不如就趁着这个机会，好好地从零开始回顾一下吧。毕竟Apple 官方对它的定义是如此诱人——一个现代化的、声明式的 UI 框架，它让我们Neng够仅凭 Swift 这一门语言，就Neng在 Apple 的全生态平台上构建出令人惊艳的用户界面。

这不仅仅是一次简单的复习，geng像是一场老友重逢。今天我们就来聊聊 SwiftUI 的那些事儿，以及如何搭建一个得心应手的开发环境。别担心，我会尽量把那些枯燥的概念抛到脑后用geng接地气的方式来聊聊。

初识 SwiftUI：不仅仅是代码

在正式动手敲代码之前，我们得先搞清楚 SwiftUI 到底是个什么“神仙”框架。以前我们写 UIKit 的时候，那种命令式的编程方式，总是让我们陷入无尽的 Controller 代码泥潭中。而 SwiftUI 带来的是一种全新的思维方式——声明式。你只需要告诉界面“长什么样”，剩下的渲染工作，系统会帮你搞定。

这就好比画画，以前你得一笔一笔地告诉画笔怎么动，现在你只需要描述出你想要的是一幅“星空图”，画布就会自动呈现出来。这种跨越式的进步，对于追求开发效率和界面美观度的我们来说简直就是一种救赎。

工欲善其事：Xcode 环境的搭建

既然要玩转 SwiftUI，一把趁手的兵器是少不了的，这自然就是 Xcode 了。当你第一次从 App Store 下载并安装这个庞然大物时心里多少会有些激动吧？不过别急着点 Create，Xcode 首次启动时通常会弹出一个提示框，询问你是否要安装额外的组件。

这些组件是必不可少的，它们包含了模拟器运行所需的各种工具链。这时候，你只需要耐心地等待进度条走完，去泡杯咖啡，回来后一切就准备就绪了。

创建你的第一个项目

打开 Xcode 后选择 "Create a new Xcode project"。在模板选择界面你会kan到琳琅满目的选项，记得在左侧栏选中 "iOS"，然后选择 "App" 模板。点击 "Next" 后你需要填写一些基本信息。

这里有个小细节值得注意：Product Name 随便你怎么起，但 Interface 一定要选 "SwiftUI"，Language 必须选 "Swift"。至于 Storage，选 None 就行了毕竟我们现在的重点是 UI，而不是 CoreData。

选一个你喜欢的文件夹保存项目，然后狠狠地点击 "Create"。恭喜你，你的第一个 SwiftUI 项目就这样诞生了！

解剖麻雀：项目结构一览

项目创建完成后kan着左侧那一排文件树，新手可Neng会觉得眼花缭乱。其实SwiftUI 的项目结构比以前的 UIKit 要清爽得多。我们来重点扒一扒几个核心文件。

应用程序的入口：App 文件

通常以 `App` 的那个文件，就是整个应用的“心脏”。它定义了应用的生命周期和顶层结构。

import SwiftUI
@main
struct SwiftUIStarterApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView
        }
    }
}

这里有几个关键点值得琢磨：

@main这个标记就像是给编译器下的指令，告诉它“嘿，程序的入口就在这儿！”。

App 协议这是 SwiftUI 应用的根基，所有的应用dou必须遵循这个协议。

Scene你Ke以把它理解为应用的一个“场景”。在 iOS 上，通常就是一个窗口。

WindowGroup这是用来管理窗口的容器，它Neng自动处理多窗口、分屏等复杂场景。

主视图：ContentView

接下来就是 `ContentView.swift` 了这是应用默认展示给用户的第一个界面。在这里你会kan到 SwiftUI Zui核心的代码结构。

import SwiftUI
struct ContentView: View {
    var body: some View {
        VStack {
            Image
                .imageScale
                .foregroundStyle
            Text
        }
        .padding
    }
}
#Preview {
    ContentView
}

这段代码虽然短，但信息量hen大：

View 协议所有的视图组件，dou必须遵循这个协议。

body这是一个计算属性，它描述了视图里到底有什么。注意，它返回的是一个 View。

#Preview这是 Xcode 15 之后引入的新宏语法，用来替代以前的 `PreviewProvider`。它让你在写代码的时候就Neng实时kan到效果，简直是神技。

资源管理

除了代码文件，你还会kan到 `Assets.xcassets` 和 `Info.plist`。前者是存放图片、颜色资源的宝库，后者则记录着应用名称、版本号等配置信息。虽然 SwiftUI 试图减少对这些配置文件的依赖，但它们依然是不可或缺的。

预览：所见即所得的魔法

说到 SwiftUI，就不得不提它那令人惊叹的预览功Neng。在 Xcode 右侧的那个面板，Ke以说是 SwiftUI 开发者的“第二双眼睛”。它允许你实时查kan界面效果，而不需要每次dou跑到模拟器里去跑一遍。

但是预览的强大远不止于此。你Ke以通过代码定制各种预览场景，比如同时查kan默认模式和暗黑模式，或者kankan在不同设备上的表现。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView
                .previewDisplayName
            ContentView
                .previewDisplayName
                .preferredColorScheme
            ContentView
                .previewDisplayName
                .previewDevice)
        }
    }
}

这样一来适配工作就变得轻松多了。哪怕你是为了适配某个老旧的 iPhone SE，也Neng在预览里一目了然。

那些好用的快捷键

为了提高效率，熟练掌握几个快捷键是hen有必要的：

Option + Command + P当你修改了代码，预览没反应时按这个键强制刷新。

Command + K有时候构建缓存会出问题，按这个键清除一下构建，往往Neng解决莫名其妙的报错。

实战演练：构建一个欢迎页面

光说不练假把式。我们来点实际的，写一个稍微复杂一点的欢迎页面。这个页面需要包含一个图标、标题、标语，以及一个点击后会跳转的按钮。为了增加点难度，我们还要加上渐变背景和状态控制。

需求拆解

我们需要一个状态变量来控制是否显示欢迎页。Ru果显示，就展示漂亮的欢迎界面；Ru果不显示，就展示主内容界面。这涉及到 SwiftUI 中Zui核心的数据流概念——`@State`。

import SwiftUI
struct WelcomeView: View {
    // 状态变量，用于控制是否显示欢迎页面
    @State private var isWelcomeShown = true
    var body: some View {
        if isWelcomeShown {
            VStack {
                // 应用图标
                Image
                    .resizable
                    .aspectRatio
                    .frame
                    .foregroundStyle
                // 应用名称
                Text
                    .font
                    .fontWeight
                // 欢迎标语
                Text
                    .font
                    .foregroundStyle
                // 开始按钮
                Button {
                    // 点击按钮后隐藏欢迎页面
                    isWelcomeShown = false
                }
                .buttonStyle
                .tint
            }
            .padding
            .frame
            .background(
                LinearGradient(
                    colors: ,
                    startPoint: .top,
                    endPoint: .bottom
                )
            )
        } else {
            // 主内容页面
            VStack {
                Text
                    .font
                Text
                    .foregroundStyle
            }
            .padding
        }
    }
}
#Preview {
    WelcomeView
}

代码背后的逻辑

这段代码其实包含了hen多 SwiftUI 的精髓：

@State这是视图的本地状态。当 `isWelcomeShown` 的值发生变化时SwiftUI 会自动重新渲染视图。这就是所谓的“数据驱动界面”。

VStack垂直堆栈容器，它把子视图从上到下排列。与之对应的还有 `HStack`和 `ZStack`。

Image 和 TextZui基础的视图组件。这里我们用了系统自带的 SF Symbols 图标，非常方便。

Button交互组件。闭包里的代码就是点击事件，这里我们简单地修改了状态变量。

LinearGradient线性渐变背景，Neng让界面瞬间提升一个档次不再那么单调。

条件渲染使用 `if-else` 语句根据状态动态切换显示内容，这在开发中非常常见。

小结

通过这一番折腾，相信你对 SwiftUI 的基本概念和开发环境Yi经有了比较深入的了解。从搭建环境到理解项目结构，再到动手写一个带交互的页面这仅仅是 SwiftUI 浩瀚海洋的一角。

不得不说SwiftUI 的学习曲线虽然前期有点陡峭，特别是当你习惯了 UIKit 的那一套思维模式后需要花点时间去转变观念。但一旦你跨过了那道坎，体会到了声明式语法的优雅和预览功Neng的便捷，你就会发现，原来写 iOS 代码也Ke以这么快乐。

接下来的日子里我们还会遇到geng复杂的布局、geng高级的数据绑定，以及令人头秃的动画效果。但请记住保持好奇心，多动手尝试，遇到问题别慌，Xcode 的报错信息虽然有时候hen晦涩，但总Neng找到蛛丝马迹。

好了今天的回顾就先到这里。希望这篇文章Neng帮你理清一些思路，让你在 SwiftUI 的进阶之路上走得geng加稳健。别忘了代码是写出来的，不是kan出来的，赶紧打开你的 Xcode，去创造点什么吧！

---