HarmonyOS Next 办公应用：收件箱页面的开发实现（二）

3. 收件箱列表构建

build 方法构建整个收件箱页面，使用 List 和 ForEach 动态渲染收件箱分类列表。对于“收件箱”分类，支持展开和收起操作。

build() {
  NavDestination() {
    Column() {
      this.header()
      List() {
        ForEach(this.itemList, (item: ItemInfo, index: number) => {
          ListItem() {
            Column() {
              Row().width('100%').height(index===0 || index===2 ? 10 : 1).backgroundColor('#efefef')
              if (index===2) {
                if (this.showInbox) {
                  Row() {
                    Row() {
                      Image($rawfile('Inbox/up.png')).width(20).height(20)
                        .margin({ left: 10 })
                    }.width(40).height(30)
                    .onClick(() => {
                      this.showInbox = !this.showInbox
                    })
                    Image($rawfile(item.image)).width(30).height(30)
                    Text(item.title)
                      .margin({ left: 10 })
                      .fontSize(18)
                  }
                  .margin({ top: 5, bottom: 5 })
                  .width('100%')
                  Row() {
                    Image($rawfile('Inbox/10.png'))
                      .width(30)
                      .height(30)
                      .margin({ left: 80 })
                      .responseRegion({ x: -10, y: -10, width: 100, height: 100 })
                      .hitTestBehavior(HitTestMode.Block)
                    Text('外部邮件')
                      .margin({ left: 10 })
                      .fontSize(18)
                  }
                  .margin({ top: 5, bottom: 5 })
                  .width('100%')
                  Row() {
                    Image($rawfile('Inbox/10.png')).width(30).height(30)
                      .margin({ left: 80 })
                    Text('系统&待办')
                      .margin({ left: 10 })
                      .fontSize(18)
                  }
                  .margin({ top: 5, bottom: 5 })
                  .width('100%')
                } else {
                  Row() {
                    Row() {
                      Image($rawfile('Inbox/down.png')).width(20).height(20)
                        .margin({ left: 10 })
                    }.width(40).height(30)
                    .onClick(() => {
                      this.showInbox = !this.showInbox
                    })
                    Image($rawfile(item.image)).width(30).height(30)
                    Text(item.title)
                      .margin({ left: 10 })
                      .fontSize(18)
                  }
                  .margin({ top: 5, bottom: 5 })
                  .width('100%')
                }
              } else {
                Row() {
                  Image($rawfile(item.image)).width(30).height(30)
                    .margin({ left: $r('app.float.padding') })
                  Text(item.title)
                    .margin({ left: 10 })
                    .fontSize(18)
                }
                .margin({ top: 5, bottom: 5 })
                .width('100%')
              }
            }
            .onClick(() => {
              this.pageInfos.pop()
            })
          }
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }
  .hideTitleBar(true)
  .mode(NavDestinationMode.DIALOG)
}

总结

通过上述核心代码，我们在 HarmonyOS Next 中成功构建了一个收件箱页面。该页面利用 @Consume 装饰器实现页面导航，使用 List 和 ForEach 动态渲染收件箱分类列表。对于“收件箱”分类，通过 showInbox 状态实现展开和收起操作。点击列表项或取消按钮可返回上一页。开发者可以根据实际需求进一步扩展和优化该页面，如完善编辑按钮功能、增加收件箱分类的交互等，以满足更多办公场景的需求。