Build your first app in Swift Playgrounds

Highlight

Swift Playgrounds 4 让 iPad 和 Mac 都能从零创建完整 App。Collett 和 Connor 用一杯茶的功夫演示了空白模板起步、SwiftUI 搭界面、Swift Package Manager 引入第三方库、预览调试、控制台排错，直到直接提交到 TestFlight 的完整流程。

核心内容

以前想在 iPad 上写 App，要么只能写 playground 片段，要么得在 Mac 上打开 Xcode。Swift Playgrounds 4 改变了这个局面：它现在支持完整的 App 模板，可以在 iPad 和 Mac 上创建、编辑、预览、调试，甚至直接提交到 App Store Connect。（00:21）

Collett 从 Mac 端开始。她打开 Swift Playgrounds，选择空白 App 模板，右侧立刻出现实时预览。先改 App 设置：名字改成 Tea Time，强调色改成棕色，图标换成杯子。这些设置不需要写代码，点几下就能完成。（01:50）

接下来写界面。她从 Library（代码片段库）插入一个 List View，然后手动添加 Text 视图。代码补全面板会在她打字时弹出建议，按回车就能插入。很快她发现了一个问题：Jasmine Green 被重复添加了。为了避免重复，她决定用 OrderedSet 来存储茶叶列表。（03:42）

OrderedSet 来自 Apple 的 swift-collections 开源包。她通过 File > Add Package 添加了这个包，输入 GitHub URL 后，Swift Playgrounds 自动拉取、解析依赖，并在侧边栏显示。但导入后编译报错：“Cannot find type OrderedSet in scope”。她忘了 import Collections 模块。加上 import 后问题解决。（04:47）

Connor 接手时切换到 iPad。项目通过 iCloud 共享文件夹同步，他在 iPad 上打开同一个项目，所有改动实时同步。Collett 已经加了一个 TabView，包含茶叶列表和 Assistant 两个 Tab。Connor 发现 Assistant Tab 里只有一个简单的推荐按钮，他想把 Collett 写的 TeaWheelView 加进去。（07:20）

Connor 先给 TeaWheelView 添加了一个 Preview Provider。他在文件底部输入 preview provider，代码补全弹出模板。他给预览加了几个测试数据，把 “Hello, world!” 替换成 TeaWheelView，加上一点 padding。右侧预览立刻变成可交互的转盘。他可以在预览里直接旋转转盘，看到不同茶叶被选中。（08:45）

把 TeaWheelView 加到 Assistant Tab 后，Connor 测试发现一个问题：无论转盘停在哪个位置，结果永远是 “Byte’s Oolong”。他怀疑是 TeaWheelView 本身的问题，于是在 Preview Provider 里加了一个 print 语句。旋转转盘后，控制台弹出消息：item one… item one… item one。这说明问题出在 TeaWheelView 内部。（11:55）

他用项目全局搜索查找 “first”，发现 Collett 在 TeaWheelView 里留了一行调试代码，让结果永远返回第一个元素。删掉这行代码后，转盘正常工作。Connor 用 Run 按钮在独立窗口运行 App，确认列表和转盘都正常。（12:50）

最后一步：提交到 TestFlight。Connor 打开 App Settings，滑到最底部，点击 “Upload to App Store Connect”。Swift Playgrounds 自动创建 App 记录、上传构建版本。然后他去 App Store Connect 提交 Beta App Review，通过后在 TestFlight App 里安装，甚至在 iPhone 上也能运行。（13:56）

详细内容

从空白模板到第一个界面

（01:37）Swift Playgrounds 4 的空白 App 模板打开后，右侧自动显示实时预览。初始代码只有一个显示 “Hello, world!” 的 ContentView。

Collett 用 Library 插入 List View：

List {
    Text("Jasmine Green")
    Text("English Breakfast")
    Text("Byte's Oolong")
    Text("Golden Tippy Assam")
    Text("Matt P's Tea Party")
    Text("Darjeeling")
    Text("Genmaicha")
    Text("Vanilla Rooibos")
}

关键点：

• Library 通过工具栏的 + 按钮打开，包含 Views、Modifiers、SF Symbols、Colors 等分类
• 代码补全会在输入时弹出，按回车接受建议
• 实时预览会随代码改动即时更新

用 Swift Package Manager 引入第三方库

（03:56）为了避免茶叶重复，Collett 用 OrderedSet 替代数组。OrderedSet 来自 swift-collections 包，需要通过 Swift Package Manager 添加。

操作步骤：

1. File > Add Package
2. 输入 https://github.com/apple/swift-collections
3. 选择 Collections 产品，点击 Add to Project
4. 在代码顶部添加 import Collections

import Collections

let teas: OrderedSet<String> = ["Byte's Oolong", "Golden Tippy Assam", "English Breakfast", "Matt P's Tea Party", "Darjeeling", "Genmaicha", "Jasmine Green", "Vanilla Rooibos"]

然后用 ForEach 把集合绑定到 List：

ForEach(teas, id: \.self) { tea in
    Text(tea)
}

关键点：

• OrderedSet 保证元素唯一，同时保持插入顺序
• id: \.self 用字符串本身作为标识符
• Swift Playgrounds 的依赖管理界面和 Xcode 类似，但操作更简化

预览调试与控制台排错

（08:37）Connor 给 TeaWheelView 添加 Preview Provider，这是 Swift Playgrounds 4 新增的功能。

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        TeaWheelView(items, id: \.self)
            .padding()
    }
}

关键点：

• PreviewProvider 写在文件底部，Swift Playgrounds 会自动识别
• 预览区底部出现页点，表示有多个预览可用
• 点击右箭头可以切换到 View Preview（只看当前视图）而不是 App Preview（看整个 App）
• 预览是交互式的：可以旋转转盘、点击按钮

发现 Bug 时，Connor 在预览里加 print 语句验证：

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        TeaWheelView(items, id: \.self) {
            print($0)
        }
            .padding()
    }
}

关键点：

• print 输出会显示在控制台，控制台位于源码编辑器左下角
• 控制台消息弹出时会短暂显示，点击可以展开查看完整日志
• 项目全局搜索在侧边栏顶部，可以跨文件查找符号

从 Swift Playgrounds 直接提交 TestFlight

（13:56）Swift Playgrounds 4 支持直接上传构建到 App Store Connect，无需打开 Xcode。

步骤：

1. 打开 App Settings
2. 滑到最底部
3. 点击 “Upload to App Store Connect”
4. 登录 Apple Developer 账号
5. Swift Playgrounds 自动创建 App 记录、签名、上传

上传后去 App Store Connect 提交 Beta App Review，通过后 TestFlight 会自动分发。用户可以在 TestFlight App 里安装，支持 iPhone、iPad、Mac。

关键点：

• 上传前需要配置 Bundle ID、版本号、构建号
• 需要 Apple Developer 账号（个人或组织）
• 上传过程和 Xcode 的 Archive > Distribute 等价

核心启发

• 做什么：用 Swift Playgrounds 在 iPad 上快速验证一个 App 想法。
  为什么值得做：不需要 Mac，不需要 Xcode，一个 iPad 就能完成从原型到 TestFlight 的完整流程。Collett 和 Connor 的演示证明，一个下午就能做出可交互的 App 并分享给朋友测试。
  怎么开始：在 iPad 上打开 Swift Playgrounds，选 Blank App 模板，用 SwiftUI 搭界面，用 Library 插入代码片段，实时预览验证效果。

• 做什么：给自定义视图添加 Preview Provider，养成预览驱动开发的习惯。
  为什么值得做：Connor 用 Preview Provider 在几秒钟内定位了 TeaWheelView 的 bug。没有预览的话，他需要编译运行整个 App 才能发现问题。预览让调试周期从分钟级降到秒级。
  怎么开始：在每个自定义 View 文件底部添加 struct XXX_Previews: PreviewProvider，传入测试数据，用 .padding() 等修饰器模拟真实布局环境。

• 做什么：用 Swift Package Manager 引入开源库扩展 App 能力。
  为什么值得做：Collett 用 swift-collections 的 OrderedSet 解决了数据去重问题，自己不需要重新实现。Swift Playgrounds 的 Add Package 界面让依赖管理和 Xcode 一样专业，但操作更简单。
  怎么开始：File > Add Package，输入 GitHub 仓库 URL，选择需要的产品模块，点击 Add。记得在代码里 import 对应的模块名。

• 做什么：通过 iCloud 共享文件夹在 Mac 和 iPad 之间无缝协作开发。
  为什么值得做：Collett 在 Mac 上写基础结构，Connor 在 iPad 上继续完善，两人没有用过一次 Git 或 AirDrop。iCloud 同步让设备切换完全透明。
  怎么开始：把 Swift Playgrounds 项目保存到 iCloud Drive 的共享文件夹，邀请协作者。对方在 iPad 上通过 Locations > 共享文件夹打开项目。

关联 Session

• Create engaging content for Swift Playgrounds — learn how you can build guided instructional content designed for swift playgrounds.
• What’s new in SwiftUI — learn about the latest updates to swiftui, including new apis and features for building great apps.
• Swift packages: Resources and localization — learn how to add resources and localization to your swift packages.