鸿蒙应用开发实战【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{constparams=this.getUIContext().getRouter().getParams()asRecord<string,Object>if(params&&typeofparams['status']==='string'){this.statusLabel=params['status']asstring}this.loadData()}

来自首页统计卡片的调用：

// HomePage StatCard.onClick(()=>{this.navigate('pages/StatusListPage',{status:'待换绑'})})

三、数据加载

privateasyncloadData():Promise<void>{this.loading=truetry{this.cards=awaitCardDao.listAll()constcardLabelMap=newMap<number,string>()for(constcofthis.cards){cardLabelMap.set(c.id??0,c.label)}constbindings=awaitAppBindingDao.listByStatus(this.statusLabelasBindingStatus)this.rows=bindings.map(b=>({binding:b,cardLabel:cardLabelMap.get(b.card_id)??''}))}finally{this.loading=false}}

AppBindingDao.listByStatus:

asynclistByStatus(status:BindingStatus):Promise<AppBindingEntity[]>{constpredicates=newRdbPredicates('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.chipCatIdx===idx?'#FFFFFF':AppColors.TEXT_2).backgroundColor(this.chipCatIdx===idx?AppColors.PRIMARY:AppColors.CARD_B).linearGradient(this.chipCatIdx===idx?{angle:135,colors:[[AppColors.PRIMARY,0],[AppColors.PRIMARY_2,1]]}:{angle:135,colors:[[AppColors.CARD_B,0],[AppColors.CARD_B,1]]}).onClick(()=>this.chipCatIdx=idx)})// 卡号 chipsForEach(this.cards,(card,idx)=>{Text(card.label).fontColor(this.chipCardIdx===idx+1?'#FFFFFF':AppColors.TEXT_2).backgroundColor(this.chipCardIdx===idx+1?AppColors.PRIMARY:AppColors.CARD_B).onClick(()=>{this.chipCardIdx=this.chipCardIdx===idx+1?0:idx+1})})}}.scrollable(ScrollDirection.Horizontal)// 水平滚动.scrollBar(BarState.Off)// 隐藏滚动条

点击切换：再次点击已选中的 chip 可取消选择（恢复到 idx=0）。

4.2 二次过滤

privategetFilteredRows():AppRow[]{constCATEGORIES=['全部','APP','网站','小程序']returnthis.rows.filter(r=>{constcatOk=this.chipCatIdx===0||r.binding.category===CATEGORIES[this.chipCatIdx]constcardOk=this.chipCardIdx===0||r.cardLabel===this.cards[this.chipCardIdx-1]?.labelreturncatOk&&cardOk})}

五、空状态

当某状态没有应用时（所有待换绑的应用都已处理完），显示完成状态：

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())}

小结

下一篇文章，我们开发备份页 BackupPage——数据导出、导入、备份文件管理。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• openHarmony 跨平台社区：https://openharmonycrossplatform.csdn.net
• HarmonyOS 官方文档：https://developer.huawei.com/consumer/cn/doc/
• HarmonyOS ArkUI组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkui-ts
• HarmonyOS router API：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/router