Update your app for watchOS 10
System & Services 进阶 20m

为 watchOS 10 更新你的应用

Update your app for watchOS 10

2023年6月5日

在 Apple 官方观看视频

一句话判断

这场代码实战 Session 展示了如何把一个 watchOS 9 App 升级到 watchOS 10 的设计范式——NavigationSplitView 直接进入详情、TabView 竖直翻页、containerBackground 渐变背景、底部工具栏。如果你有 watchOS App，这是最实用的迁移指南。

这场 Session 讲了什么

Session 以 Backyard Birds App 为示例，逐步演示 watchOS 10 的适配过程。

第一步：升级 SDK：

  • 切换到 watchOS 10 SDK 后自动获得新外观——大标题过渡、导航栏模糊材质、系统工具栏按钮样式。

第二步：NavigationSplitView：

  • 将 NavigationStack 替换为 NavigationSplitView。
  • App 启动直接进入详情视图（用户最关心的内容），通过 Source List 按钮返回列表。
  • 使用新的 list selection API 驱动详情视图展示。

第三步：TabView 竖直翻页：

  • 将长列表拆分为 TabView，每个 tab 有明确目的。
  • 使用 .tabViewStyle(.verticalPage) 启用竖直翻页。
  • 可滚动的 tab 放在最后。

第四步：底部工具栏：

  • 新的 .bottomBar 工具栏放置位置。
  • 一致的跨屏幕尺寸控制按钮位置。

第五步：容器背景渐变：

  • 使用 containerBackground 修饰符添加功能性渐变背景。
  • 食物/水位低时背景变红提示状态。
  • 颜色帮助用户在导航中建立位置感。

值得深挖的点

NavigationSplitView 改变了 App 的入口体验。之前 watchOS App 启动后显示列表，用户必须点击才能看到详情。NavigationSplitView 让 App 直接打开上次查看的详情视图——这符合”用户最常做的事情”的设计原则。Source List 按钮在左上角，需要切换时点击。

TabView 的竖直翻页样式是 watchOS 10 的核心导航模式。之前用 List 展示所有内容，用户需要滚动一大段距离。现在每个 tab 是一个全屏页面，用 Digital Crown 在页面间切换——信息层次更清晰，操作更直观。

功能性背景颜色不只是装饰——它传达状态信息。水位低的页面背景偏红，正常页面背景正常。这利用了 watchOS 10 新的材质和背景系统，让用户在导航时一眼就能判断状态。Apple 的设计规范明确说背景应该有信息价值。

代码片段

切换到 NavigationSplitView：

// 之前：NavigationStack
// NavigationStack { List(backyards) { ... } .navigationDestination(...) } }

// watchOS 10：NavigationSplitView
NavigationSplitView {
    // Source List：后院列表
    List(backyards, selection: $selectedBackyard) {
        Text($0.name)
    }
} detail: {
    // 详情视图：直接展示选中后院的信息
    if let backyard = selectedBackyard {
        BackyardView(backyard: backyard)
    } else {
        Text("选择一个后院")
    }
}
// App 启动时直接进入详情视图

TabView 竖直翻页：

// 将长列表拆分为 TabView
TabView {
    TodayView(backyard: backyard)
        .navigationTitle("今日")

    FoodGaugeView(backyard: backyard)
        .navigationTitle("食物")

    WaterGaugeView(backyard: backyard)
        .navigationTitle("水")

    VisitorsView(backyard: backyard)  // 可滚动的列表放在最后
        .navigationTitle("访客")
}
.tabViewStyle(.verticalPage)  // 用 Digital Crown 竖直翻页

底部工具栏和容器背景：

struct FoodGaugeView: View {
    let backyard: Backyard

    // 根据状态计算背景颜色
    var statusColor: Color {
        backyard.foodLevel < 0.2 ? .red : .green
    }

    var body: some View {
        VStack {
            Gauge(value: backyard.foodLevel) {
                Text("食物")
            }
        }
        // 功能性背景——水位低时变红
        .containerBackground(
            statusColor.gradient,
            for: .tabView
        )
        // 底部工具栏：新的统一放置位置
        .toolbar {
            ToolbarGroup(placement: .bottomBar) {
                Spacer()
                Button("补充") {
                    refillFood()
                }
            }
        }
    }
}

最佳实践

  • 先升级 SDK，享受自动获得的新外观，再逐步手动优化。
  • 用 NavigationSplitView 让 App 直接进入最重要的视图。
  • 长列表内容拆分为 TabView 竖直翻页——每个 tab 有一个清晰目的。
  • 可滚动的 tab 放在最后，避免和 Digital Crown 翻页冲突。
  • 用 containerBackground 添加功能性颜色——传达状态信息而非纯装饰。
  • 控件放在 .bottomBar 工具栏位置，跨屏幕尺寸保持一致。
  • 下载示例项目作为迁移参考——Apple 提供了完整的源代码。

还有什么值得关注

  • “Meet watchOS 10” Session 介绍设计原则和新布局系统。
  • “Design and build apps for watchOS 10” Session 更深入的设计指南。
  • 示例项目在 Session 资源列表中提供下载。
  • iOS 和 iPadOS 版的 Backyard Birds 已经使用 NavigationSplitView，watchOS 版可以共享架构。
  • watchOS 10 的所有系统 App 都采用了这套设计范式，用户会有很强的视觉一致性预期。
WWDC 2023