效果如下:
import { promptAction } from '@kit.ArkUI'
let customDialogId: number = 0
@Builder
function customDialogBuilder() {
Column() {
Blank().height(30)
Text('确定要删除吗?').fontSize(15)
Blank().height(40)
Row() {
Button("取消").onClick(() => {
promptAction.closeCustomDialog(customDialogId)
})
.width(80).height(30)
.fontColor($r("app.color.btn_button"))
.backgroundColor($r('app.color.white'))
Blank().width(50)
Button("确认").onClick(() => {
promptAction.closeCustomDialog(customDialogId)
})
.backgroundColor($r("app.color.btn_button"))
.fontColor($r('app.color.white'))
.width(80).height(30)
}
}
}
@Entry
@Component
struct CustomDialog {
@State message: string = 'Hello World'
@Builder
customDialogComponent() {
customDialogBuilder()
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
promptAction.openCustomDialog({
builder: () => {
this.customDialogComponent()
},
showInSubWindow: false,
offset: { dx: 5, dy: 5 },
backgroundColor: 0xd9ffffff,
cornerRadius: 20,
width: '80%',
height: 150,
borderWidth: 1,
borderColor:$r('app.color.white'), //使用borderColor属性,需要和borderWidth属性一起使用
shadow: ({
radius: 20,
color: Color.Grey,
offsetX: 50,
offsetY: 0
}),
}).then((dialogId: number) => {
customDialogId = dialogId
})
})
}
.width('100%')
}
.height('100%')
}
}