认识 StoreKit 的 SwiftUI 视图

一句话判断

StoreKit 终于有了原生的 SwiftUI 视图，几行代码就能搭建完整的内购商店界面。

这场 Session 讲了什么

Xcode 15 中 StoreKit 提供了三个全新的 SwiftUI 视图：StoreView、ProductView 和 SubscriptionStoreView。这些视图抽象了从 App Store 获取数据到展示购买界面的整个流程，自动处理数据缓存、Screen Time 限制检查等细节。

StoreView 是最快速的起步方式，只需传入产品 ID 集合就能生成完整的商店页面。ProductView 提供更精细的控制，支持 compact、regular 和 large 三种样式。SubscriptionStoreView 则专门为订阅场景设计。

Session 以一个名为”Backyard Birds”的示例 app 贯穿演示，展示了从最简单的 StoreView 到自定义 ProductView 布局，再到 SubscriptionStoreView 的完整过程。所有这些视图都跨平台支持 iPhone、iPad、Mac、Apple Watch 和 Apple TV。

值得深挖的点

ProductView 的样式系统值得深入了解。除了三种内置样式，你还可以创建自定义样式。StoreView 本质上是由多个 ProductView 组成的，因此 productViewStyle 修饰符同时适用于两者。

装饰性图标（decorative icon）的添加方式也很巧妙。通过 trailing view builder，你可以为每个产品提供自定义图标，ProductView 会自动将其传递给购买界面。

代码片段

// 最简单的商店 - StoreView
StoreView(ids: birdFood.productIDs) { product in
    BirdFoodIcon(productID: product.id)
}

// 自定义布局 - ProductView
VStack {
    ProductView(id: nutritionPelletID) { product in
        BirdFoodIcon(productID: product.id)
    }
    .productViewStyle(.large)
    
    // 其他产品使用 compact 样式
    HStack {
        ForEach(otherFoodIDs, id: \.self) { id in
            ProductView(id: id)
                .productViewStyle(.compact)
        }
    }
}

// 订阅商店
SubscriptionStoreView(groupID: subscriptionGroupID) {
    // 自定义内容
}

最佳实践

• 从 StoreView 开始，需要自定义时再切换到 ProductView
• 为产品提供装饰性图标，提升商店的视觉吸引力
• 使用 large 样式突出展示最佳价值产品
• 利用 Xcode Previews 搭配 StoreKit Configuration File 快速迭代
• 所有视图自动适配各平台，无需额外处理

还有什么值得关注

• StoreKit Configuration File 是在 Xcode 中测试内购的关键
• SubscriptionStoreView 支持自定义商店背景和布局
• ProductView 支持通过 productViewStyle 创建完全自定义的样式