痛点回顾这方面，多状态预览像走迷宫

在 SwiftUI 开发中。一个视图往往有空态、加载中、失败、权限不足等多种表现。传统做法要么把所有状态堆进一个VStack要么为每个状态写一条独立的#Preview导致：

• 代码重复，维护成本高。
• Canvas 只显示一个 Preview。切换到其他状态需要频繁点击，无法“一眼看清”各个变体。
• 缺乏直观的标签，调试时往往需要猜测或查看代码才能判断当前是哪个状态。
• 当状态数量增多时整个预览变成庞大矩阵，极易让人迷失。

#Preview——一次性摊开所有证据

Xcode 12+ 引入了新的宏：#Preview。它允许你一次性传入一组参数，Canvas 会将每个参数渲染成同一预览组里的可独立选择变体。

优点：

• 避免重复代码: 只写一次闭包即可覆盖所有状态。
• 直观对比: 网格布局让你能同时看到多个状态，并快速定位问题。
• 单独打开细看: 点击任意格子即可弹出该变体的全尺寸视图，方便交互调试。

从示例来看，下载卡片视图的多状态预览

1️⃣ 定义模型与枚举：

enum DownloadState {
case waiting
case downloading
case completed
case failed
}
struct DownloadItem {
let fileName: String
let fileSize: String
let state: DownloadState
}

2️⃣ 为预览准备数据集：

extension .previewItems : {
}

3️⃣ 写一次 Preview 即可覆盖全部情况：

@available
#Preview(
"Download states"。traits: .sizeThatFitsLayout,arguments: DownloadItem.previewItems) { item in
DownloadCard
.padding
.background)}

#Preview 的工作原理 <痛点>

Xcode 会把数组中的每个元素渲染为网格的一列。若不自定义标签，默认使用元素的description 否则会显示冗长而无意义的描述。如“DownloadItem”。这正是过去踩到的坑：看不到清晰标签就得去代码里翻找对应状态。

给每个变体起短而唯一的标签：

: CustomStringConvertible {
var description:String{
switch state{
case .waiting:return "Waiting"
case let .downloading:return "Downloading \)"
case .completed:return "Completed"
case .failed:_return "Failed"
}
}
}

`description` 必须简洁、稳定且在同一预览组内唯一，否则你会 陷入“两个相同标签”的困扰。

参数留给业务逻辑； Traits 留给外观环境 <痛点>

`arguments` 最适合用于“有限且有意义”的输入轴，如主业务状态或少量边角情况。如果你想测试配色、动态字体、语言、本地化错误文案、设备方向等 UI 环境，请使用 `@Environment)` 或 `previewTraits`。否则会得到一个庞大不可读的矩阵——就像把所有证据堆到一桌却没有标记。

交互式调试 <痛点>

`#Preview` 本身不替代可变状态。按理说，如果你的视图需要绑定或观察对象。请使用 `@Previewable ` 或包装一个小型视图来模拟交互场景。否则，你只能在静态预览中看到初始值。而无法验证使用者操作后是否正确更新 UI。

保持旧版兼容这方面。只标记新 Preview <痛点>

Xcode 的宏可以用 `@available` 包裹，只在支持的新程序上编译。这代表着你的 App 可以继续支持旧 iOS 版本。而新 Preview 功能仅在现代程序中可用，无需整体升级部署目标。例如这方面，

@available // 新 Preview 功能限定在 iOS 上
#Preview{ ... }

至于结案。从混乱到井井有条 <用户痛点>

• No More Switching: 一次性展示所有状态，不再频繁切换 Canvas。
  

No More Boilerplate: 单条声明覆盖全部；删除重复代码，说起来，

No More Guessing: 自定义短标签。让你快速识别每个变体，

No More Over‑Matrix: 合理划分参数和 Traits，让预览保持可读性。

No More Deprecated Workarounds: 直接使用官方宏，无需手动 注册表。按理说，

No More Broken Interaction Tests: 配合 <@Previewable> 或包装视图来测试动态行为。

No More Platform Hurdles: 通过 @available 保持跨网站兼容，只在支持的网站上启用新特性。怎么说呢，

旧方案 | 新方案 | 结果差距
单独 #Preview per 状态 + 重复模板 + 多次切换 Canvas

✔️ 效率提高 ~80% ❌ 仍需手工维护命名与同步更新数据集

->

结束语 <用户痛点>

Aiming for clarity and efficiency isn’t just a feature tweak—it’s a relief for every developer who’s ever stared at an endless list of previews trying to spot *** ir UI looks wrong.

If you’ve been frustrated by duplicated code。hard‑to‑compare states,or headache of labeling each variant,give #Previewa try.

Your next iteration will feel more like solving a mystery than chasing shadows—just as Conan would appreciate.

。

---