警告弹窗

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

说明:

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

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

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

属性

名称 参数类型 参数描述
show AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions10+ 定义并显示AlertDialog组件。

AlertDialogParamWithConfirm对象说明

参数名 参数类型 必填 参数描述
title ResourceStr 弹窗标题。
subtitle10+ ResourceStr 弹窗副标题。
message ResourceStr 弹窗内容。
autoCancel boolean 点击遮障层时,是否关闭弹窗,true表示关闭弹窗。false表示不关闭弹窗。
默认值:true
confirm {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: DialogButtonStyle,
value: ResourceStr,
fontColor?: ResourceColor,
backgroundColor?:  ResourceColor,
action: () => void
}
确认Button的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。
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选中时的回调。
cancel () => void 点击遮障层关闭dialog时的回调。
alignment DialogAlignment 弹窗在竖直方向上的对齐方式。
默认值:DialogAlignment.Default
offset Offset 弹窗相对alignment所在位置的偏移量。
默认值:{ dx: 0 , dy: 0 }
gridCount number 弹窗容器宽度所占用栅格数。
默认值:4
maskRect10+ Rectangle 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。
默认值:{ x: 0, y: 0, width: '100%', height: '100%' }

AlertDialogParamWithButtons对象说明

参数名 参数类型 必填 参数描述
title ResourceStr 弹窗标题。
subtitle10+ ResourceStr 弹窗副标题。
message ResourceStr 弹窗内容。
autoCancel boolean 点击遮障层时,是否关闭弹窗。
默认值:true
primaryButton {
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选中时的回调。
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选中时的回调。
cancel () => void 点击遮障层关闭dialog时的回调。
alignment DialogAlignment 弹窗在竖直方向上的对齐方式。
默认值:DialogAlignment.Default
offset Offset 弹窗相对alignment所在位置的偏移量。
gridCount number 弹窗容器宽度所占用栅格数。
maskRect10+ Rectangle 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。
默认值:{ x: 0, y: 0, width: '100%', height: '100%' }

AlertDialogParamWithOptions10+对象说明

参数名 参数类型 必填 参数描述
title ResourceStr 弹窗标题。
subtitle10+ ResourceStr 弹窗子标题。
message ResourceStr 弹窗内容。
autoCancel boolean 点击遮障层时,是否关闭弹窗。
默认值:true
cancel () => void 点击遮障层关闭dialog时的回调。
alignment DialogAlignment 弹窗在竖直方向上的对齐方式。
默认值:DialogAlignment.Default
offset Offset 弹窗相对alignment所在位置的偏移量。
gridCount number 弹窗容器宽度所占用栅格数。
maskRect10+ Rectangle 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。
默认值:{ x: 0, y: 0, width: '100%', height: '100%' }
buttons10+ Array<AlertDialogButtonOptions> 弹窗容器中的多个按钮。
buttonDirection10+ DialogButtonDirection 按钮排布方向默认值为DialogButtonDirection.AUTO,建议3个以上按钮使用Auto模式(两个以上按钮会切换为纵向模式,通常能显示更多按钮),非Auto模式下,3个以上按钮可能会显示不全,超出显示范围的按钮会被截断。

AlertDialogButtonOptions10+对象说明

参数名 参数类型 必填 参数描述
enabled boolean 点击Button是否响应,默认值true。
defaultFocus boolean 设置Button是否是默认焦点,默认值false。
style DialogButtonStyle 设置Button的风格样式,默认值DialogButtonStyle.DEFAULT。
value ResourceStr Button的文本内容,若值为null,则该按钮不显示。
fontColor ResourceColor Button的文本颜色。
backgroundColor ResourceColor Button背景颜色。
action () => void Button选中时的回调。

DialogButtonDirection10+枚举说明

名称 描述
AUTO 两个及以下按钮水平排布,两个以上为竖直排布。
HORIZONTAL 按钮水平布局。
VERTICAL 按钮竖直布局。

confirm参数优先级:fontColor、backgroundColor > style > defaultFocus

backgroundColor fontColor style defaultFocus 效果
绿底 红字 - - 绿底红字
绿底 - DialogButtonStyle.HIGHLIGHT - 绿底白字
绿底 - DialogButtonStyle.DEFAULT - 绿底蓝字
绿底 - - TRUE 绿底白字
绿底 - - FALSE/- 绿底蓝字
- 红字 DialogButtonStyle.HIGHLIGHT - 蓝底红字
- 红字 DialogButtonStyle.DEFAULT - 白底红字
- 红字 - TRUE 蓝底红字
- 红字 - FALSE/- 白底红字
- - DialogButtonStyle.HIGHLIGHT - 蓝底白字
- - DialogButtonStyle.DEFAULT - 白底蓝字
- - - TRUE 蓝底白字
- - - FALSE/- 白底蓝字

DialogAlignment枚举说明

名称 描述
Top 垂直顶部对齐。
Center 垂直居中对齐。
Bottom 垂直底部对齐。
Default 默认对齐。
TopStart8+ 左上对齐。
TopEnd8+ 右上对齐。
CenterStart8+ 左中对齐。
CenterEnd8+ 右中对齐。
BottomStart8+ 左下对齐。
BottomEnd8+ 右下对齐。

Rectangle8+类型说明

Rectangle是各种Dialog中maskRect参数的类型。

名称 类型 必填 描述
x Length 弹窗遮蔽层区域相对于窗口左上角的x轴坐标。
默认值:0vp
y Length 弹窗遮蔽层区域相对于窗口左上角的y轴坐标。
默认值:0vp
width Length 弹窗遮蔽层区域的宽度。
默认值:'100%'
height Length 弹窗遮蔽层区域的高度。
默认值:'100%'

说明:

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

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

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

DialogButtonStyle10+枚举说明

名称 描述
DEFAULT 白底蓝字(深色主题:白底=黑底)。
HIGHLIGHT 蓝底白字。

示例

// xxx.ets
@Entry
@Component
struct AlertDialogExample {
  build() {
    Column({ space: 5 }) {
      Button('one button dialog')
        .onClick(() => {
          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')
              }
            }
          )
        })
        .backgroundColor(0x317aff)
      Button('two button dialog')
        .onClick(() => {
          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')
              }
            }
          )
        }).backgroundColor(0x317aff)
        Button('three button dialog')
        .onClick(() => {
          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')
              }
            }
          )
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

zh-cn_image_alert