Harmony OS 自定义弹窗组件 @CustomDialog的使用方法

以预览图片为例

先创建一个名为PreViewImage 的 @CustomDialog 组件，并用export default PreViewImage，导出组件。

@CustomDialog
struct PreViewImage {
  controller: CustomDialogController
  url: string = ''

  build() {
    Column() {
      Image(this.url)
        .width('100%')
    }
    .backgroundColor(Color.Black)
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .onClick(()=>{
      this.controller.close()
    })
  }
}

export default PreViewImage

再在父组件创建一个 命名为preViewControl的CustomDialogController ，将PreViewImage组件 作为builder的参数，将url传递给PreViewImage组件，将custcuomStyle值设为true,将控制@CustomDialog的方法写入方法内，这样调用preViewImageFn时也就调用了this.preViewControl.open()，将弹窗打开了。

       // 父组件 多个image message
       import Message from './Message'
       import PreViewImage from './PreViewImage'
       @State
       messageList: MessageInfoModel[] = []
         preViewUrl: string = ''

       preViewControl: CustomDialogController = new CustomDialogController({
         builder: PreViewImage({
           url: this.preViewUrl
         }),
         autoCancel: false,
         custcuomStyle: true
       })
       ...
       List({ space: 16, scroller: this.scroller }) {
        ForEach(this.messageList, (message: MessageInfoModel) => {
          ListItem() {
            Message({
              preViewImageFn: () => {
                  this.preViewUrl = 'file://' + message.sourceFilePath
                  this.preViewControl.open()
              }
            })
          }
        })
      }
      .layoutWeight(1)
      .backgroundColor($r('app.color.back_color'))
      .padding({
        top: 20
      })

传递方法

将 方法 preViewImageFn 作为参数传递给子组件Message，在子组件Message中接收 方法并点击图片时调用该方法。

  // message 子组件
  preViewImageFn:()=>void = ()=>{}
  ...

   Column(){
   // 不允许操控原图
   Image('file://'+ this.message.sourceFilePath)
       .width('100%')
       .borderRadius(4)
       .enabled(false)
   }
   .width('40%')
   .padding({
      left:10,
      right:10
    })
    .onClick(()=>{
      this.preViewImageFn()
    })