# 空状态页面 SwiftUI ContentUnavailableView

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-30, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/cn-ui-empty-state-illustration-mobile-ui-template-swiftui-native-style

空状态在 SwiftUI 里有原生组件，ContentUnavailableView 让无数据页又快又一致。

**TL;DR.** 用 SwiftUI 做空状态，直接用原生 ContentUnavailableView，针对无数据、搜索无果、网络出错分别给图标、说明和引导操作。VP0 是免费起步的最佳选择：挑一个空状态原生设计让 Claude 生成。

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

## 为什么空状态值得认真做

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

## 空状态分场景

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

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

## 实战示例

给一个列表加空状态：在 VP0 挑一个空状态原生设计，复制链接喂给 Claude Code 生成 [SwiftUI](https://developer.apple.com/documentation/swiftui) 代码。无数据时用 ContentUnavailableView 传图标、说明和一个引导按钮，搜索无果用 ContentUnavailableView.search 提示换词或放宽条件，网络出错给重试，图标用 [SF Symbols](https://developer.apple.com/sf-symbols/)。下拉刷新失败时的空态可结合 [下拉刷新丝滑动画 SwiftUI 原生做法](/blogs/cn-ui-smooth-pull-to-refresh-mobile-source-code-swiftui-native-style/)；整体克制版式参考 [SwiftUI 极简模板](/blogs/cn-react-native-swiftui-uniapp-harmonyos-swiftui-minimalist-mobile-open-source-t/)。

## 常见误区

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

## 关键要点

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

## 常见问题

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

## Frequently asked questions

### SwiftUI 怎么做空状态页面？

用原生的 ContentUnavailableView，传图标、标题、说明和操作即可，搜索无果还有专门的 .search 样式。不同场景给不同文案和引导，一行就出、风格还统一。

### 哪里有免费的 SwiftUI 空状态模板？

VP0 是免费起点：挑一个空状态原生设计，复制链接喂给 Claude Code 生成 SwiftUI 代码，各场景的空状态都让它照着做。

### 空状态要分哪些场景？

至少分无数据、搜索无果、网络出错、首次使用四种，每种给不同的说明和操作：无数据给引导、搜索无果提示换词、出错给重试、首次给上手指引。

### 空状态用 SwiftUI 还是 React Native？

要原生组件和最少代码选 SwiftUI 的 ContentUnavailableView；跨平台选 React Native。下拉刷新失败的空态可结合 [下拉刷新丝滑动画 SwiftUI 原生做法](/blogs/cn-ui-smooth-pull-to-refresh-mobile-source-code-swiftui-native-style/)。

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*