鸿蒙应用开发实战【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
