HarmonyOS Next 办公应用：通用页面头部组件的开发（一）

HarmonyOS Next 办公应用：通用页面头部组件的开发

概述

在 HarmonyOS Next 办公类应用开发中，设计一个通用的页面头部组件是常见需求，它能为用户提供统一的导航和操作入口。下面将介绍如何构建一个支持不同页面状态的通用页面头部组件。

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

1. 组件属性与状态定义

@Entry
@Component
export struct PageHead {
  @Prop selectedDate:string
  @Consume pageInfos:NavPathStack
  private TAG: string = '[DefaultScan]';
}

• selectedDate：通过 @Prop 装饰器传入的属性，用于显示当前页面的日期或页面名称，以此决定菜单的显示内容。
• pageInfos：通过 @Consume 装饰器注入的导航路径栈，用于页面导航操作。
• TAG：日志标签，用于记录扫码相关的日志信息。

2. 页面头部布局构建

build() {
  Stack({ alignContent: Alignment.Top }){
    //状态栏颜色
    Row(){}
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    .width('100%')
    .height((AppStorage.get('statusHeight')))
    .backgroundColor(Color.Black)

    Row() {
      //左边按钮
      Row(){
        Image($r('app.media.account'))
          .width(30)
          .height(30)
          .margin({left:10})
          .onClick(() => {
            this.pageInfos.pushPath( {name :'PersonalSet'} );
          })
      }
      .height(navHeight)
      .width(50)
      .onClick(()=>{
        // if(backClick){
        //   backClick()
        // }
      })

      //title
      Text(this.selectedDate)
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .maxLines(2)
        .wordBreak(WordBreak.BREAK_ALL)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .height(navHeight)
        .fontColor(Color.White)

      //右边按钮
      Row(){
        Image($r('app.media.add'))
          .width(30)
          .height(30)
          .margin({right:10})
      }
      .justifyContent(FlexAlign.End)
      .height(navHeight)
      .width(50)
      .bindMenu(this.MenuBuilder())
    }
    .backgroundColor(Color.Black)
    .justifyContent(FlexAlign.Start)
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height(navHeight)
  }
}

• 头部布局包含状态栏、左边按钮、标题和右边按钮。
• 左边按钮点击后通过 pageInfos.pushPath 导航到个人设置页面。
• 标题显示 selectedDate 的内容。
• 右边按钮绑定菜单，点击后显示不同的操作菜单。