鸿蒙5.0版开发：ArkTS高级组件-@ohos.arkui.advanced.Dialog (弹出框)

于 2024-10-09 14:15:22 发布
阅读量373 收藏 13
点赞数 9
分类专栏： ArkUI ArkTS 鸿蒙5.0 文章标签： harmonyos 华为 android 鸿蒙 ArkTS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/142785473
版权
ArkUI 同时被 3 个专栏收录
114 篇文章 0 订阅
订阅专栏
鸿蒙5.0
114 篇文章 0 订阅
订阅专栏
ArkTS
110 篇文章 0 订阅
订阅专栏

往期鸿蒙全套实战文章必看：

@ohos.arkui.advanced.Dialog (弹出框)

弹出框是一种模态窗口，通常用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户在模态弹出框内完成上述交互任务。模态弹出框需要用户进行交互才能够退出模态模式。

说明：

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

导入模块

import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog, CustomContentDialog } from '@ohos.arkui.advanced.Dialog'

子组件

无

属性

不支持通用属性

TipsDialog

TipsDialog({controller: CustomDialogController, imageRes: Resource, imageSize?: SizeOptions, title?: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, checkAction?: (isChecked: boolean) => void, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions})

提示弹出框，即为带图形确认框，必要时可通过图形化方式展现确认框。

装饰器类型：@CustomDialog

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

参数：

名称参数类型必填装饰器类型说明
controllerCustomDialogController是-提示弹出框控制器。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
imageResResourceStr12+ | PixelMap12+是-展示的图片。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
imageSizeSizeOptions否-自定义图片尺寸。
默认值：64*64vp
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
titleResourceStr否-提示弹出框标题。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
contentResourceStr否-提示弹出框内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
checkTipsResourceStr否-checkbox的提示内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
isCheckedboolean否@Propvalue为true时，表示checkbox已选中，value为false时，表示未选中。
默认值：false
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
checkAction12+(isChecked: boolean) => void否-现推荐使用 onCheckedChange12+。
onCheckedChange12+Callback<boolean>否-checkbox的选中状态改变事件。
primaryButtonButtonOptions否-提示框左侧按钮。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
secondaryButtonButtonOptions否-提示框右侧按钮。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
theme12+Theme | CustomTheme否-主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

SelectDialog

SelectDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, selectedIndex?: number, confirm?: ButtonOptions, radioContent: Array<SheetInfo>})

选择类弹出框，弹框中以列表或网格的形式提供可选的内容。

装饰器类型：@CustomDialog

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

参数：

名称参数类型必填说明
controllerCustomDialogController是选择弹出框控制器。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
titleResourceStr是选择弹出框标题。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
contentResourceStr否选择弹出框内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
selectedIndexnumber否选择弹出框的选中项。
默认值：-1
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
confirmButtonOptions否选择弹出框底部按钮。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
radioContentArray<SheetInfo>是选择弹出框的子项内容列表，每个选择项支持设置文本和选中的回调事件。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
theme12+Theme | CustomTheme否主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

ConfirmDialog

ConfirmDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions})

信息确认类弹出框，操作未正确执行（如网络错误、电池电量过低），或未正确操作时（如指纹录入），反馈的错误或提示信息。

装饰器类型：@CustomDialog

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

参数：

名称参数类型必填装饰器类型说明
controllerCustomDialogController是-确认弹出框控制器。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
titleResourceStr是-确认弹出框标题。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
contentResourceStr否-确认弹出框内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
checkTipsResourceStr否-checkbox的提示内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
isCheckedboolean否@Propvalue为true时，表示checkbox已选中，value为false时，表示未选中。
默认值：false
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
onCheckedChange12+Callback<boolean>否-checkbox的选中状态改变事件。
primaryButtonButtonOptions否-确认框左侧按钮。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
secondaryButtonButtonOptions否-确认框右侧按钮。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
theme12+Theme| CustomTheme否-主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

AlertDialog

AlertDialog({controller: CustomDialogController, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, content: ResourceStr, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions})

操作确认类弹出框，触发一个将产生严重后果的不可逆操作时，如删除、重置、取消编辑、停止等。

装饰器类型：@CustomDialog

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

参数：

名称参数类型必填说明
controllerCustomDialogController是确认弹出框控制器。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
primaryTitle12+ResourceStr否确认框一级标题。
secondaryTitle12+ResourceStr否确认框二级标题。
contentResourceStr是确认弹出框内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
primaryButtonButtonOptions否确认框左侧按钮。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
secondaryButtonButtonOptions否确认框右侧按钮。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
theme12+Theme | CustomTheme否主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

LoadingDialog

LoadingDialog({controller: CustomDialogController, content?: ResourceStr})

进度加载类弹出框，操作正在执行时的提示信息。

装饰器类型：@CustomDialog

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

参数：

名称参数类型必填说明
controllerCustomDialogController是加载弹出框控制器。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
contentResourceStr否加载弹出框内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
theme12+Theme| CustomTheme否主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

CustomContentDialog12+

CustomContentDialog({controller: CustomDialogController, contentBuilder: () => void, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, contentAreaPadding?: Padding, buttons?: ButtonOptions[]})

自定义内容区弹出框，同时支持定义操作区按钮样式。

装饰器类型：@CustomDialog

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

参数：

名称参数类型必填说明
controllerCustomDialogController是弹出框控制器。
contentBuilder() => void是弹出框内容。
primaryTitleResourceStr否弹出框标题。
secondaryTitleResourceStr否弹出框辅助文本。
contentAreaPaddingPadding否弹出框内容区内边距。
buttonsArray<ButtonOptions>否弹出框操作区按钮，最多支持4个按钮。
theme12+Theme | CustomTheme否主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

ButtonOptions

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

名称类型必填说明
valueResourceStr是按钮的内容。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
action() => void否按钮的点击事件。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
backgroundResourceColor否按钮的背景。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
fontColorResourceColor否按钮的字体颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
buttonStyle12+ButtonStyleMode否按钮的样式。
默认值：2in1设备为ButtonStyleMode.NORMAL，其他设备为ButtonStyleMode.TEXTUAL。
role12+ButtonRole否按钮的角色。
默认值：ButtonRole.NORMAL。

说明：

buttonStyle和role优先级高于fontColor和background。如果buttonStyle和role设置的是默认值，那么fontColor和background可生效。

事件

不支持通用事件

示例

示例1

弹出上图下文弹出框。

import { TipsDialog } from '@ohos.arkui.advanced.Dialog'

@Entry
@Component
struct Index {
  isChecked = false;
  dialogControllerImage: CustomDialogController = new CustomDialogController({
    builder: TipsDialog({
      imageRes: $r('sys.media.ohos_ic_public_voice'),
      content: '想要卸载这个APP嘛?',
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('Callback when the first button is clicked')
        },
      },
      secondaryButton: {
        value: '删除',
        role: ButtonRole.ERROR,
        action: () => {
          console.info('Callback when the second button is clicked')
        }
      },
    }),
  })

  build() {
    Row() {
      Stack() {
        Column(){
          Button("上图下文弹出框")
            .width(96)
            .height(40)
            .onClick(() => {
              this.dialogControllerImage.open()
            })
        }.margin({bottom: 300})
      }.align(Alignment.Bottom)
      .width('100%').height('100%')
    }
    .backgroundImageSize({ width: '100%', height: '100%' })
    .height('100%')
  }
}

示例2

弹出纯列表弹出框。

import { SelectDialog } from '@ohos.arkui.advanced.Dialog'

@Entry
@Component
struct Index {
  radioIndex = 0;
  dialogControllerList: CustomDialogController = new CustomDialogController({
    builder: SelectDialog({
      title: '文本标题',
      selectedIndex: this.radioIndex,
      confirm: {
        value: '取消',
        action: () => {},
      },
      radioContent: [
        {
          title: '文本文本文本文本文本',
          action: () => {
            this.radioIndex = 0
          }
        },
        {
          title: '文本文本文本文本',
          action: () => {
            this.radioIndex = 1
          }
        },
        {
          title: '文本文本文本文本',
          action: () => {
            this.radioIndex = 2
          }
        },
      ]
    }),
  })

  build() {
    Row() {
      Stack() {
        Column() {
          Button("纯列表弹出框")
            .width(96)
            .height(40)
            .onClick(() => {
              this.dialogControllerList.open()
            })
        }.margin({ bottom: 300 })
      }.align(Alignment.Bottom)
      .width('100%').height('100%')
    }
    .backgroundImageSize({ width: '100%', height: '100%' })
    .height('100%')
  }
}

示例3

弹出文本+勾选弹出框。

import { ConfirmDialog } from '@ohos.arkui.advanced.Dialog'

@Entry
@Component
struct Index {
  isChecked = false;
  dialogControllerCheckBox: CustomDialogController = new CustomDialogController({
    builder: ConfirmDialog({
      title: '文本标题',
      content: '文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本',
      isChecked: this.isChecked,
      checkTips: '禁止后不再提示',
      primaryButton: {
        value: '禁止',
        action: () => {},
      },
      secondaryButton: {
        value: '允许',
        action: () => {
          this.isChecked = false
          console.info('Callback when the second button is clicked')
        }
      },
    }),
    autoCancel: true,
    customStyle: true,
    alignment: DialogAlignment.Bottom
  })

  build() {
    Row() {
      Stack() {
        Column(){
          Button("文本+勾选弹出框")
            .width(96)
            .height(40)
            .onClick(() => {
              this.dialogControllerCheckBox.open()
            })
        }.margin({bottom: 300})
      }.align(Alignment.Bottom)
      .width('100%').height('100%')
    }
    .backgroundImageSize({ width: '100%', height: '100%' })
    .height('100%')
  }
}

示例4

弹出纯文本弹出框。

import { AlertDialog } from '@ohos.arkui.advanced.Dialog'

@Entry
@Component
struct Index {
  dialogControllerConfirm: CustomDialogController = new CustomDialogController({
    builder: AlertDialog({
      primaryTitle: '弹框一级标题',
      secondaryTitle: '弹框二级标题',
      content: '文本文本文本文本文本',
      primaryButton: {
        value: '取消',
        action: () => {
        },
      },
      secondaryButton: {
        value: '确认',
        role: ButtonRole.ERROR,
        action: () => {
          console.info('Callback when the second button is clicked')
        }
      },
    }),
  })

  build() {
    Row() {
      Stack() {
        Column() {
          Button("纯文本弹出框")
            .width(96)
            .height(40)
            .onClick(() => {
              this.dialogControllerConfirm.open()
            })
        }.margin({ bottom: 300 })
      }.align(Alignment.Bottom)
      .width('100%').height('100%')
    }
    .backgroundImageSize({ width: '100%', height: '100%' })
    .height('100%')
  }
}

示例5

弹出进度条弹出框。

import { LoadingDialog } from '@ohos.arkui.advanced.Dialog'

@Entry
@Component
struct Index {
  dialogControllerProgress: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog({
      content: '文本文本文本文本文本...',
    }),
  })

  build() {
    Row() {
      Stack() {
        Column() {
          Button("进度条弹出框")
            .width(96)
            .height(40)
            .onClick(() => {
              this.dialogControllerProgress.open()
            })
        }.margin({ bottom: 300 })
      }.align(Alignment.Bottom)
      .width('100%').height('100%')
    }
    .backgroundImageSize({ width: '100%', height: '100%' })
    .height('100%')
  }
}

示例6

弹出主题风格弹框。

import { CustomColors, CustomTheme } from '@kit.ArkUI'
import { LoadingDialog } from '@ohos.arkui.advanced.Dialog';

class CustomThemeImpl implements CustomTheme {
  colors?: CustomColors;

  constructor(colors: CustomColors) {
    this.colors = colors;
  }
}

class CustomThemeColors implements CustomColors {
  fontPrimary = '#ffd0a300';
  iconSecondary = '#ffd000cd';
}

@Entry
@Component
struct Index {
  @State customTheme: CustomTheme = new CustomThemeImpl(new CustomThemeColors());
  dialogController: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog({
      content: 'text',
      theme: this.customTheme,
    })
  });

  build() {
    Row() {
      Stack() {
        Column() {
          Button('dialog')
            .width(96)
            .height(40)
            .onClick(() => {
              this.dialogController.open();
            })
        }.margin({ bottom: 300 })
      }.align(Alignment.Bottom)
      .width('100%').height('100%')
    }
    .backgroundImageSize({ width: '100%', height: '100%' })
    .height('100%')
  }
}

示例7

弹出支持自定义内容弹出框。

import { CustomContentDialog } from '@ohos.arkui.advanced.Dialog'

@Entry
@Component
struct Index {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomContentDialog({
      primaryTitle: '标题',
      secondaryTitle: '辅助文本',
      contentBuilder: () => {
        this.buildContent();
      },
      buttons: [{ value: '按钮1', buttonStyle: ButtonStyleMode.TEXTUAL, action: () => {
        console.info('Callback when the button is clicked')
      } }, { value: '按钮2', buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR }],
    }),
  });

  build() {
    Column() {
      Button("支持自定义内容弹出框")
        .onClick(() => {
          this.dialogController.open()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  buildContent(): void {
    Column() {
      Text('内容区')
    }
  }
}

星星不闪包退1
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值