一、了解弹框组件

1. 弹出框类型：

• TipsDialog：提示弹出框，带图形确认框，必要时可通过图形化方式展现确认框。
• SelectDialog：选择类弹出框，弹框中以列表或网格的形式提供可选的内容。
• ConfirmDialog：信息确认类弹出框，用于操作未正确执行或未正确操作时的错误或提示信息。
• AlertDialog：操作确认类弹出框，触发一个将产生严重后果的不可逆操作时显示，如删除、重置等。
• LoadingDialog：进度加载类弹出框，操作正在执行时的提示信息。
• CustomContentDialog：自定义内容区弹出框，同时支持定义操作区按钮样式。

2. 导入模块：

typescript复制代码

import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog,

CustomContentDialog } from '@kit.ArkUI';

二、创建弹框

1. 使用@CustomDialog装饰的自定义组件：

• 创建一个自定义组件，并使用@CustomDialog装饰器进行装饰。
• 在自定义组件中声明CustomDialogController类型的变量，用于控制弹框的显示和隐藏。

2. 在@Entry中控制弹框：

• 在需要显示弹框的@Entry页面中，声明一个CustomDialogController类型的变量，并完成初始化。
• 通过这个变量来控制弹框的打开和关闭。

三、弹框参数与自定义

1. 通用参数：

• 如标题（title）、内容（content）、按钮（primaryButton、secondaryButton）等。

2. 自定义内容：

• 使用CustomContentDialog可以创建自定义内容的弹框。
• 通过contentBuilder属性传入一个构建自定义内容的函数。

3. 动画与布局：

• 可以自定义弹框的动画效果，如显示和隐藏的动画。
• 可以自定义弹框的布局，如按钮的位置、大小、样式等。

四、示例代码

• 以下是一个简单的示例代码，展示了如何创建一个自定义的弹框：

import { CustomContentDialog, ButtonOptions } from '@kit.ArkUI';

@CustomDialog

@Entry

@Component

struct CustomDialogExample {

@State controller: CustomDialogController = new CustomDialogController();

build() {

CustomContentDialog({

controller: this.controller,

contentBuilder: () => {

Column() {

Text('这是一个自定义内容的弹框')

.fontSize(18)

.margin(20)

.textColor(Color.Black);

Row() {

Button('确定')

.onClick(() => {

this.controller.close();

})

.width('50%')

.margin({ top: 20 })

.backgroundColor(Color.Blue)

.textColor(Color.White);

Button('取消')

.onClick(() => {

this.controller.close();

})

.width('50%')

.margin({ top: 20, left: 10 })

.backgroundColor(Color.Gray)

.textColor(Color.White);

}

}

}

});

}

showDialog() {

this.controller.open();

}

}