【入门到实战】OpenHarmony开发：Dialog 弹出框

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

介绍

弹出模态框，常用于消息提示、消息确认

导入依赖

import { DialogComponent } from '@peakmain/library/Index';

1. body设置参数

  setBodyMessage(title: string = "",
    message: string = "",
    leftText: string = "返回", //左边按钮
    leftTextColor: ResourceColor = $r("app.color.color_272a2b"), //左边文本颜色
    leftTextClick: () => void = () => {
    },
    rightText: string = "确认",
    rightTextColor: ResourceColor = $r("app.color.color_194d53"),
    rightTextClick: () => void = () => {
    },
    rightTextBold: boolean = true)

参数

示例代码

import { promptAction } from '@kit.ArkUI';
import { DialogComponent, NavBar } from '@peakmain/library';

@Entry
@Component
struct DialogPage {
  title: string = '确认删除订单';
  message: string = '删除后将无法恢复，无法再次操作。';
  leftText: string = '取消';
  rightTextColor: ResourceColor = $r("app.color.color_194d53")
  rightTextBold: boolean = true

  resetDefault() {
    this.title = '确认删除订单';
    this.message = '删除后将无法恢复，无法再次操作。';
    this.leftText = '取消';
    this.rightTextColor = $r("app.color.color_194d53")
    this.rightTextBold = true
  }

  confirm: CustomDialogController = new CustomDialogController({
    builder: DialogComponent({
      title: this.title,
      message: this.message,
      leftText: this.leftText,
      rightTextColor: this.rightTextColor,
      rightTextBold: this.rightTextBold,
      rightTextClick: () => {
        promptAction.showToast({
          message: `点击了${this.title}`,
        })
        this.confirm.close()
        this.resetDefault()
      }
    }),
    customStyle: true,
    alignment: DialogAlignment.Center,

  })

  build() {
      Column({ space: 20 }) {
        NavBar({
          title:"Dialog 弹出框"
        })
        Button("默认弹窗")
          .onClick(() => {
            this.confirm.open()
          })
        Button("提示弹窗")
          .onClick(() => {
            this.title = "提示"
            this.leftText = ""
            this.rightTextColor = $r("app.color.color_1989fa")
            this.confirm.open()
          })
        Button("弹窗(无标题)")
          .onClick(() => {
            this.title = ""
            this.leftText = ""
            this.rightTextColor = $r("app.color.color_1989fa")
            this.confirm.open()
          })

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

2. build设置参数

setBuilderMessage(builder: DialogBuilder):void

DialogBuilder参数

3. 设置标题

setTitle(title: string = ""):void

参数

4. 设置内容信息

setMessage(message: string = "") :void

参数

5. 设置左边按钮

setLeftButton(leftText: string = "返回", leftTextClick: () => void = () => {})

参数

6. 设置右边按钮

setRightButton(rightText: string = "确认", rightTextClick: () => void = () => {})

参数