HarmonyOS Next快速入门：@CustomDialog自定义弹窗
原创
HarmonyOS Next快速入门：@CustomDialog自定义弹窗
原创
中雨
修改于 2025-07-04 17:55:40
修改于 2025-07-04 17:55:40
##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##
CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。
接口
constructor(value: CustomDialogControllerOptions)CustomDialogControllerOptions对象说明
- builder：自定义弹窗内容构造器。
- cancel：返回、ESC键和点击遮障层弹窗退出时的回调。
- autoCancel：是否允许点击遮障层退出，true表示关闭弹窗。false表示不关闭弹窗。（默认值：true）
- alignment：弹窗在竖直方向上的对齐方式。（默认值：DialogAlignment.Default）
- offset：弹窗相对alignment所在位置的偏移量。（默认值：{ dx: 0, dy: 0 }）
- customStyle：弹窗容器样式是否自定义。
- gridCount：弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应，异常值按默认值处理，最大栅格数为系统最大栅格数。取值范围：大于等于0的整数。
- maskColor：自定义蒙层颜色。（默认值: 0x33000000）
- maskRect：弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。（默认值：{ x: 0, y: 0, width: '100%', height: '100%' }）
- openAnimation：自定义设置弹窗弹出的动画效果相关参数。
- closeAnimation：自定义设置弹窗关闭的动画效果相关参数。
- showInSubWindow：某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。（默认值：false，弹窗显示在应用内，而非独立子窗口。）
- backgroundColor：设置弹窗背板填充。（默认值：Color.Transparent）
- cornerRadius：设置背板的圆角半径。可分别设置4个圆角的半径。（默认值：{ topLeft: '32vp', topRight: '32vp', bottomLeft: '32vp', bottomRight: '32vp' }）
- isModal：弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层。（默认值：true，此时弹窗有蒙层。）
- onWillDismiss：交互式关闭回调函数。
- borderWidth：设置弹窗背板的边框宽度。可分别设置4个边框宽度。（默认值：0。）百分比参数方式：以父元素弹窗宽的百分比来设置弹窗的边框宽度。当弹窗左边框和右边框大于弹窗宽度，弹窗上边框和下边框大于弹窗高度，显示可能不符合预期。
- borderColor：设置弹窗背板的边框颜色。默认值：Color.Black如果使用borderColor属性，需要和borderWidth属性一起使用。
自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现
@CustomDialog
export struct WelcomeDialog {
controller: CustomDialogController
confirm?: () => void
cancel?: () => void
build() {
Column({ space: 10 }) {
Text("欢迎使用")
Text('请同意')
Text('《用户协议》')
Button('同意').onClick(() => {
this.controller.close()
if (this.confirm) {
this.confirm()
}
}).width(150)
Button('不同意')
.width(150)
.backgroundColor(Color.Gray)
.onClick(() => {
this.controller.close()
if (this.cancel) {
this.cancel()
}
})
}.padding(10)
}
}然后通过CustomDialogController来控制自定义弹窗的显示和隐藏。
import { WelcomeDialog } from './componnents/WelcomeDialog';
@Entry
@Component
struct CustomDialogPage {
@State message: string = '第2节 @CustomDialog自定义弹窗';
@State dialogResult: string = ''
dialogController: CustomDialogController = new CustomDialogController({
builder: WelcomeDialog({
cancel: () => {
this.dialogResult = '不同意'
},
confirm: () => {
this.dialogResult = '同意'
},
}),
})
build() {
Column({space:10}) {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button('自定义弹窗').onClick(() => {
this.dialogController.open()
})
Text('自定义弹窗执行结果：' + this.dialogResult)
}
.height('100%')
.width('100%')
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
