@Entry
@Component
struct MyPage {
// 自定义弹窗
dialogController: CustomDialogController | null = new CustomDialogController({
builder: CollectLineCustomDialog({
cancelCollectAction: ()=> { this.cancelCollectRequest() },
makeTopAction: ()=> { this.makeTopRequest() },
topTitle:'置顶'
}),
cancel: this.existApp,
autoCancel: true,
alignment: DialogAlignment.Bottom,
customStyle: false,
cornerRadius: 8,
width: '100%',
backgroundColor: Color.White,
})
// 取消收藏
cancelCollectRequest() {
// 关闭弹窗
this.dialogController?.close()
}
// 置顶、取消置顶
makeTopRequest() {
// 关闭弹窗
this.dialogController?.close()
}
private existApp() {
//返回、ESC键和点击遮障层弹窗退出时的回调。
}
build() {
Column() {
Text('显示弹窗')
.onClick(()=>{
if (this.dialogController != null) {
this.dialogController.open()
}
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor(CommonConstants.COLOR_COMMON_BACKGROUND)
}
}
// 自定义弹窗组件
@CustomDialog
struct CollectLineCustomDialog {
controller?: CustomDialogController
topTitle: string = ''
cancelCollectAction: () => void = () => {
}
makeTopAction: () => void = () => {
}
build() {
Column() {
if (this.topTitle.length > 0) {
Row() {
Text(this.topTitle).fontSize(18).fontColor('#333333')
}
.width('100%')
.height(56)
.justifyContent(FlexAlign.Center)
.onClick(this.makeTopAction)
Divider().vertical(false).width('100%').height(0.5).color('#E5E5E5')
}
Row() {
Text('取消收藏').fontSize(18).fontColor('#333333')
}
.width('100%')
.height(56)
.justifyContent(FlexAlign.Center)
.onClick(this.cancelCollectAction)
Row(){}.width('100%').height(8).backgroundColor('#F5F5F5')
Row() {
Text('取消').fontSize(18).fontColor('#333333')
}
.width('100%')
.height(56)
.justifyContent(FlexAlign.Center)
.onClick(() => {
if (this.controller != undefined) {
this.controller.close()
}
})
}
}
}
效果: