鸿蒙应用开发实战【58】— 状态列表页StatusListPage开发本文是「号码助手全栈开发系列」第 58 篇持续更新中…开源社区https://openharmonycrossplatform.csdn.net前言StatusListPage 是按状态筛选的应用列表页用户从首页的统计卡片点击进入如待换绑查看该状态下所有应用并支持分类/卡号 chip 二次筛选。本篇涵盖路由接收 status 参数、按状态查询 listByStatus、Chip 筛选行分类卡号、水平滚动 chips、空状态无待处理事项、getFilteredRows 二次过滤、与首页 onPageShow 联动。一、页面结构┌──────────────────────┐ │ ‹ 待换绑 · 3 │ ├──────────────────────┤ │ │ │ [全部][APP][网站] │ ← 水平滚动 chips │ [卡1][卡2] │ │ │ │ ┌──┐ 微信 │ │ │W │ APP 卡1 │ │ └──┘ 待换绑 │ │ │ │ ┌──┐ 淘宝 │ │ │T │ APP 卡2 │ │ └──┘ 待换绑 │ └──────────────────────┘二、路由参数aboutToAppear():void{constparamsthis.getUIContext().getRouter().getParams()asRecordstring,Objectif(paramstypeofparams[status]string){this.statusLabelparams[status]asstring}this.loadData()}来自首页统计卡片的调用// HomePage StatCard.onClick((){this.navigate(pages/StatusListPage,{status:待换绑})})三、数据加载privateasyncloadData():Promisevoid{this.loadingtruetry{this.cardsawaitCardDao.listAll()constcardLabelMapnewMapnumber,string()for(constcofthis.cards){cardLabelMap.set(c.id??0,c.label)}constbindingsawaitAppBindingDao.listByStatus(this.statusLabelasBindingStatus)this.rowsbindings.map(b({binding:b,cardLabel:cardLabelMap.get(b.card_id)??}))}finally{this.loadingfalse}}AppBindingDao.listByStatus:asynclistByStatus(status:BindingStatus):PromiseAppBindingEntity[]{constpredicatesnewRdbPredicates(app_bindings)predicates.equalTo(status,status)predicates.orderByDesc(updated_at)// 查询 → 遍历 ResultSet → 返回 entities}四、Chip 筛选行4.1 水平滚动Scroll(){Row({space:8}){// 分类 chipsForEach([全部,APP,网站,小程序],(cat,idx){Text(cat).fontColor(this.chipCatIdxidx?#FFFFFF:AppColors.TEXT_2).backgroundColor(this.chipCatIdxidx?AppColors.PRIMARY:AppColors.CARD_B).linearGradient(this.chipCatIdxidx?{angle:135,colors:[[AppColors.PRIMARY,0],[AppColors.PRIMARY_2,1]]}:{angle:135,colors:[[AppColors.CARD_B,0],[AppColors.CARD_B,1]]}).onClick(()this.chipCatIdxidx)})// 卡号 chipsForEach(this.cards,(card,idx){Text(card.label).fontColor(this.chipCardIdxidx1?#FFFFFF:AppColors.TEXT_2).backgroundColor(this.chipCardIdxidx1?AppColors.PRIMARY:AppColors.CARD_B).onClick((){this.chipCardIdxthis.chipCardIdxidx1?0:idx1})})}}.scrollable(ScrollDirection.Horizontal)// 水平滚动.scrollBar(BarState.Off)// 隐藏滚动条点击切换再次点击已选中的 chip 可取消选择恢复到 idx0。4.2 二次过滤privategetFilteredRows():AppRow[]{constCATEGORIES[全部,APP,网站,小程序]returnthis.rows.filter(r{constcatOkthis.chipCatIdx0||r.binding.categoryCATEGORIES[this.chipCatIdx]constcardOkthis.chipCardIdx0||r.cardLabelthis.cards[this.chipCardIdx-1]?.labelreturncatOkcardOk})}Chip 维度选项数组idx0 含义点击切换行为分类[‘全部’,‘APP’,‘网站’,‘小程序’]全部chipCatIdx idx卡号this.cards 动态全部chipCardIdx 点击取消五、空状态当某状态没有应用时所有待换绑的应用都已处理完显示完成状态Column(){Column(){Text(✓).fontSize(Size.font24).fontColor(#FFFFFF).fontWeight(800)}.width(Size.s88).height(Size.s88).borderRadius(Size.s44).linearGradient({angle:135,colors:[[AppColors.PRIMARY,0],[AppColors.PRIMARY_2,1]]}).justifyContent(FlexAlign.Center).margin({bottom:20})Text(太棒了没有待处理事项).fontSize(Size.font15).fontWeight(AppFonts.WEIGHT_BOLD).fontColor(AppColors.TEXT)Button(返回首页,{type:ButtonType.Normal}).onClick(()this.getUIContext().getRouter().back())}小结要点说明路由参数from HomePage StatCard: status按状态查询listByStatus 过滤 orderByDescChip 行水平 Scroll 二次筛选Chip 切换再次点击取消选择空状态太棒了完成状态onPageShow从详情页返回后自动刷新下一篇文章我们开发备份页 BackupPage——数据导出、导入、备份文件管理。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源openHarmony 跨平台社区https://openharmonycrossplatform.csdn.netHarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/HarmonyOS ArkUI组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkui-tsHarmonyOS router APIhttps://developer.huawei.com/consumer/cn/doc/harmonyos-references/router