HarmonyOS Next 办公应用：待办审批页面开发实践（二）

3. 导航栏构建

@Builder NavDestinationHeaderBuilder(){
  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.arrow'))
          .width(this.imageWH)
          .height(this.imageWH)
          .fillColor(Color.White)
          .rotate({
            x: 0,
            y: 0,
            z: 1,
            centerX: '50%',
            centerY: '50%',
            angle: 180
          })
          .onClick(()=>{
            this.pageInfos.pop()
          })
        Image($r('app.media.kefu'))
          .width(this.imageWH)
          .height(this.imageWH)
          .fillColor(Color.White)
      }
      Text('待办审批')
        .fontColor(Color.White)
      Row(){
        Image($r('app.media.more_2'))
          .width(this.imageWH)
          .height(this.imageWH)
          .fillColor(Color.White)
      }
    }
    .backgroundColor(Color.Black)
    .zIndex(100)
    .padding({
      left:10,
      right:10
    })
    .justifyContent(FlexAlign.SpaceBetween)
    .height(44)
    .width(BusinessConstants.FULL_WIDTH)
  }
}

• 功能：构建页面的导航栏，设置状态栏颜色为黑色，添加返回按钮、客服图标和更多图标。点击返回按钮时，调用 pageInfos.pop() 方法返回上一页。
• 代码段：NavDestinationHeaderBuilder 方法。

4. 列表渲染

build() {
  NavDestination() {
    Column() {
      this.NavDestinationHeaderBuilder()
      List() {
        LazyForEach(this.data, (item: ToDoInfo, index: number) => {
          ListItem() {
            this.ListItemBuilder(item)
          }
        },(item: ToDoInfo, index: number) => index +JSON.stringify(item))
      }
      .divider({ strokeWidth: 1, color:'#eeeeee' })
    }
    .width(BusinessConstants.FULL_WIDTH)
    .height(BusinessConstants.FULL_HEIGHT)
  }
  .width(BusinessConstants.FULL_WIDTH)
  .height(BusinessConstants.FULL_HEIGHT)
  .hideTitleBar(true)
  .onReady((ctx: NavDestinationContext) => {
    // 在NavDestination中能够拿到传来的NavPathInfo和当前所处的NavPathStack
    try {
    } catch (e) {
    }
  })
}

• 功能：在 build 方法中构建页面整体布局，先调用导航栏构建方法，再使用 LazyForEach 动态渲染列表项。为列表添加分隔线，提升视觉效果。同时隐藏原生标题栏，设置页面宽度和高度为全屏。
• 代码段：build 方法。

总结

通过上述核心代码，我们在 HarmonyOS Next 中成功实现了一个待办审批页面。该页面利用 LazyDataSource 实现数据的懒加载，使用 LazyForEach 动态渲染列表项，提高了页面性能。导航栏和列表项的点击跳转功能，增强了用户体验。开发者可根据实际需求，进一步扩展该页面，如添加搜索、筛选功能等，以满足更多办公场景需求。