空状态页面 SwiftUI ContentUnavailableView

空状态不是一张通用图，不同场景要说不同的话。好消息是 SwiftUI 给了原生的 ContentUnavailableView，传图标、标题、说明和操作就能出一个风格统一的空状态页，连搜索无果都有专门样式。难点因此从画图变成了内容：每种空状态该给用户什么样的出路。设计起步用一个干净的空状态原生稿，让 Claude 生成 SwiftUI 代码。

为什么空状态值得认真做

空状态恰恰是用户卡住的时刻，处理不好就直接流失：普通 App 次日留存只有约 25%，而列表空着只写一句暂无数据、还不给下一步，用户就不知道该干嘛、转身就走。把空状态做成引导用户的机会，是留人的细节。SwiftUI 的 ContentUnavailableView 让你专注写引导而非画图，配合苹果的人机界面指南 的空状态建议，体验才完整。很多团队赶进度时第一个砍的就是空状态，觉得反正没数据时才出现、无关紧要，可恰恰是新用户第一次打开、列表还空着的那一刻，决定了他要不要留下来，省这一点反而省错了地方。

空状态分场景

不同场景给不同的图标、说明和操作。

场景	SwiftUI 实现要点
无数据	ContentUnavailableView 加引导操作
搜索无果	用 .search 样式，提示换词
网络出错	给重试按钮
首次使用	引导迈出第一步

实战示例

给一个列表加空状态：在 VP0 挑一个空状态原生设计，复制链接喂给 Claude Code 生成 SwiftUI 代码。无数据时用 ContentUnavailableView 传图标、说明和一个引导按钮，搜索无果用 ContentUnavailableView.search 提示换词或放宽条件，网络出错给重试，图标用 SF Symbols。下拉刷新失败时的空态可结合 下拉刷新丝滑动画 SwiftUI 原生做法；整体克制版式参考 SwiftUI 极简模板。

常见误区

最常见的错误是所有空状态都用一句暂无数据加一张图，用户卡住了也不知道下一步该干嘛。正确做法是分场景给不同的出路：该引导引导、该重试重试。另一个坑是放着原生 ContentUnavailableView 不用、每个页面自己拼一套空态，风格还不统一。把场景分清、用原生组件，空状态反而成了引导用户的好机会。搜索无果尤其值得用 .search 样式，它会自动带上更贴切的措辞，比自己拼一个空页面专业得多。

关键要点

• SwiftUI 做空状态用原生 ContentUnavailableView，一行就出、风格统一。
• 普通 App 次日留存只有约 25%，空状态是用户卡住、最易流失的时刻。
• 分无数据、搜索无果、出错、首次四种场景，各给不同出路。
• 想免费起步，VP0 是挑空状态设计、让 AI 生成 SwiftUI 的最佳选择。

常见问题

关于 SwiftUI 做空状态，问得最多的是怎么实现、要分哪些场景、和 React Native 怎么选。一句话收尾：空状态不是没内容，而是引导用户的机会，用 ContentUnavailableView 把每种空都给一条清楚的出路，用户就不会卡在那里。