Build your first app in Swift Playgrounds
Swift & UI 进阶 20m

在 Swift Playgrounds 中构建你的第一个应用

Build your first app in Swift Playgrounds

2022年6月6日

在 Apple 官方观看视频

一句话判断

Swift Playgrounds 现在能直接构建完整应用、调试并提交到 TestFlight——iPad 开发者的工作流闭环终于形成了。

这场 Session 讲了什么

Swift Playgrounds 一直以来是学习 Swift 编程的教学工具，今年它进化成了一个轻量级的 IDE。Session 通过构建一个叫”Tea Time”的选茶应用，完整演示了从零开始到提交 TestFlight 的全流程。

核心能力包括：

项目模板和设置：提供多种起步模板（包括空白应用模板），可以在 App Settings 中配置应用名称、强调色、图标、Capabilities 和 Bundle ID。

代码库和自动补全：内置代码库（Library）包含 SwiftUI 视图、修饰符、SF Symbols 和颜色片段。代码编辑器支持行内自动补全建议。

Swift Package 依赖：可以从 URL 添加第三方包。Session 中演示了添加 Apple 的 swift-collections 包来使用 OrderedSet。

实时预览和调试：右侧面板显示实时预览，支持自定义 PreviewProvider。Console 面板输出调试信息，Issue 面板展示编译错误。

跨设备协作：通过 iCloud 共享文件夹实现 Mac 和 iPad 之间的项目同步。两个设备可以无缝接力开发。

提交 TestFlight：项目完成后可以直接从 Swift Playgrounds 提交到 TestFlight，不需要打开 Xcode。

值得深挖的点

TeaWheelView 的调试过程是 Session 中最精彩的部分。开发者在 iPad 上发现转盘总是选中同一个选项，虽然视觉上指针指向了不同的位置。通过检查代码发现是 selection 逻辑的 bug——这说明 Swift Playgrounds 的预览和交互能力已经足以调试 UI 级别的问题。

PreviewProvider 的多页面预览技巧很实用。开发者为 TeaWheelView 单独创建了一个 PreviewProvider，通过底部的小圆点切换不同的预览页面。这让你可以在不修改主应用的情况下独立调试某个视图组件。

Mac 和 iPad 的接力工作流展示了实际开发场景。Collett 在 Mac 上搭建基础结构和数据模型，把项目拖到 iCloud 共享文件夹，Connor 在 iPad 上打开同一个项目继续完成 UI 和交互逻辑。所有变更自动同步。

代码片段

创建茶列表并使用 OrderedSet：

import Collections // 需要添加 swift-collections 包
import SwiftUI

// 用 OrderedSet 避免重复的茶品
let teas: OrderedSet<String> = [
    "Jasmine Green",
    "Earl Grey",
    "Chamomile",
    "Oolong",
    "Peppermint"
]

struct ContentView: View {
    var body: some View {
        List(teas, id: \.self) { tea in
            Text(tea)
        }
    }
}

为自定义视图创建独立预览：

struct TeaWheelView_Previews: PreviewProvider {
    static var previews: some View {
        // 预览数据
        let items = ["Jasmine Green", "Earl Grey", "Oolong"]
        
        TeaWheelView(items: items)
            .padding()
    }
}

添加 Capability 和 Purpose String：

// 在 App Settings > Capabilities 中添加
// Capability: Microphone
// Purpose String: "Tea Time 使用麦克风来监听水壶烧开的声音"
// 这些信息会自动出现在 Info.plist 中

最佳实践

  • 用 Library 快速插入代码：不要手写所有 SwiftUI 视图，点击工具栏的 + 号从 Library 中选择
  • 先跑通再优化：用空白模板起步，先让预览跑起来，再逐步替换为实际代码
  • 接受自动补全建议：Swift Playgrounds 的行内补全对 SwiftUI API 记忆很有帮助
  • 给项目取有意义的文件名：默认的 “My App” 在共享和版本管理时会带来混乱
  • 善用 PreviewProvider 隔离调试：复杂视图单独创建预览，不要每次都跑整个应用

还有什么值得关注

  • Swift Playgrounds 的项目文件格式与 Xcode 兼容，可以在两个工具之间无缝切换
  • Capability 和 Purpose String 的配置让隐私权限声明变得可视化，不需要手动编辑 Info.plist
  • 目前还不是所有 Xcode 功能都能在 Swift Playgrounds 中使用，但它作为快速原型和教学工具已经足够
  • 通过 iCloud 共享文件夹协作的模式对小型教学团队特别友好
WWDC 2022