空数据状态与引导：多维度 UI 提示设计

前言

在"海风日记"的回顾页中，当用户还没有日记数据时，会显示空数据状态引导用户去写日记。

本文将从源码出发，深入讲解回顾页的空数据 UI 设计。

一、回顾页空数据状态

1.1 源码

typescript 复制代码

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	标题	描述	按钮
首页	🌊	还没有日记哦	记录今天的心情...	写第一篇日记
回顾	📊	还没有数据哦	写几篇日记后...	去写日记
日历	📖	这个月还没有日记	点击下方 + 记录...	无
标签	🏷️	还没有标签	添加标签可以帮你...	输入框
搜索	🌊	没有找到相关内容	换个关键词试试吧	无

三、布局特点

typescript 复制代码

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
开源鸿蒙跨平台社区