Build a SwiftUI view in Swift Playgrounds
Developer Tools 入门 20m

在 Swift Playgrounds 中构建 SwiftUI 视图

Build a SwiftUI view in Swift Playgrounds

2020年6月22日

在 Apple 官方观看视频

一句话判断

Swift Playgrounds 现在可以写 SwiftUI 了——在 iPad 上实时预览 UI、修改代码立刻看到效果，这是学习 SwiftUI 最快的方式。

这场 Session 讲了什么

这场 Session 展示了 Swift Playgrounds 在 2020 年的重大更新：SwiftUI 支持。Swift Playgrounds 是 Apple 的交互式 Swift 学习和原型工具，运行在 iPad 上。2020 年的更新让它从一个”教学工具”升级为一个轻量级的 SwiftUI 开发环境。

演讲者首先演示了在 Swift Playgrounds 中编写 SwiftUI 的体验。打开 Playground 后，左侧是代码编辑器，右侧是实时预览。修改代码后预览会自动刷新，几乎不需要等待。这种即时反馈的体验对于学习 SwiftUI 的声明式 UI 范式非常友好——你可以立刻看到修改某个 modifier 的效果。

Session 的核心部分通过一个实际的案例展示了完整的 SwiftUI 开发流程：从创建一个简单的文本视图开始，逐步添加图片、列表、导航，最后构建一个完整的小型 App。演讲者特别强调了 Swift Playgrounds 的一些教学辅助功能，如代码补全建议、错误高亮和快速帮助。

最后讨论了 Swift Playgrounds 的局限性——它不能访问设备的全部 API（如 HealthKit、HomeKit），也不能发布到 App Store。但作为一个学习和原型验证工具，它已经足够强大。

值得深挖的点

  • Swift Playgrounds 作为教学工具的演进：最初 Swift Playgrounds 只能写命令式代码（通过 print 看结果）。加入 SwiftUI 支持后，学习者可以构建真正的可视化 UI，这让编程学习的正反馈循环大幅缩短。看到自己写的代码变成一个漂亮的界面，比看到控制台输出 “Hello World” 有成就感得多。
  • iPad 上的开发体验：Swift Playgrounds 证明了在 iPad 上进行轻量级开发是可行的。虚拟键盘上的快捷键栏提供了常用符号的快速输入，触控操作让代码导航更直观。虽然它不能替代 Xcode，但对于学习和快速原型来说已经足够。

代码片段

// Swift Playgrounds 中的 SwiftUI 代码
import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(landmarks) { landmark in
                HStack {
                    Image(landmark.imageName)
                        .resizable()
                        .frame(width: 50, height: 50)
                        .clipShape(Circle())

                    VStack(alignment: .leading) {
                        Text(landmark.name)
                            .font(.headline)
                        Text(landmark.category.rawValue)
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                }
            }
            .navigationTitle("探索")
        }
    }
}
// 在 Playgrounds 中预览 SwiftUI 视图
import PlaygroundSupport

// 将 SwiftUI 视图设置为 Playground 的 live view
PlaygroundPage.current.liveView = UIHostingController(
    rootView: ContentView()
)

// 支持 Swift 5.3 的 @main 结构
@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
// 在 Playgrounds 中实验 SwiftUI 动画
struct AnimatedView: View {
    @State private var isExpanded = false

    var body: some View {
        Circle()
            .fill(isExpanded ? Color.blue : Color.red)
            .frame(
                width: isExpanded ? 200 : 100,
                height: isExpanded ? 200 : 100
            )
            .animation(.spring(response: 0.5, dampingFraction: 0.7),
                       value: isExpanded)
            .onTapGesture {
                isExpanded.toggle()
            }
    }
}

最佳实践

  • 利用实时预览快速实验 SwiftUI 的各种 modifier，理解它们的效果
  • 从简单的视图开始，逐步叠加功能，避免一次性写太多代码
  • 使用 Swift Playgrounds 的代码补全来探索 SwiftUI 的 API
  • 把不确定效果的代码片段放在 Playgrounds 中测试，比在 Xcode 项目中更高效
  • 完成的 Playground 可以分享给其他人，非常适合教学和团队内部分享

还有什么值得关注

  • Swift Playgrounds 后来在 iPadOS 15 中获得了更完整的 Swift 包支持
  • Xcode 的 Canvas Preview 功能提供了类似的实时预览体验，但在 Mac 上
  • 如果你在做编程教育，Swift Playgrounds 是 Apple 生态中最好的入门工具
WWDC 2020