鸿蒙5.0开发进阶：ArkTS组件-警告弹窗 (AlertDialog)

最新推荐文章于 2025-09-04 10:02:45 发布
原创 最新推荐文章于 2025-09-04 10:02:45 发布 · 892 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #前端 #ArkUI #ArkTS

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

警告弹窗 (AlertDialog)

显示警告弹窗组件，可设置文本内容与响应回调。

说明

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。

从API version 10开始，可以通过使用UIContext中的showAlertDialog来明确UI的执行上下文。

AlertDialog

show

static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)

定义警告弹窗并弹出。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueAlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions10+是定义并显示AlertDialog组件。

AlertDialogParam对象说明

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
titleResourceStr否

弹窗标题。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

subtitle10+ResourceStr否

弹窗副标题。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

messageResourceStr是

弹窗内容。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

autoCancelboolean否

点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。

默认值：true

元服务API： 从API version 11开始，该接口支持在元服务中使用。

cancel() => void否

点击遮障层关闭dialog时的回调。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

alignmentDialogAlignment否

弹窗在竖直方向上的对齐方式。

默认值：DialogAlignment.Default

元服务API： 从API version 11开始，该接口支持在元服务中使用。

说明：

若在UIExtension中设置showInSubWindow为true, 弹窗将基于UIExtension的宿主窗口对齐。

offsetOffset否

弹窗相对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否

设置背板的圆角半径。

可分别设置4个圆角的半径。

默认值：{ topLeft: '32vp', topRight: '32vp', bottomLeft: '32vp', bottomRight: '32vp' }

圆角大小受组件尺寸限制，最大值为组件宽或高的一半，若值为负，则按照默认值处理。

百分比参数方式：以父元素弹窗宽和高的百分比来设置弹窗的圆角。

说明：

当cornerRadius属性类型为LocalizedBorderRadiuses时，支持随语言习惯改变布局顺序。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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否

可分别设置4个边框宽度。

默认值：0

百分比参数方式：以父元素弹窗宽的百分比来设置弹窗的边框宽度。

当弹窗左边框和右边框大于弹窗宽度，弹窗上边框和下边框大于弹窗高度，显示可能不符合预期。

说明：

当borderWidth属性类型为LocalizedEdgeWidths时，支持随语言习惯改变布局顺序。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

borderColor12+ResourceColor | EdgeColors | LocalizedEdgeColors否

设置弹窗背板的边框颜色。

默认值：Color.Black

如果使用borderColor属性，需要和borderWidth属性一起使用。说明：

当borderColor属性类型为LocalizedEdgeColors时，支持随语言习惯改变布局顺序。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

borderStyle12+BorderStyle | EdgeStyles否

设置弹窗背板的边框样式。

默认值：BorderStyle.Solid

如果使用borderStyle属性，需要和borderWidth属性一起使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

shadow12+ShadowOptions | ShadowStyle否

设置弹窗背板的阴影。

当设备为2in1时，默认场景下获焦阴影值为ShadowStyle.OUTER_FLOATING_MD，失焦为ShadowStyle.OUTER_FLOATING_SM

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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不可以响应。

默认值：true

defaultFocus：设置Button是否是默认焦点，true表示Button是默认焦点，false表示Button不是默认焦点。

默认值：false

style：设置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是否响应。

默认值：true

defaultFocus：设置Button是否是默认焦点。

默认值：false

style：设置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开始，该接口支持在元服务中使用。

styleDialogButtonStyle否

设置Button的风格样式，默认值DialogButtonStyle.DEFAULT。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

valueResourceStr是

Button的文本内容，若值为null，则该按钮不显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

fontColorResourceColor否

Button的文本颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

backgroundColorResourceColor否

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

名称类型必填说明
xLength否

弹窗遮蔽层区域相对于窗口左上角的x轴坐标。

默认值：0vp

yLength否

弹窗遮蔽层区域相对于窗口左上角的y轴坐标。

默认值：0vp

widthLength否

弹窗遮蔽层区域的宽度。

默认值：'100%'

heightLength否

弹窗遮蔽层区域的高度。

默认值：'100%'

说明

x和y可以设置正负值百分比。当x设置为'100%'时表示遮蔽层区域往右偏移窗口本身宽度大小，当x设置为'-100%'时表示遮蔽层区域往左偏移窗口本身宽度大小。当y设置为'100%'时表示遮蔽层区域往下偏移窗口本身高度大小，当y设置为'-100%'时表示遮蔽层区域往上偏移窗口本身高度大小。

width和height只能设置正值，支持百分比，如果设置为负值，那么该值将被重置为默认值。

百分比相对于窗口自身宽高进行计算。

DismissDialogAction12+

Dialog关闭的信息。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

名称类型可读可写说明
dismissCallback<void>否否Dialog关闭回调函数。开发者需要退出时调用，不需要退出时无需调用。
reasonDismissReason否否Dialog无法关闭原因。根据开发者需要选择不同操作下，Dialog是否需要关闭。

TextStyle12+对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
wordBreakWordBreak否

弹窗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（可在主窗外弹出的弹窗）

该示例通过配置showInSubWindow为true弹出可以在主窗外显示的弹窗。

说明

直接使用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（设置弹窗的动画）

该示例通过配置transition实现弹窗的显示和消失动画。

说明

直接使用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 })
  }
}

鸿蒙OpenHarmony【警告弹窗 (AlertDialog)】弹窗
hhhhhh2323的博客
11-21 1311
定义警告弹窗并弹出。
鸿蒙5.0版开发：ArkTS组件-警告弹窗 (AlertDialog)
m0_69424697的博客
11-29 962
显示警告弹窗组件，可设置文本内容与响应回调。
HarmonyOS NEXT鸿蒙开发入门，警告弹窗 (AlertDialog)
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-10 2467
AlertDialogParamWithConfirm对象说明。AlertDialogParamWithButtons对象说明。AlertDialogParam对象说明。,更多使用方法请查看官方API文档。定义警告弹窗并弹出。
HarmonyOS 新一代声明式 UI 弹窗机制：从 AlertDialog 到 CustomDialogController 的深度解析与实践
最新发布
不懂先生的博客
09-04 777
HarmonyOS 4.0+ 的状态驱动：弹窗的显示/隐藏与组件状态绑定，数据流清晰可控。极强的灵活性：弹窗内容完全自定义，可以嵌入任何 ArkUI 组件，实现极其复杂的交互界面。良好的生命周期管理：提供了和生命周期回调，便于资源管理。优秀的动效支持：可以轻松配置丰富的入场和退场动画。展望未来，随着鸿蒙生态的持续发展，弹窗组件可能会在无障碍访问、跨设备自适应展示（比如在平板、车机、手机上的不同形态）以及性能优化方面带来更多开箱即用的支持。最佳实践清单优先使用声明式：摒弃命令式的show()
【鸿蒙开发】弹窗组件AlertDialog，ActionSheet，DatePickerDialog，TimePickerDialog，TextPickerDialog
d312697510的博客
04-08 4066
鸿蒙开发arkts，AlertDialog警告弹窗，ActionSheet列表选择弹窗，DatePickerDialog日期选择弹窗，TimePickerDialog时间选择弹窗，TextPickerDialog文本选择弹窗
HarmonyOS系统开发ArkTS常用组件弹窗及参数（十）
qq_41946216的博客
03-20 5564
弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。
鸿蒙Harmony应用开发—ArkTS-全局UI方法（警告弹窗）
m0_64420071的博客
03-21 1900
显示警告弹窗组件，可设置文本内容与响应回调。
鸿蒙5.0版开发：ArkTS组件-弹出框 (Dialog)
m0_69424697的博客
11-30 1440
弹出框是一种模态窗口，通常用于在保持当前的上下文环境时........
鸿蒙5.0版开发：ArkTS高级组件-@ohos.arkui.advanced.Dialog (弹出框)
m0_69424697的博客
10-09 1089
弹出框是一种模态窗口，通常用于在保持当前的上下文环境时.........
鸿蒙5.0进阶开发：ArkWeb框架-使用WebRTC进行Web视频会议
AyomQAQ的博客
01-17 1177
Web组件可以通过W3C标准协议接口拉起摄像头和麦克风........
鸿蒙5.0开发进阶：Navigation页面跳转对象传递实现案例
HSMMQAQ的博客
10-25 674
本示例主要介绍在使用Navigation实现页面跳转时......
鸿蒙5.0版开发：UI界面-@ohos.promptAction (弹窗)
m0_69424697的博客
10-16 1413
创建并显示文本提示框、对话框和操作菜单。
ArkTS-自定义弹窗
qq_41154522的博客
11-30 2672
鸿蒙开发-自定义弹窗
HarmonyOS应用开发学习笔记 arkTS自定义弹窗（CustomDialog）简单使用 arkTS弹出框回调、监听
小木子102
01-11 3195
HarmonyOS应用开发学习笔记 arkTS自定义弹窗（CustomDialog）简单使用 arkTS弹出框回调、监听
自学鸿蒙HarmonyOS的ArkTS语言＜六＞警告弹窗AlertDialog和列表选择弹窗ActionSheet
hanchengmei的博客
07-11 755
1、这两种弹窗都没有找到设置标题内容居中的属性。2、警告弹窗按钮中间的线没有办法去掉。3、选择列表弹窗按钮只能一个。
HarmonyOS ArkTS 应用添加弹窗（八）
Chen_xiaobao的博客
11-22 4090
在我们日常使用应用的时候，可能会进行一些敏感的操作，比如删除联系人，这时候我们给应用添加弹窗来提示用户是否需要执行该操作，如下图所示：弹窗是一种模态窗口，通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前，用户无法操作其他界面内容。确认类：例如警告弹窗AlertDialog。选择类：包括文本选择弹窗TextPickerDialog 、日期滑动选择弹窗DatePickerDialog、时间滑动选择弹窗TimePickerDialog等。您可以根据业务场景，选择不同类型的弹窗。
鸿蒙API13开发【自定义弹窗 (CustomDialog)】ArkTS组件
鸿蒙的技术博客
02-08 1157
点击日期弹出日历选择器弹窗，可选择弹窗内任意日期。
鸿蒙OpenHarmony【列表选择弹窗 (ActionSheet)】弹窗
hhhhhh2323的博客
11-21 1054
定义列表弹窗并弹出。
Harmony 鸿蒙中类AlertDialog的CommonDialog使用
le0102的博客
06-11 1003
Harmony 鸿蒙中类AlertDialog的CommonDialog使用 new CommonDialog(getFractionAbility()) .setTitleText("标题") .setContentText("内容") .setButton(0, "取消", new IDialog.Clicked
警告弹窗AlertDialog
09-26
警告弹窗（AlertDialog）是Android平台上常见的一种用户界面组件，它通常用于显示提示信息、确认操作或让用户选择一个选项。Alert Dialog 提供了一种非模态的方式来与用户交互，也就是说，在显示警告框的同时，用户...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值