原生AlertDialog.show开启的弹出确认框效果不好，自定义一个CustomDialog弹出框

hm688c71dfd9977

发布于 2025-10-29 12:45

浏览

0收藏

1、原生效果不佳：

标题提示信息没有居中显示，效果不佳

原生AlertDialog.show开启的弹出确认框效果不好，自定义一个CustomDialog弹出框-鸿蒙开发者社区 cke_3575.png

2、自定义效果

原生AlertDialog.show开启的弹出确认框效果不好，自定义一个CustomDialog弹出框-鸿蒙开发者社区 cke_714.png

2.1上代码

@Entry
@Component
struct PageDemo {
  @State message: string = 'Hello World';
  confirmDialogController: CustomDialogController = new CustomDialogController({
    builder: NXConfirmDialog({
      cancel: () => {
        console.log('取消回调');
      },
      confirm: () => {
        console.log('确认回调');
      },
      title: '安全退出',
      message: '请确认是否退出当前登录账号'
    }),
    alignment: DialogAlignment.Default,
    // 点击弹框外空白区域，关闭弹框
    autoCancel: true,
    width: '80%',
    cornerRadius: 10
  });

  build() {
    RelativeContainer() {
      Stack({ alignContent: Alignment.Center }) {
        Column() {
          Text('陛下，点击一下显示弹窗')// .position({ top: 6, right: 0 })
            .fontSize(20)
            .fontColor('#ffffff')

            .textAlign(TextAlign.End)// .width('100%')
            .onClick(async () => {
              this.confirmDialogController.open()
            });
        }
      }
      .backgroundColor('#80000000')
      .borderRadius(4)
      .height(36)

      // .width(80)

    }
    .height('100%')
    .width('100%')
  }
}

@CustomDialog
struct NXConfirmDialog {
  controller: CustomDialogController;
  cancel?: () => void; // 取消回调
  confirm?: () => void; // 确认回调
  title: string = '确认'
  message: string = ''
  borderColors: EdgeColors | ResourceColor | LocalizedEdgeColors = '#30000000'
  borderWidths: number = 0.5

  build() {
    Column() {
      Text(this.title)
        .fontSize(16)
        .fontWeight(500)
        .margin({ top: 30 })
        .textAlign(TextAlign.Center)
      Text(this.message)
        .fontSize(13)
        .fontWeight(400)
        .margin({ top: 16 })
        .opacity(0.7)
        .width('80%')
        .lineHeight(18)
        .textAlign(TextAlign.Center)
      Row() {
        Text('否')
          .fontSize(14)
          .textAlign(TextAlign.Center)
          .width('50%')
          .height('100%')
          .border({ style: BorderStyle.Solid, width: { top: this.borderWidths, right: 0 }, color: this.borderColors })
          .onClick(() => {
            this.cancel?.()
            this.controller.close()
          })
        Text('是')
          .fontSize(14)
          .textAlign(TextAlign.Center)
          .width('50%')
          .height('100%')
          .border({
            style: BorderStyle.Solid,
            width: { left: this.borderWidths, top: this.borderWidths },
            color: this.borderColors
          })
          .onClick(() => {
            this.confirm?.()
            this.controller.close()
          })
      }
      .margin({ top: 30 })
      .height(40)
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
    }
    .width('100%')
    .backgroundColor(Color.White)
  }
}

2.2 其中自定义弹框组件为

NXConfirmDialog

初始化：confirmDialogController

confirmDialogController: CustomDialogController = new CustomDialogController({
  builder: NXConfirmDialog({
    cancel: () => {
      console.log('取消回调');
    },
    confirm: () => {
      console.log('确认回调');
    },
    title: '安全退出',
    message: '请确认是否退出当前登录账号'
  }),
  alignment: DialogAlignment.Default,
  // 点击弹框外空白区域，关闭弹框
  autoCancel: true,
  width: '80%',
  cornerRadius: 10
});

调用方式：