前言
在“海风日记“的回顾页中，当用户还没有日记数据时，会显示空数据状态引导用户去写日记。
本文将从源码出发，深入讲解回顾页的空数据 UI 设计。
一、回顾页空数据状态
1.1 源码
if (MOCK_DIARIES.length === 0) { Column({ space: 12 }) { Text('📊').fontSize(48).margin({ top: 60 }) Text('还没有数据哦') .fontSize(17).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) .margin({ top: 12 }) Text('写几篇日记后，这里会展示你的\n写作统计和情绪趋势') .fontSize(14).fontColor(COLOR_TEXT_HINT) .textAlign(TextAlign.Center).lineHeight(22) .padding({ left: 32, right: 32 }) Button('去写日记') .height(44).fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold) .backgroundColor(COLOR_PRIMARY).borderRadius(22) .padding({ left: 28, right: 28 }).margin({ top: 24 }) .onClick(() => router.pushUrl({ url: 'pages/diary/WriteDiaryPage' })) } .width('100%').alignItems(HorizontalAlign.Center).layoutWeight(1) }二、多场景空状态对比
| 页面 | emoji | 标题 | 描述 | 按钮 |
|---|---|---|---|---|
| 首页 | 🌊 | 还没有日记哦 | 记录今天的心情… | 写第一篇日记 |
| 回顾 | 📊 | 还没有数据哦 | 写几篇日记后… | 去写日记 |
| 日历 | 📖 | 这个月还没有日记 | 点击下方 + 记录… | 无 |
| 标签 | 🏷️ | 还没有标签 | 添加标签可以帮你… | 输入框 |
| 搜索 | 🌊 | 没有找到相关内容 | 换个关键词试试吧 | 无 |
三、布局特点
Column({ space: 12 }) { Text('📊').fontSize(48).margin({ top: 60 }) // emoji Text('标题').fontSize(17) // 标题 Text('描述').fontSize(14) // 描述 Button('去写日记') // 按钮 } .width('100%').alignItems(HorizontalAlign.Center) .layoutWeight(1)四、常见问题
4.1 空状态与数据列表重叠
问题：空状态和数据列表同时显示。
原因：if/else 条件判断中缺少 else 分支。
解决方案：使用 if/else 确保互斥显示。
总结
本文通过“海风日记“回顾页的空数据状态，深入讲解了空状态 UI 设计：
- emoji 视觉元素：📊
- 标题：提示文字
- 描述：引导文字
- 按钮：行动引导
- 多场景差异：不同页面不同设计
下一篇文章将深入讲解MoodDataItem 接口设计，敬请期待。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：
- Button 组件文档
- Text 组件文档
- Router 路由文档
- 海风日记项目源码
- [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
- 开源鸿蒙跨平台社区
