1.自定义弹出框 (CustomDialog)
//1.新建文件CustomDialogExample
@CustomDialog
export struct CustomDialogExample {
cancel: () => void = () => {
}
confirm: () => void = () => {
}
@Prop mess: string = '加载中1。。。'
controller: CustomDialogController;
build() {
Column() {
LoadingProgress().width(48)
.height(48)
.color(Color.White)
Text(this.mess).fontSize(14)
.fontColor(Color.White)
Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('cancel')
.onClick(() => {
this.controller.close();
if (this.cancel) {
this.cancel();
}
}).backgroundColor(0xffffff).fontColor(Color.Black)
Button('confirm')
.onClick(() => {
this.controller.close();
if (this.confirm) {
this.confirm();
}
}).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 2 })
}
.width(200)
.height(200)
.borderRadius(20)
.backgroundColor(Color.Pink)
}
}
//2.新建页面：CustomDialogUser
import { CustomDialogExample } from './CustomDialogExample';
@Entry
@ComponentV2
struct CustomDialogUser {
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: ()=> { this.onCancel() },
confirm: ()=> { this.onAccept() },
mess:'加载中2。。。'
}),
alignment: DialogAlignment.Center,
customStyle:true,
});
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: 50 })
}
}
2参考官网链接：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-common-components-custom-dialog#%E5%BC%B9%E5%87%BA%E6%A1%86%E7%9A%84%E6%A0%B7%E5%BC%8F
