HarmonyOS 在claas或者function里面想要拉起自定义的弹出框，这个要怎么实现，自带的alert可以用，自定义的提示不能使用？

Question

在claas或者function里面想要拉起自定义的弹出框，这个要怎么实现，自带的alert可以用，自定义的提示不能使用

Answer 1

请参考以下代码示例：主页面

//在@entry中先设置builder，再直接调用showTest即可
import { customDialogBuilder, changeDialogBuilder, MyShowTest } from ‘…/pages/Page’
let myShowTest = new MyShowTest()
@Entry
@Component
struct Index {
  @State message: string = ‘Hello World’
  onPageShow(): void {
    changeDialogBuilder(customDialogBuilder.bind(this))
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            myShowTest.showTest()
          })
      }
      .width(‘100%’)
    }
    .height(‘100%’)
  }
}

自定义class类

// 自定义弹窗.ets
import promptAction from ‘@ohos.promptAction’
let myDialogBuilder: CustomBuilder;
let customDialogId: number = 0

@Builder
export function customDialogBuilder() {
  Column() {
    Text(‘Custom dialog Message’).fontSize(10)
    Row() {
      Button(“确认”).onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
      Blank().width(50)
      Button(“取消”).onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
    }
  }.height(200).padding(5)
}

export function changeDialogBuilder(builder: CustomBuilder) {
  myDialogBuilder = builder
}

export class MyShowTest{
  showTest() {
    if (myDialogBuilder === undefined) {
      return
    }
    promptAction.openCustomDialog({
      builder: myDialogBuilder
    }).then((dialogId: number) => {
      customDialogId = dialogId
    })
  }
}

改变customDialogBuilder() 为如下代码（Column 增加backGroundColor 和 width 属性），可自定义弹窗背景颜色

@Builder
export function customDialogBuilder() {
  Column() {
    Text(‘Custom dialog Message’).fontSize(10)
    Row() {
      Button(“确认”).onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
      Blank().width(50)
      Button(“取消”).onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
    }
  }.height(200).padding(5).backgroundColor(Color.Green).width(‘100%’)
}

使用backgroundImage和backgroundImageSize(ImageSize.Cover) 替换 backgroundColor 可达到类似的效果，但是弹窗的宽度大小现在不能改变