鸿蒙Next开发定义全局公用弹框
定义全局公用弹框还是很有必要的,一般取消,确定用的都是同一个样式的弹框,这样app看起来统一,也好管理。
效果图如下
是否要取消按钮,确定按钮都是可以通过传参来控制的。
你们也可以看我b站视频,看完整效果
https://www.bilibili.com/video/BV1Lf421X7J3/
部分参考代码
/**
*通用Dialog弹窗组件
*/
@CustomDialog
export struct CommonDialog {
//自定义加载的内容
@BuilderParam contentBuilder?: () => void
//标题
title: ResourceStr = $r('app.string.tip')
//描述
description: ResourceStr = ''
//确认按钮文案
private positiveText:ResourceStr = $r('app.string.sure')
//取消按钮文案
private negativeText:ResourceStr = $r('app.string.cancel')
//确认按钮回调
positiveCallback?: () => void
//取消按钮回调
negativeCallback?: () => void
//展示确认按钮
private showPositive = true
//展示取消按钮
private showNegative = true
//弹窗控制器
controller: CustomDialogController
aboutToAppear() {
}
build() {
Stack() {
Column() {
Text(this.title)
.fontSize($r('app.float.size_text_16'))
.fontColor($r('app.color.color_black'))
.fontWeight(FontWeight.Bold)
.maxLines(1)
.height($r('app.float.size_text_50'))
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Divider().color($r('app.color.color_f5f5f5'))
Text(this.description)
.fontSize($r('app.float.size_text_15'))
.fontColor($r('app.color.color_555'))
.textAlign(TextAlign.Center)
.padding($r('app.float.size_text_20'))
Divider().color($r('app.color.color_f5f5f5')).padding(0)
Row() {
Text(this.negativeText)
.flexShrink(1)
.textAlign(TextAlign.Center)
.layoutWeight(1)
.visibility(this.showNegative ? Visibility.Visible : Visibility.None)
.onClick(() => {
this.negativeCallback?.()
this.controller.close()
})
有需要完整代码的可私信