鸿蒙便捷生活类行业实践——查看账单收支明细（系列见主页）

场景介绍

查看账单收支明细是便捷生活类应用中高频使用场景之一，如用户需要在账单明细中查看支出或收入记录。

本示例使用List组件实现多层级折叠列表以及点击账单展开收支明细的交互效果。

效果预览

实现思路

1. 账单列表项为父列表，明细列表为子列表。在父列表项和子列表项中分别设置isExpand变量并初始化为false。
2. 点击父列表子项，isExpand值变为true，通过if/else语句判断是否有子列表，有则展开。

   // 父列表子项
   Row() {}
   .onClick(() => {
   this.isExpand = !this.isExpand
   this.item.isExpand = this.isExpand
   })
   // 判断子列表是否展开
   if (this.item.children.length > 0 && this.isExpand) {
   // 子列表
   this.expandChildItem()
   }

约束与限制

• 本示例支持API Version 16 Release及以上版本。
• 本示例支持HarmonyOS 5.0.4 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.4 Release及以上版本进行编译运行。

工程目录

├──entry/src/main/ets // 代码区
│ ├──entryability
│ │ └──EntryAbility.ets
│ ├──model
│ │ ├──IncomeDataItem.ets // 收入列表项
│ │ ├──ListModel.ets // 列表结构
│ │ └──SpendDataItem.ets // 支出列表项
│ └──pages
│ └──BillPage.ets // 账单页面
└──entry/src/main/resources // 应用资源目录

---

加入下方链接班级，得鸿蒙礼盒

一起拿鸿蒙礼盒，戳我戳我！！

本期活动时间：2025年8月1日-12月31日