鸿蒙应用开发实战【22】— 空状态引导页设计与实现-北京尧图网络

鸿蒙应用开发实战【22】— 空状态引导页设计与实现前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net用户首次打开号码助手时数据库是空的——没有卡号、没有应用绑定记录。这时候如果直接展示一个空白列表用户会感到困惑。一个好的 App 应该在空状态时展示友好的引导信息告诉用户「这里还没有内容接下来你可以这样做」。这就是 EmptyState 组件的价值。本篇涵盖EmptyState Builder 组件设计、Blank() 弹性布局实现垂直居中、多场景空状态列表为空/搜索无结果/筛选无匹配/导入为空、条件渲染展示空状态、引导按钮点击导航。图1EmptyState 组件结构 Blank 弹性布局多场景空状态条件渲染一、EmptyState 组件设计1.1 组件结构// 通用的空状态组件BuilderprivateEmptyState(icon:string,title:string,desc:string,btnText:string,btnAction:()void){Column(){// ① 大图标Emoji / 自定义图标Text(icon).fontSize(48).margin({bottom:16})// ② 标题主要说明Text(title).fontSize(18).fontWeight(AppFonts.WEIGHT_BOLD).fontColor(AppColors.TEXT).margin({bottom:8})// ③ 描述文案详细说明Text(desc).fontSize(12).fontColor(AppColors.TEXT_2).textAlign(TextAlign.Center).margin({bottom:20})// ④ 引导按钮操作入口Button(btnText,{type:ButtonType.Normal}).fontSize(12).fontColor(#FFFFFF).backgroundColor(AppColors.PRIMARY).borderRadius(18).height(36).width(140).onClick(()btnAction())}.alignItems(HorizontalAlign.Center).width(100%)}1.2 组件层级层级组件说明①Text(icon)大号 Emoji 图标视觉吸引注意②Text(title)核心状态说明粗体醒目③Text(desc)辅助引导文案④Button(btnText)CTA 按钮点击后引导用户操作二、Blank() 弹性布局实现垂直居中2.1 为什么需要 Blank空状态页面需要在屏幕中间展示但页面上方有 TitleBar、下方有 TabBar。直接设置justifyContent(FlexAlign.Center)会让内容整体居中但如果内容偏少可能会偏上或偏下。使用Blank()可以弹性撑开将 EmptyState 推到视觉中心。// 空状态页面结构Column(){// ① 标题栏固定高度TitleBar()// ② 弹性撑开区域Blank()// ③ 空状态内容居中显示this.EmptyState(,暂无绑定记录,你还没有添加任何应用绑定\n点击下方按钮开始添加, 添加应用,()this.navigateToAddPage())// ④ 弹性撑开区域Blank()// ⑤ 底部 TabBar固定高度TabBar()}.height(100%)2.2 Blank() 的弹性原理Blank()是一个不可见的弹性组件会自动占据 Column 中的剩余空间。两个Blank()会把中间的 EmptyState 推到 Column 的垂直中心。对比实现方式效果justifyContent: Center只居中子元素内容可能偏上TabBar 占位Blank() 双边撑开上下 Balance严格视觉居中2.3 结合三态 UI// 在实际页面中空状态是三态 UI 的正常内容的一部分if(this.loading){this.LoadingState()}elseif(this.loadError){this.ErrorState(this.loadError)}elseif(this.rows.length0){this.EmptyStatePage()// ← 这里使用 Blank EmptyState}else{this.ContentPage()// ← 正常列表}三、多场景空状态不同的场景需要不同的空状态文案和图标3.1 场景定义// 各个页面调用 EmptyState 的场景// 首页 — 没有绑定记录this.EmptyState(,暂无绑定记录,你还没有添加任何应用绑定\n点击下方按钮开始添加, 添加应用,(){this.navigate(pages/AddAppPage)})// 卡号管理 — 没有卡号this.EmptyState(,暂无卡号,点击右上角「」添加你的第一张卡号,,(){})// 不需要按钮右上角有 // 搜索页 — 搜索无结果this.EmptyState(,未找到匹配结果,尝试修改搜索关键词或筛选条件,,(){})// 粘贴导入 — 未识别到应用this.EmptyState(,未识别到应用信息,请确认粘贴内容包含应用名称和卡号,重新粘贴,(){this.pastedText})3.2 场景矩阵场景图标标题引导操作绑定记录为空暂无绑定记录添加应用卡号列表为空暂无卡号右上角搜索无结果未找到匹配结果无仅在搜索框输入粘贴导入为空未识别到应用信息重新粘贴筛选无匹配❌当前筛选无结果重置筛选四、引导按钮导航4.1 导航封装// 页面内部的导航方法privatenavigateToAddPage():void{router.pushUrl({url:pages/AddAppPage,params:{}asRecordstring,Object})}4.2 关闭弹窗后导航有时候空状态出现在弹窗或面板中需要先关闭再导航privatehandleAction():void{if(this.isInSheet){this.showSheetfalse// 先关闭面板}// 延迟导航给关闭动画留时间setTimeout((){this.navigateToAddPage()},300)}五、本篇小结知识点核心要点EmptyState Builder参数化icon/title/desc/btnText/btnActionBlank() 弹性布局两个 Blank() 将内容推到垂直居中多场景复用搜索/列表/导入/筛选各自定制文案条件渲染if/else 判断数据长度为 0 时展示空状态引导按钮点击导航到添加页面考虑弹窗延迟参考资料鸿蒙应用开发实战【23】— 三态 UI鸿蒙应用开发实战【05】— 首页开发与状态管理Blank 组件 APIBuilder 装饰器Column 容器如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netBlank 组件文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blankColumn 容器文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column

鸿蒙应用开发实战【22】— 空状态引导页设计与实现

相关推荐

Python商品监控系统开发：地域限制与库存状态追踪实战

鸿蒙应用开发实战【21】— 筛选弹出面板三维筛选实现

从宝可梦魔方看中国制造转型：地域限定产品的技术逻辑

更多资讯

锂电池基础科学：从理论能量密度到界面与离子输运

SaaS系统核心价值与企业级应用实践

BERT入门实战：从Transformer机制到微调跑通

eNSP动态IP配置：DHCP地址池、中继与排错实战

弹性盒子布局实战指南：从设计思路到常见问题排查

亿级流量系统架构设计：高并发、高可用与高扩展实践

今日更新

PLFM_RADAR：从被动告警到主动感知的微服务健康监控系统

SPI隔离设计实战：MAX14431BAEE+与STM32F407工业级应用

数字隔离器如何根治SPI通信地环路干扰：MAX14431与TM4C129实战

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？