HarmonyOS Next 办公应用：邮件详情页的开发实现（二）

3. 自定义弹窗控制器

使用 CustomDialogController 创建自定义弹窗，用于展示更多操作选项。

typescript 复制代码

//自定义弹窗
dialogController: CustomDialogController | null = new CustomDialogController({
  builder: BottomDialog({}),
  autoCancel: true,
  offset: { dx: 0, dy: 0 },
  customStyle: true,
  alignment: DialogAlignment.Bottom,
})
// 在自定义组件即将析构销毁时将dialogControlle置空
aboutToDisappear() {
  this.dialogController = null
}

4. 底部操作按钮构建器

bottomItem 方法用于构建底部操作按钮，点击按钮会触发相应的操作并显示提示信息。

typescript 复制代码

//底部按钮
@Builder
bottomItem(image:string,title:string,btnClick?:(()=>void)) {
  Column(){
    Image($r(image))
      .width(20)
      .height(20)
      .margin({top:5,bottom:5})
    Text(title)
      .fontColor(Color.Gray)
      .fontSize(13)
      .margin({bottom:5})
  }
  .onClick(()=>{
    if(btnClick) {
      btnClick()
    }
    promptAction.showToast({
      message: '可自行添加模板',
      duration: AppStorage.get('dialogTime')
    });
  })
  .width('25%')
}

5. 页面构建与数据获取

build 方法构建整个邮件详情页面，包括头部导航、邮件详细信息展示和底部操作按钮。在 onReady 生命周期函数中获取导航传递的邮件信息。

typescript 复制代码

build() {
  NavDestination(){
    Column() {
      Column() {
        //头部
        EmailDetailNavHeader('详情',this.pageInfos)

        Scroll() {
          Column(){
            // 显示邮件时间
            Row(){
              Text(this.infoList.getData(this.index).time)
                .fontSize(12)
                .fontColor(Color.Gray)
                .width('100%')
                .layoutWeight(1)
                .margin({left:$r('app.float.padding'),right:$r('app.float.padding'),top:$r('app.float.padding')})
            }
            // 显示发件人信息
            Flex({justifyContent:FlexAlign.SpaceBetween}) {
              Row(){
                Text('发件人：')
                  .fontSize(12)
                  .fontColor(Color.Gray)
                  .margin({left:$r('app.float.padding'),right:$r('app.float.padding'),top:$r('app.float.padding')})
                Text(' '+this.infoList.getData(this.index).sender+' ')
                  .height(20)
                  .borderRadius(3)
                  .backgroundColor('#efefef')
              }
              Text('展开')
                .fontColor('#1296db')
                .margin({right:$r('app.float.padding')})
            }
            // 显示收件人信息
            Flex({justifyContent:FlexAlign.SpaceBetween}) {
              Row(){
                Text('收件人：')
                  .fontSize(12)
                  .fontColor(Color.Gray)
                  .margin({left:$r('app.float.padding'),right:$r('app.float.padding')})
                Text(' '+'menghaoran'+' ')
                  .height(20)
                  .borderRadius(3)
                  .backgroundColor('#efefef')
              }
              Text('10人未显示')
                .fontColor('#dddddd')
                .fontSize(12)
                .margin({right:$r('app.float.padding')})
            }
            .margin({top:$r('app.float.padding')})
            // 显示邮件内容
            Row() {
              Text(this.infoList.getData(this.index).content)
            }
            .width('100%')
            .margin({top:$r('app.float.padding')})
            .padding({left:$r('app.float.margin'),right:$r('app.float.margin')})
          }
        }
      }
      .layoutWeight(1)

      Flex(){
        ForEach(this.itemList,(item:ItemInfo,index:number)=>{
          this.bottomItem(item.image,item.title,()=>{
              if(index===3) {
                if (this.dialogController != null) {
                  this.dialogController.open()
                }
              }
          })
        })
      }
      .backgroundColor('#ececec')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
    .width('100%')
    .height('100%')
  }
  .hideTitleBar(true)
  .onReady((ctx: NavDestinationContext) => {
    // 在NavDestination中能够拿到传来的NavPathInfo和当前所处的NavPathStack
    try {
      this.infoList = (ctx?.pathInfo?.param as EmailInfoParam).infoList;
      this.index = (ctx?.pathInfo?.param as EmailInfoParam).index;
    } catch (e) {
      hilog.error(0x0001, 'showToast error: %{public}s ', JSON.stringify(e));
    }
  })
}

总结

通过上述核心代码，我们在 HarmonyOS Next 中成功构建了一个邮件详情页面。该页面利用 LazyDataSource 管理邮件信息，使用 CustomDialogController 实现自定义弹窗，通过 ForEach 动态渲染底部操作按钮。同时，在 onReady 生命周期函数中获取导航传递的邮件信息，实现了邮件详细信息的展示和底部操作按钮的交互。开发者可以根据实际需求进一步扩展和优化该页面，如完善底部操作按钮的具体功能、优化邮件信息展示样式等，以满足更多办公场景的需求。