IT评测·应用市场-qidao123.com

标题: 鸿蒙OpenHarmony【警告弹窗 (AlertDialog)】弹窗 [打印本页]

作者: 前进之路 时间: 2025-1-1 05:06
标题: 鸿蒙OpenHarmony【警告弹窗 (AlertDialog)】弹窗
AlertDialog

show

static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)
定义警告弹窗并弹出。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填说明value[AlertDialogParamWithConfirm][AlertDialogParamWithButtons][AlertDialogParamWithOptions]10+ AlertDialogParam对象说明

体系能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明title[ResourceStr]否弹窗标题。元服务API： 从API version 11开始，该接口支持在元服务中使用。subtitle10+[ResourceStr]否弹窗副标题。元服务API： 从API version 11开始，该接口支持在元服务中使用。message[ResourceStr]是弹窗内容。元服务API： 从API version 11开始，该接口支持在元服务中使用。autoCancelboolean否点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。默认值：true元服务API：从API version 11开始，该接口支持在元服务中使用。cancel() => void否点击遮障层关闭dialog时的回调。元服务API： 从API version 11开始，该接口支持在元服务中使用。alignment[DialogAlignment]否弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default元服务API：从API version 11开始，该接口支持在元服务中使用。说明：若在UIExtension中设置showInSubWindow为true, 弹窗将基于UIExtension的宿主窗口对齐。offset[Offset]否弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0 , dy: 0 }元服务API： 从API version 11开始，该接口支持在元服务中使用。gridCountnumber否弹窗容器宽度所占用栅格数。默认值：4元服务API：从API version 11开始，该接口支持在元服务中使用。maskRect10+[Rectangle]否弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。默认值：{ x: 0, y: 0, width: ‘100%’, height: ‘100%’ }**说明：**showInSubWindow为true时，maskRect不见效。元服务API： 从API version 11开始，该接口支持在元服务中使用。showInSubWindow11+boolean否某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。默认值：false，弹窗显示在应用内，而非独立子窗口。说明：showInSubWindow为true的弹窗无法触发显示另一个showInSubWindow为true的弹窗。元服务API： 从API version 12开始，该接口支持在元服务中使用。isModal11+boolean否弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层。默认值：true，此时弹窗有蒙层。元服务API： 从API version 12开始，该接口支持在元服务中使用。backgroundColor11+[ResourceColor]否弹窗背板颜色。默认值：Color.Transparent**说明：**当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期结果。元服务API： 从API version 12开始，该接口支持在元服务中使用。backgroundBlurStyle11+[BlurStyle]否弹窗背板含糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK**说明：**设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色显示将不符合预期结果。元服务API： 从API version 12开始，该接口支持在元服务中使用。onWillDismiss12+Callback<[DismissDialogAction]>否交互式关闭回调函数。**说明：**1.当用户执行点击遮障层关闭、左滑/右滑、三键back、键盘ESC关闭交互操作时，如果注册该回调函数，则不会立即关闭弹窗。在回调函数中可以通过reason得到拦阻关闭弹窗的操作范例，从而根据原因选择是否能关闭弹窗。当前组件返回的reason中，暂不支持CLOSE_BUTTON的罗列值。2.在onWillDismiss回调中，不能再做onWillDismiss拦截。元服务API： 从API version 12开始，该接口支持在元服务中使用。cornerRadius12+[BorderRadiuses][Dimension][LocalizedBorderRadiuses]transition12+[TransitionEffect]否设置弹窗显示和退出的过渡结果。**说明：**1.如果不设置，则使用默认的显示/退出动效。2.显示动效中按back键，打断显示动效，执行退出动效，动画结果为显示动效与退出动效的曲线叠加后的结果。3.退出动效中按back键，不会打断退出动效，退出动效继续执行，继续按back键退出应用。元服务API： 从API version 12开始，该接口支持在元服务中使用。width12+[Dimension]否设置弹窗背板的宽度。说明：- 弹窗宽度默认最大值：400vp。- 百分比参数方式：弹窗参考宽度为所在窗口的宽度，在此基础上调小或调大。元服务API： 从API version 12开始，该接口支持在元服务中使用。height12+[Dimension]否设置弹窗背板的高度。说明：- 弹窗高度默认最大值：0.9 *（窗口高度 - 安全区域）。- 百分比参数方式：弹窗参考高度为（窗口高度 - 安全区域），在此基础上调小或调大。元服务API： 从API version 12开始，该接口支持在元服务中使用。borderWidth12+[Dimension][EdgeWidths][LocalizedEdgeWidths]borderColor12+[ResourceColor][EdgeColors])[LocalizedEdgeColors]borderStyle12+[BorderStyle][EdgeStyles]否shadow12+[ShadowOptions][ShadowStyle]否textStyle12+[TextStyle]否设置弹窗message内容的文本样式。元服务API： 从API version 12开始，该接口支持在元服务中使用。 AlertDialogParamWithConfirm对象说明

继承自[AlertDialogParam]。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明confirm{enabled10+?: boolean,defaultFocus10+?: boolean,style10+?: [DialogButtonStyle],value: [ResourceStr],fontColor?: [ResourceColor],backgroundColor?: [ResourceColor],action: () => void}否确认Button的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。在弹窗获焦且未举行tab键走焦时，该按钮默认响应Enter键，且多重弹窗可自动获焦连续响应。默认响应Enter键能力在defaultFocus为true时不见效。enabled：点击Button是否响应，true表示Button可以响应，false表示Button不可以响应。默认值：truedefaultFocus：设置Button是否是默认焦点，true表示Button是默认焦点，false表示Button不是默认焦点。默认值：falsestyle：设置Button的风格样式。默认值：DialogButtonStyle.DEFAULT。value：Button文本内容。fontColor：Button文本颜色。backgroundColor：Button背景颜色。action： Button选中时的回调。 confirm参数优先级：fontColor、backgroundColor > style > defaultFocus
backgroundColorfontColorstyledefaultFocus结果绿底红字--绿底红字绿底-DialogButtonStyle.HIGHLIGHT-绿底白字绿底-DialogButtonStyle.DEFAULT-绿底蓝字绿底--TRUE绿底白字绿底--FALSE/-绿底蓝字-红字DialogButtonStyle.HIGHLIGHT-蓝底红字-红字DialogButtonStyle.DEFAULT-白底红字-红字-TRUE蓝底红字-红字-FALSE/-白底红字--DialogButtonStyle.HIGHLIGHT-蓝底白字--DialogButtonStyle.DEFAULT-白底蓝字---TRUE蓝底白字---FALSE/-白底蓝字 AlertDialogParamWithButtons对象说明

继承自[AlertDialogParam]。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明primaryButton{enabled10+?: boolean,defaultFocus10+?: boolean,style10+?: [DialogButtonStyle],value: [ResourceStr],fontColor?: [ResourceColor],backgroundColor?: [ResourceColor],action: () => void;}是确认Button的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。在弹窗获焦且未举行tab键走焦时，该按钮默认响应Enter键，且多重弹窗可自动获焦连续响应。默认响应Enter键能力在defaultFocus为true时不见效。enabled：点击Button是否响应。默认值：truedefaultFocus：设置Button是否是默认焦点。默认值：falsestyle：设置Button的风格样式。默认值：DialogButtonStyle.DEFAULT。value：Button文本内容。fontColor：Button文本颜色。backgroundColor：Button背景颜色。action： Button选中时的回调。secondaryButton{enabled10+?: boolean,defaultFocus10+?: boolean,style10+?: [DialogButtonStyle],value: [ResourceStr],fontColor?: [ResourceColor],backgroundColor?: [ResourceColor],action: () => void;}是确认Button的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。enabled：点击Button是否响应。默认值：true。defaultFocus：设置Button是否是默认焦点。默认值：false。style：设置Button的风格样式。默认值：DialogButtonStyle.DEFAULT。value：Button文本内容。fontColor：Button文本颜色。backgroundColor：Button背景颜色。action： Button选中时的回调。 AlertDialogParamWithOptions10+对象说明

继承自[AlertDialogParam]。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明buttons10+Array<[AlertDialogButtonOptions]>是弹窗容器中的多个按钮。buttonDirection10+[DialogButtonDirection]否按钮排布方向默认值为DialogButtonDirection.AUTO，建议3个以上按钮使用Auto模式（两个以上按钮会切换为纵向模式，通常能显示更多按钮），非Auto模式下，3个以上按钮可能会显示不全，超出显示范围的按钮会被截断。 AlertDialogButtonOptions10+对象说明

体系能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明enabledboolean否点击Button是否响应，默认值true。元服务API： 从API version 11开始，该接口支持在元服务中使用。defaultFocusboolean否设置Button是否是默认焦点，默认值false。元服务API： 从API version 11开始，该接口支持在元服务中使用。style[DialogButtonStyle]否设置Button的风格样式，默认值DialogButtonStyle.DEFAULT。元服务API： 从API version 11开始，该接口支持在元服务中使用。value[ResourceStr]是Button的文本内容，若值为null，则该按钮不显示。元服务API： 从API version 11开始，该接口支持在元服务中使用。fontColor[ResourceColor]否Button的文本颜色。元服务API： 从API version 11开始，该接口支持在元服务中使用。backgroundColor[ResourceColor]否Button背景颜色。元服务API： 从API version 11开始，该接口支持在元服务中使用。action() => void是Button选中时的回调。元服务API： 从API version 11开始，该接口支持在元服务中使用。primary12+boolean否在弹窗获焦且未举行tab键走焦时，按钮是否默认响应Enter键。多个Button时，只答应一个Button的该字段设置为true，否则全部Button均不响应。多重弹窗可自动获焦连续响应。在defaultFocus为true时不见效。元服务API： 从API version 12开始，该接口支持在元服务中使用。 DialogButtonDirection10+罗列说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称描述AUTO两个及以下按钮水平排布，两个以上为竖直排布。HORIZONTAL按钮水平结构。VERTICAL按钮竖直结构。 DialogAlignment罗列说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称描述Top垂直顶部对齐。Center垂直居中对齐。Bottom垂直底部对齐。Default默认对齐。TopStart8+左上对齐。TopEnd8+右上对齐。CenterStart8+左中对齐。CenterEnd8+右中对齐。BottomStart8+左下对齐。BottomEnd8+右下对齐。 Rectangle8+范例说明

Rectangle是各种Dialog中maskRect参数的范例。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明x[Length]否弹窗遮蔽层区域相对于窗口左上角的x轴坐标。默认值：0vpy[Length]否弹窗遮蔽层区域相对于窗口左上角的y轴坐标。默认值：0vpwidth[Length]否弹窗遮蔽层区域的宽度。默认值：‘100%’height[Length]否弹窗遮蔽层区域的高度。默认值：‘100%’ 说明
x和y可以设置正负值百分比。当x设置为’100%‘时表示遮蔽层区域往右偏移窗口本身宽度大小，当x设置为’-100%'时表示遮蔽层区域往左偏移窗口本身宽度大小。当y设置为’100%‘时表示遮蔽层区域往下偏移窗口本身高度大小，当y设置为’-100%'时表示遮蔽层区域往上偏移窗口本身高度大小。
width和height只能设置正值，支持百分比，如果设置为负值，那么该值将被重置为默认值。
百分比相对于窗口自身宽高举行计算。
DismissDialogAction12+

Dialog关闭的信息。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
属性

名称范例可读可写说明dismissCallback否否Dialog关闭回调函数。开辟者需要退出时调用，不需要退出时无需调用。reason[DismissReason]否否Dialog无法关闭原因。根据开辟者需要选择不同操作下，Dialog是否需要关闭。 TextStyle12+对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明wordBreak[WordBreak]否弹窗message内容的文本截断方式。默认值：WordBreak.BREAK_ALL 示例

示例1

说明
直接使用AlertDialog可能导致实例不明白的问题，建议使用[getUIContext]获取UIContext实例，并使用[showAlertDialog]调用绑定实例的AlertDialog.show()。
分别弹出一、二、三个按钮的弹窗。

// xxx.ets
@Entry
@Component
struct AlertDialogExample {
build() {
Column({ space: 5 }) {
Button('one button dialog')
.onClick(() => {
// 建议使用this.getUIContext().showAlertDialog()
AlertDialog.show(
{
title: 'title',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -20 },
gridCount: 3,
confirm: {
value: 'button',
action: () => {
console.info('Button-clicking callback')
}
},
cancel: () => {
console.info('Closed callbacks')
},
onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
dismissDialogAction.dismiss()
}
if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
dismissDialogAction.dismiss()
}
}
}
)
})
.backgroundColor(0x317aff)
Button('two button dialog')
.onClick(() => {
// 建议使用this.getUIContext().showAlertDialog()
AlertDialog.show(
{
title: 'title',
subtitle: 'subtitle',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Bottom,
gridCount: 4,
offset: { dx: 0, dy: -20 },
primaryButton: {
value: 'cancel',
action: () => {
console.info('Callback when the first button is clicked')
}
},
secondaryButton: {
enabled: true,
defaultFocus: true,
style: DialogButtonStyle.HIGHLIGHT,
value: 'ok',
action: () => {
console.info('Callback when the second button is clicked')
}
},
cancel: () => {
console.info('Closed callbacks')
},
onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
dismissDialogAction.dismiss()
}
if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
dismissDialogAction.dismiss()
}
}
}
)
}).backgroundColor(0x317aff)
Button('three button dialog')
.onClick(() => {
// 建议使用this.getUIContext().showAlertDialog()
AlertDialog.show(
{
title: 'title',
subtitle: 'subtitle',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Bottom,
gridCount: 4,
offset: { dx: 0, dy: -20 },
buttonDirection: DialogButtonDirection.HORIZONTAL,
buttons: [
{
value: '按钮',
action: () => {
console.info('Callback when button1 is clicked')
}
},
{
value: '按钮',
action: () => {
console.info('Callback when button2 is clicked')
}
},
{
value: '按钮',
enabled: true,
defaultFocus: true,
style: DialogButtonStyle.HIGHLIGHT,
action: () => {
console.info('Callback when button3 is clicked')
}
},
],
cancel: () => {
console.info('Closed callbacks')
},
onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
dismissDialogAction.dismiss()
}
if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
dismissDialogAction.dismiss()
}
}
}
)
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}

复制代码

示例2

弹出可展示在主窗外的弹窗。
说明
直接使用AlertDialog可能导致实例不明白的问题，建议使用[getUIContext]获取UIContext实例，并使用[showAlertDialog]调用绑定实例的AlertDialog.show()。

// xxx.ets
@Entry
@Component
struct AlertDialogExample {
build() {
Column({ space: 5 }) {
Button('one button dialog')
.onClick(() => {
// 建议使用this.getUIContext().showAlertDialog()
AlertDialog.show(
{
title: 'title',
subtitle: 'subtitle',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Center,
gridCount: 4,
showInSubWindow: true,
isModal: true,
offset: { dx: 0, dy: -20 },
buttonDirection: DialogButtonDirection.HORIZONTAL,
buttons: [
{
value: '按钮',
action: () => {
console.info('Callback when button1 is clicked')
}
},
{
value: '按钮',
action: () => {
console.info('Callback when button2 is clicked')
}
},
{
value: '按钮',
enabled: true,
defaultFocus: true,
style: DialogButtonStyle.HIGHLIGHT,
action: () => {
console.info('Callback when button3 is clicked')
}
},
],
cancel: () => {
console.info('Closed callbacks')
},
onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
dismissDialogAction.dismiss()
}
if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
dismissDialogAction.dismiss()
}
}
})
})
}.width('100%').margin({ top: 5 }).backgroundColor(0x317aff)
}
}

复制代码

示例3

AlertDialog显示动画连续3秒，退出动画连续100毫秒
说明
直接使用AlertDialog可能导致实例不明白的问题，建议使用[getUIContext]获取UIContext实例，并使用[showAlertDialog]调用绑定实例的AlertDialog.show()。

// xxx.ets
@Entry
@Component
struct AlertDialogExample {
build() {
Column({ space: 5 }) {
Button('AlertDialog Set Duration')
.onClick(()=>{
// 建议使用this.getUIContext().showAlertDialog()
AlertDialog.show(
{
title: 'AlertDialog 1',
message: 'Set Animation Duration open 3 second, close 100ms',
autoCancel: true,
alignment: DialogAlignment.Top,
offset: { dx: 0, dy: -20 },
gridCount: 3,
transition:TransitionEffect.asymmetric(TransitionEffect.OPACITY
.animation({ duration: 3000, curve: Curve.Sharp }).combine(TransitionEffect.scale({x: 1.5, y: 1.5}).animation({duration: 3000, curve: Curve.Sharp})),
TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth })
.combine(TransitionEffect.scale({x: 0.5, y: 0.5}).animation({duration: 100, curve: Curve.Smooth}))),
confirm: {
value: 'button',
action: () => {
console.info('Button-clicking callback')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
})
.backgroundColor(0x317aff).height("88px")
}.width('100%').margin({ top: 5 })
}
}

复制代码

示例4

该示例定义了AlertDialog的样式，如宽度、高度、背景色、阴影等等
说明
直接使用AlertDialog可能导致实例不明白的问题，建议使用[getUIContext]获取UIContext实例，并使用[showAlertDialog]调用绑定实例的AlertDialog.show()。

// xxx.ets
@Entry
@Component
struct AlertDialogExample {
build() {
Column({ space: 5 }) {
Button('one button dialog')
.onClick(() => {
// 建议使用this.getUIContext().showAlertDialog()
AlertDialog.show(
{
title: 'title',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Center,
offset: { dx: 0, dy: -20 },
gridCount: 3,
width: 300,
height: 200,
cornerRadius: 20,
borderWidth: 1,
borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
backgroundColor: Color.White,
shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
textStyle: { wordBreak: WordBreak.BREAK_ALL },
confirm: {
value: 'button',
action: () => {
console.info('Button-clicking callback')
}
},
cancel: () => {
console.info('Closed callbacks')
},
onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
dismissDialogAction.dismiss()
}
if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
dismissDialogAction.dismiss()
}
}
}
)
})
.backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)