
2026/7/5 · 8:10
别让空页面像坏了:用 AI + ContentUnavailableView 给 iOS 补空状态
今天这一技教你让 AI 为 SwiftUI 页面补上系统风格的空状态:空列表、未选择详情、搜索无结果、断网或失败时,都能给用户明确说明和下一步动作。PM 不用先学复杂视图层级,也能用状态表和模拟器验收页面是不是可继续操作。
一个页面没有数据时,用户不会自动理解「这里本来就空」。他更可能以为 App 卡住了、接口坏了,或者自己刚才的操作没有生效。
SwiftUI 的
ContentUnavailableView 正好适合处理这种尴尬。Apple 对它的定义很直白:当 App 的内容无法展示时,用一个包含标签和补充内容的界面告诉用户发生了什么。1 换成产品语言,就是别让空页面沉默,给用户一句解释和一个下一步动作。先判断:这不是「美化空白页」,是补产品状态
本期技巧适合四类页面:列表还没有任何内容、搜索没有结果、iPad 分栏右侧还没选中项目、网络失败或数据暂时拿不到。Use Your Loaf 记录了
ContentUnavailableView 在 iOS 17 中加入,SwiftUI 和 UIKit 都有对应能力,并列出空列表、未选择详情和搜索无结果等常见场景。2 Create with Swift 也把空列表、NavigationSplitView 未选择详情、搜索无结果和无网络列为典型使用场景。3PM 可以先把页面状态分成两类:
| 状态 | 用户看到的坏体验 | 该补什么 |
|---|---|---|
| 真空状态 | 新用户第一次打开页面,列表为空 | 告诉他为什么空,并给「新建」或「导入」入口 |
| 搜索无结果 | 用户输入关键词后列表消失 | 告诉他没有匹配项,建议换关键词 |
| 未选择详情 | iPad 或大屏分栏右侧空着 | 提醒先从左侧选一个项目 |
| 加载失败 | 页面拿不到网络数据 | 说明失败原因,给重试按钮 |
这四类状态不要混成一句「暂无数据」。同样是空,用户需要的动作完全不同。
技巧原理:让 AI 找「没有内容时的分支」
你不用先学完整 SwiftUI 视图结构。让 AI 做这件事时,只要盯住一个问题:页面有没有明确处理「数据为空,但不是正在加载」的情况。
ContentUnavailableView 可以用系统提供的搜索空结果样式,也可以自定义标题、图标、说明和按钮。SwiftLee 的示例里,搜索结果为空且搜索词不为空时,可以叠加 ContentUnavailableView.search;如果要自定义,也可以写标题、SF Symbols 图标和描述。4 Create with Swift 的示例还展示了 actions 区域,可以在空状态里放一个创建按钮。3给 AI 的任务不要写成「帮我优化这个页面」。太宽了,AI 会去改配色、间距、动画,最后你很难验收。写成下面这样更稳:
请检查这个 SwiftUI 页面有没有空状态。
如果列表数据为空、搜索无结果、详情未选择或接口失败,请用 ContentUnavailableView 补一个系统风格的提示。
要求:
1. 加载中不要显示空状态。
2. 空列表要说明用户下一步可以做什么。
3. 搜索无结果要保留用户输入的关键词。
4. 可恢复的失败状态要给重试按钮。
5. 不要大改页面结构和已有业务逻辑。如果 AI 给你代码,你只需要识别一个大概形状:它通常会在列表或详情页外面加一个条件判断,再在空的时候显示
ContentUnavailableView。示意大概是这样:.overlay {
if items.isEmpty && !isLoading {
ContentUnavailableView(
"No items",
systemImage: "tray",
description: Text("Create your first item to get started.")
)
}
}这段不是让你手敲。它只是帮你判断 AI 有没有把空状态放在正确的位置:数据为空才显示,加载中不显示,页面有数据后自动消失。
怎么用:先写状态表,再让 AI 改页面
你可以按 15 分钟流程做一次。
- 打开当前页面,列出所有可能为空的区域。比如任务列表、收藏列表、消息列表、搜索结果、详情页右侧。
- 给每个区域写一句用户能懂的话。不要写「数据为空」,要写「还没有收藏任何内容」或「没有找到这个关键词」。
- 写清楚下一步动作。能恢复的状态给按钮,比如「新建任务」「清空搜索」「重新加载」。不能恢复的状态只给解释。
- 把页面文件和状态表一起发给 AI,让它只补
ContentUnavailableView,不要顺手重构。 - 跑模拟器,手动切出四个状态:有数据、无数据、搜索无结果、加载失败。
这里有一个小边界:如果你的 App 还要支持 iOS 16 或更早版本,不能直接把 iOS 17 才加入的组件当成唯一实现。Use Your Loaf 和 SwiftLee 都把这项能力放在 iOS 17 语境下说明。24 这种情况下,让 AI 加一个版本判断,或者给旧系统保留一套简单的自定义空状态。
验收清单:别只看「有没有显示」
空状态最容易出现的 bug,不是没写出来,而是显示时机错了。你可以按下面几项验收:
- 第一次进入页面还在加载时,不要先闪一下「暂无内容」。
- 数据加载成功但列表为空时,要显示明确原因。
- 搜索框清空后,要恢复原列表,不要还停在无结果提示。
- 失败状态有重试按钮时,点完要能重新触发加载。
- 大字号模式下,标题、说明和按钮不能挤在一起。
- 有数据回来后,空状态必须消失,不能挡住真实内容。
对产品来说,这招的价值不是「页面更好看」。它把用户从一片空白里拉回来:告诉他现在是什么状态、为什么没有内容、还能做什么。对一个独立做 iOS 前端的 PM 来说,这也是很适合交给 AI 的改动,范围小、验收明确,出了问题也容易回退。
このチャンネルのその他のコンテンツ
関連コンテンツ
- ログインするとコメントできます。
