harmony 鸿蒙自定义弹窗(CustomDialog)
自定义弹窗(CustomDialog)
CustomDialog是自定义弹窗,可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。
创建自定义弹窗
使用\@CustomDialog装饰器装饰自定义弹窗。
\@CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。
@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({}),
})
build() {
Column() {
Text('我是内容')
.fontSize(20)
.margin({ top: 10, bottom: 10 })
}
}
}
- 创建构造器,与装饰器呼应相连。
@Entry
@Component
struct CustomDialogUser {
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(),
})
}
- 点击与onClick事件绑定的组件使弹窗弹出。
@Entry
@Component
struct CustomDialogUser {dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(),
})
build() {
Column() {
Button('click me')
.onClick(() => {
this.dialogController.open()
})
}.width('100%').margin({ top: 5 })
}
}
弹窗的交互
弹窗可用于数据交互,完成用户一系列响应操作。
- 在\@CustomDialog装饰器内添加按钮,同时添加数据函数。
@CustomDialog
struct CustomDialogExample {
cancel: () => void = () => {
console.info('Callback when the first button is clicked')
}
confirm: () => void = () => {
console.info('Callback when the second button is clicked')
}
controller: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: this.cancel,
confirm: this.confirm,
}),
})
build() {
Column() {
Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('cancel')
.onClick(() => {
this.controller.close()
this.cancel()
}).backgroundColor(0xffffff).fontColor(Color.Black)
Button('confirm')
.onClick(() => {
this.controller.close()
this.confirm()
}).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 })
}
}
}
- 页面内需要在构造器内进行接收,同时创建相应的函数操作。
@Entry
@Component
struct CustomDialogUser {
@State bud: Record<string, Function|void> = { 'cancel': this.onCancel(), 'confirm': this.onAccept() }
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(this.bud),
})
onCancel() {
console.info('Callback when the first button is clicked')
}
onAccept() {
console.info('Callback when the second button is clicked')
}
build() {
Column() {
Button('click me')
.onClick(() => {
this.dialogController.open()
})
}.width('100%').margin({ top: 5 })
}
}
完整示例
// xxx.ets
@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController = new CustomDialogController({
builder: undefined
})
build() {
Column() {
Text('我是内容')
.fontSize(20)
.margin({ top: 10, bottom: 10 })
}
}
}
@Entry
@Component
struct CustomDialogUser {
@State bud: Record<string, Function|void> = { 'cancel': this.onCancel(), 'confirm': this.onAccept() }
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(this.bud),
})
onCancel() {
console.info('Callback when the first button is clicked')
}
onAccept() {
console.info('Callback when the second button is clicked')
}
build() {
Column() {
Button('click me')
.onClick(() => {
this.dialogController.open()
})
}.width('100%').margin({ top: 5 })
}
}
相关实例
针对自定义弹窗开发,有以下相关实例可供参考:
你可能感兴趣的鸿蒙文章
0
赞
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦