首页/新闻资讯/正文详情

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

发布时间:2026/9/25 14:48:45 来源:云帆数科 栏目:资讯中心
空数据状态与引导:多维度 UI 提示设计
前言在“海风日记“的回顾页中当用户还没有日记数据时会显示空数据状态引导用户去写日记。本文将从源码出发深入讲解回顾页的空数据 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开源鸿蒙跨平台社区

相关推荐

反思日记:提升自我认知与加速个人成长的有效工具
反思日记:提升自我认知与加速个人成长的有效工具

1. 什么是反思日记?反思日记(Reflective Journal)是一种通过记录个人经历、思考过程和学习收获来促进自我成长的工具。它不同于普通的日记,重点不在于记录事件本身,而在于对经历的深度思考和内化。我坚持写反思日记已有… · 2026/9/13 3:13:05

3分钟搞定网易云音乐NCM格式解密:ncmdump终极使用指南
3分钟搞定网易云音乐NCM格式解密:ncmdump终极使用指南

3分钟搞定网易云音乐NCM格式解密:ncmdump终极使用指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否遇到过这样的情况:在网易云音乐下载了喜欢的歌曲,想在车载音响、手机自带播放器或视频… · 2026/7/22 14:41:10

Unity游戏实时翻译插件开发:从架构设计到实战实现
Unity游戏实时翻译插件开发:从架构设计到实战实现

1. 项目概述:为什么Unity游戏需要实时翻译插件? 做独立游戏或者面向全球发行的中小团队,应该都遇到过这个头疼的问题:游戏文本量不小,想支持多语言,但人工翻译成本高、周期长,尤其是对于需要快速… · 2026/7/28 22:15:50

HTML系列教程:24_HTML 速查列表(新手完整版)
HTML系列教程:24_HTML 速查列表(新手完整版)

本篇把前面所有教程的核心标签、属性、语法整理成速查表,方便写代码的时候快速翻看。 分为:文档结构标签、元数据 head、块级标签、行内文本标签、链接图像、表格、列表、表单基础、脚本、字符实体、颜色、URL 路径。 每一项附带简短说明 极简示例&… · 2026/9/25 14:48:38

ESPnet2 瑞士法语多音词语料 ASR 实战:Conformer 端到端语音识别 Recipe 与结果复盘
ESPnet2 瑞士法语多音词语料 ASR 实战:Conformer 端到端语音识别 Recipe 与结果复盘

人工智能语音音频深度学习NLP 【免费下载链接】espnet End-to-End Speech Processing Toolkit 项目地址: https://gitcode.com/gh_mirrors/es/espnet 点击查看 免费下载 本篇基于 ESPnet 仓库中 egs2/polyphone_swiss_french/asr1 的官方结果报告(READM… · 2026/9/25 14:48:31

不靠RSSI靠CSI:WiFi穿墙感知原理及RuView开源项目解析
不靠RSSI靠CSI:WiFi穿墙感知原理及RuView开源项目解析

1. WiFi"看穿墙"并不玄:CSI才是关键说实话,我第一次在GitHub上看到RuView这个开源项目时,第一反应是"标题党"——WiFi还能看穿墙壁?家里路由器又不是X光机。但把整个原理捋了一遍之后,我必须承认&… · 2026/9/25 14:48:25

Matlab/Simulink汽车电机控制仿真能力四阶跃迁
Matlab/Simulink汽车电机控制仿真能力四阶跃迁

1. 这不是学软件,是在练“电机控制的肌肉记忆”Matlab/Simulink 仿真汽车电机控制——这句话在秋招季的简历筛选池里,已经从加分项悄悄滑向“基础门槛”。我带过37个应届生做电驱系统岗面试辅导,其中21个卡在“你这个Simulink模型&#xff0c… · 2026/9/25 14:48:19

嵌入式固件升级机制全解析:从Bootloader到双备份
嵌入式固件升级机制全解析:从Bootloader到双备份

搞嵌入式这些年,经手过的驱动板卡少说也有几十种:液晶屏驱动板、步进电机驱动板、工业IO控制板、电源管理板,形态各异,但有个共同点——它们都绕不开固件升级。我见过太多板卡第一次出厂好好的,真正让售后崩溃、让用户… · 2026/9/25 14:48:13

DDR5内存的隐藏配电站:PMIC芯片深度解析
DDR5内存的隐藏配电站:PMIC芯片深度解析

最近收了条DDR5内存,拆开散热片的一瞬间,我在PCB中间看到一颗不起眼的小芯片,丝印是某家电源厂的logo。我盯着它看了半天,脑子里蹦出一句:原来你就是那个“隐藏的配电站”。内存条的PMIC(Power Management … · 2026/9/25 14:48:13

数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)
数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战
创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX
MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码