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

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

概述

在 HarmonyOS Next 办公类应用开发中，实现一个功能丰富的收件箱页面是常见需求。下面将介绍如何构建一个收件箱页面，支持收件箱分类展示和页面导航操作。

核心代码功能及对应代码段

1. 组件状态与数据定义

InboxPage 组件使用 @Consume 装饰器获取页面导航信息，同时定义了 showInbox 状态和收件箱分类列表 itemList。

@Entry
@Component
export struct InboxPage {
  @Consume('pageInfos') pageInfos: NavPathStack
  @State showInbox : boolean = true
  itemList:ItemInfo[] = [
    {image:'Inbox/0.png',title:'未读'},
    {image:'Inbox/1.png',title:'旗标'},
    {image:'Inbox/2.png',title:'收件箱'},
    {image:'Inbox/3.png',title:'草稿'},
    {image:'Inbox/4.png',title:'已发送'},
    {image:'Inbox/5.png',title:'发件箱'},
    {image:'Inbox/6.png',title:'已删除邮件'},
    {image:'Inbox/7.png',title:'垃圾邮件'},
  ]
  // ...
}

2. 头部构建器

header 方法构建收件箱页面的头部，包含取消按钮、标题和编辑按钮，点击取消按钮可返回上一页。

@Builder
header() {
  Stack({ alignContent: Alignment.Top }){
    Row() {
      Row(){
        Text('取消')
          .fontColor(Color.White)
          .width(50)
          .height(30)
          .textAlign(TextAlign.Center)
      }
      .height(44)
      .width(50)
      .onClick(()=>{
        this.pageInfos.pop()
      })

      Text('收件箱')
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .maxLines(2)
        .wordBreak(WordBreak.BREAK_ALL)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .height(44)
        .fontColor(Color.White)

      Row(){
        Text('编辑')
          .fontColor(Color.White)
          .width(50)
          .height(30)
          .textAlign(TextAlign.Center)
      }
      .height(44)
      .width(50)
      .onClick(()=>{
      })
    }
    .backgroundColor(Color.Black)
    .justifyContent(FlexAlign.Start)
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height(44)
  }
}