HarmonyOS Next 办公应用：日历页面的开发实现（二）

3. 日期选择与标题更新

getSelectItem 方法在用户选择日期时更新选中的日期项并重新筛选日程，getTitle 方法用于更新页面标题。

getSelectItem(item:CJDateItem){
  this.selectItem = item
  this.getDate()
}

getTitle(title:string){
  this.title = title
}

4. 导航菜单与头部构建

NavigationMenus 方法构建了页面的导航菜单，支持点击跳转到个人设置页面；NavDestinationHeaderBuilder 方法构建了页面的头部，包括返回按钮、标题和操作图标。

@Builder
NavigationMenus() {
  Row() {
    Stack(){
      Image($r('app.media.plus_back'))
        .width(px2vp(40*3.5))
        .height(px2vp(40*3.5))
      Reminder()
    }
    Stack(){
      Image($r('app.media.ic_public_more'))
        .width(px2vp(24*3.5))
        .height(px2vp(24*3.5))
      Image($r('app.media.plus_back'))
        .width(px2vp(40*3.5))
        .height(px2vp(40*3.5))
    }
    .margin({ left:px2vp(8*3.5)})
    .padding({
      right:px2vp(16*3.5)
    })
    .onClick(()=>{
      this.pageInfos.pushPath( {name :'PersonalSet'} );
    })
  }
  .margin({
    top:8
  })
}

@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(this.title)
        .fontColor(Color.White)
      Row(){
        Image($r('app.media.edit_'))
          .width(this.imageWH)
          .height(this.imageWH)
          .fillColor(Color.White)
        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)
  }
}

5. 页面构建与日程展示

在 build 方法中，使用 VariableCalendar 组件展示日历，根据日程列表的长度决定展示日程列表还是空数据提示。

build() {
  NavDestination(){
    Column() {
      VariableCalendar({
        getSelectItem: (item:CJDateItem):void => this.getSelectItem(item),
        getYearAndMonth: (title:string):void => this.getTitle(title)
      })

      if(this.list.length>0){
        List(){
          ForEach(this.list,(item:CalendarInfo)=>{
            ListItem(){
              Column(){
                Row(){
                  Image($r('app.media.time'))
                    .width(16)
                    .height(16)
                    .margin({
                      right:8
                    })
                  Text(`${item.startTime}-${item.endTime}`)
                }
                Text(`${item.title}`)
                  .margin({
                    top:8
                  })
              }
              .padding(10)
              .alignItems(HorizontalAlign.Start)
            }
          },(item:CalendarInfo)=>JSON.stringify(item))
        }
        .layoutWeight(1)
        .padding({
          bottom:10
        })
        .backgroundColor(Color.White)
        .borderWidth({
          top:4
        })
        .margin({
          top:10
        })
        .borderColor('#f7f7f7')
        .borderStyle(BorderStyle.Solid)
        .divider({ strokeWidth: 1, color: '#eeeeee', })
      }else{
        EmptyComponent({
          message:'暂无数据'
        })
          .layoutWeight(1)
      }
    }
  }
  .width(BusinessConstants.FULL_WIDTH)
  .height(BusinessConstants.FULL_HEIGHT)
  .backgroundColor('#f7f7f7')
  .menus(this.NavigationMenus)
  .title(this.title)
  .onReady((ctx: NavDestinationContext) => {
    try {
      let str:string = (ctx?.pathInfo?.param as string);
    } catch (e) {
      hilog.error(0x0001, this.TAG, 'showToast error: %{public}s ', JSON.stringify(e));
    }
  })
}

总结

通过以上核心代码的实现，我们在 HarmonyOS Next 中构建了一个功能完整的日历页面。该页面支持日期选择、日程展示、导航跳转等功能，使用了状态管理、组件化开发和事件处理等技术，充分体现了 HarmonyOS Next 开发框架的便捷性和灵活性。开发者可以根据需求进一步扩展和优化该页面，例如添加日程编辑、提醒等功能，以满足更多的办公场景需求。