1# DialogV2 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @fengluochenai--> 5<!--Designer: @YanSanzo--> 6<!--Tester: @tinygreyy--> 7<!--Adviser: @HelloCrease--> 8 9 10弹出框是一种模态窗口，通常用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户在模态弹出框内完成上述交互任务。模态弹出框需要用户进行交互才能够退出模态模式。 11 12该组件基于[状态管理V2](../../../ui/state-management/arkts-state-management-overview.md#状态管理v2)实现，相较于[状态管理V1](../../../ui/state-management/arkts-state-management-overview.md#状态管理v1)，状态管理V2增强了对数据对象的深度观察与管理能力，不再局限于组件层级。借助状态管理V2，开发者可以通过该组件更灵活地控制弹出框的数据和状态，实现更高效的用户界面刷新。 13 14> **说明：** 15> 16> 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 17> 18> 该组件不支持在Wearable设备上使用。 19 20## 导入模块 21 22 import { TipsDialogV2, SelectDialogV2, ConfirmDialogV2, AlertDialogV2, LoadingDialogV2, CustomContentDialogV2, PopoverDialogV2 } from '@kit.ArkUI'; 23 24## 子组件 25 26无 27 28## TipsDialogV2 29 30TipsDialogV2({imageRes: ResourceStr | PixelMap, imageSize?: SizeOptions, imageBorderColor: ColorMetrics, imageBorderWidth: LengthMetrics, title?: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, checked?: boolean, onCheckedChange?: AdvancedDialogV2OnCheckedChange, primaryButton?: AdvancedDialogV2Button, secondaryButton?: AdvancedDialogV2Button}) 31 32提示弹出框，即为带图形确认弹出框，必要时可通过图形化方式展现确认弹出框。 33 34**装饰器类型：**@ComponentV2 35 36**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 37 38**系统能力：** SystemCapability.ArkUI.ArkUI.Full 39 40| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 41|------------------|-------------------------------------------------------------------------------------------------------|----|----------------------|-----------------------------------------------------------------| 42| imageRes | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | @Param<br />@Require | 展示的图片。 | 43| imageSize | [SizeOptions](ts-types.md#sizeoptions) | 否 | @Param | 自定义图片尺寸。<br />默认值：64\*64vp | 44| imageBorderColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 图片描边颜色。<br/>默认值：Color.Black | 45| imageBorderWidth | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 图片描边宽度。<br/>默认无描边效果。 | 46| title | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 提示弹出框标题。<br />默认不显示。<br/> **说明：** 标题超过两行会显示“...”。 | 47| content | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 提示弹出框内容。<br />默认不显示。 | 48| checkTips | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 选择框的提示内容。<br />默认不显示。 | 49| checked | boolean | 否 | @Param | checked为true时，表示选择框已选中。checked为false时，表示选择框未选中。<br />默认值：false | 50| onCheckedChange | [AdvancedDialogV2OnCheckedChange](#advanceddialogv2oncheckedchange) | 否 | @Param | 选择框的选中状态改变事件。<br />默认无事件。 | 51| primaryButton | [AdvancedDialogV2Button](#advanceddialogv2button) | 否 | @Param | 提示弹出框左侧按钮。<br />默认不显示。 | 52| secondaryButton | [AdvancedDialogV2Button](#advanceddialogv2button) | 否 | @Param | 提示弹出框右侧按钮。<br />默认不显示。 | 53 54## AdvancedDialogV2OnCheckedChange 55 56type AdvancedDialogV2OnCheckedChange = (checked: boolean) => void 57 58选择框选中状态改变事件。 59 60**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 61 62**系统能力：** SystemCapability.ArkUI.ArkUI.Full 63 64**参数：** 65 66| 参数名 | 类型 | 必填 | 说明 | 67| :------ |:--------| :- | :-------------------------------------------------- | 68| checked | boolean | 是 | 表示选择框选中状态。<br />checked为true时，表示选择框已选中。checked为false时，表示选择框未选中。 | 69 70## SelectDialogV2 71 72SelectDialogV2({title: ResourceStr, content?: ResourceStr, selectedIndex?: number, confirm?: AdvancedDialogV2Button, radioContent: SheetInfo\[]}) 73 74选择类弹出框，弹框中以列表或网格的形式提供可选的内容。 75 76**装饰器类型：**@ComponentV2 77 78**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 83| ------------- | -------------------------------------------------------- | -- |---------------------|---------------------------------------------------------------------------------| 84| title | [ResourceStr](ts-types.md#resourcestr) | 是 | @Param<br/>@Require | 选择弹出框标题。<br/> **说明：** 标题超过两行会显示“...”。 | 85| content | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 选择弹出框内容。默认不显示。 | 86| selectedIndex | number | 否 | @Param | 选择弹出框的选中项。<br />默认值：-1，没有选中项。若设置数值不在取值范围，按没有选中项处理。 <br/>取值范围：小于选择弹出框的子项内容列表长度。 | 87| confirm | [AdvancedDialogV2Button](#advanceddialogv2button) | 否 | @Param | 选择弹出框底部按钮。<br />默认不显示。 | 88| radioContent | [SheetInfo](ts-methods-action-sheet.md#sheetinfo对象说明)\[] | 是 | @Param<br/>@Require | 选择弹出框的子项内容列表，每个选择项支持设置文本和选中的回调事件。 | 89 90## ConfirmDialogV2 91 92ConfirmDialogV2({title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, checked?: boolean, onCheckedChange: AdvancedDialogV2OnCheckedChange, primaryButton?: AdvancedDialogV2Button, secondaryButton?: AdvancedDialogV2Button}) 93 94信息确认类弹出框，操作未正确执行（如网络错误、电池电量过低），或未正确操作时（如指纹录入），反馈的错误或提示信息。 95 96**装饰器类型：**@ComponentV2 97 98**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 99 100**系统能力：** SystemCapability.ArkUI.ArkUI.Full 101 102| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 103|-----------------| ------------------------------------------------------------------- | -- | ------ |------------------------------------------------------------| 104| title | [ResourceStr](ts-types.md#resourcestr) | 是 | @Param<br/>@Require | 确认弹出框标题。<br/> **说明：** 标题超过两行会显示“...”。 | 105| content | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 确认弹出框内容。<br />默认不显示。 | 106| checkTips | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | checkbox的提示内容。<br />默认不显示。 | 107| checked | boolean | 否 | @Param | checked为true时，表示checkbox已选中，为false时，表示未选中。<br />默认值：false | 108| onCheckedChange | [AdvancedDialogV2OnCheckedChange](#advanceddialogv2oncheckedchange) | 否 | @Param | checkbox的选中状态改变事件。<br />默认无事件。 | 109| primaryButton | [AdvancedDialogV2Button](#advanceddialogv2button) | 否 | @Param | 确认弹出框左侧按钮。<br />默认不显示。 | 110| secondaryButton | [AdvancedDialogV2Button](#advanceddialogv2button) | 否 | @Param | 确认弹出框右侧按钮。<br />默认不显示。 | 111 112## AlertDialogV2 113 114AlertDialogV2({primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, content: ResourceStr, primaryButton?: AdvancedDialogV2Button, secondaryButton?: AdvancedDialogV2Button}) 115 116操作确认类弹出框。当触发一个将产生严重后果的不可逆操作时，如删除、重置、取消编辑、停止等，会触发该类弹出框提示。 117 118**装饰器类型：**@ComponentV2 119 120**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 121 122**系统能力：** SystemCapability.ArkUI.ArkUI.Full 123 124| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 125| --------------- | ------------------------------------------------- | -- | :------------------- | -------------------- | 126| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 确认弹出框一级标题。<br />默认不显示。<br/>**说明：** 标题超过两行会显示“...”。 | 127| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 确认弹出框二级标题。<br />默认不显示。<br/>**说明：** 标题超过两行会显示“...”。 | 128| content | [ResourceStr](ts-types.md#resourcestr) | 是 | @Param<br />@Require | 确认弹出框内容。<br /> | 129| primaryButton | [AdvancedDialogV2Button](#advanceddialogv2button) | 否 | @Param | 确认弹出框左侧按钮。<br />默认不显示。 | 130| secondaryButton | [AdvancedDialogV2Button](#advanceddialogv2button) | 否 | @Param | 确认弹出框右侧按钮。<br />默认不显示。 | 131 132## LoadingDialogV2 133 134LoadingDialogV2({content?: ResourceStr}) 135 136进度加载类弹出框，操作正在执行时的提示信息。 137 138**装饰器类型：**@ComponentV2 139 140**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 141 142**系统能力：** SystemCapability.ArkUI.ArkUI.Full 143 144| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 145| ------- | -------------------------------------- | -- | :----- |--------------------------------------------------| 146| content | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 加载弹出框内容。<br />默认为空。<br/> **说明：** 内容超过十行会显示“...”。 | 147 148## CustomContentDialogV2 149 150CustomContentDialogV2({contentBuilder: () => void, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, contentAreaPadding?: LocalizedPadding, buttons?: AdvancedDialogV2Button\[]}) 151 152自定义内容区弹出框，同时支持定义操作区按钮样式。 153 154**装饰器类型：**@ComponentV2 155 156**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 161| ------------------ | ---------------------------------------------------- | -- | ------------- | ------------------------ | 162| contentBuilder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | @BuilderParam | 弹出框内容。 | 163| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 弹出框标题。<br />默认不显示。<br/>**说明：** 标题超过两行会显示“...”。 | 164| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | @Param | 弹出框辅助文本。<br />默认不显示。<br/> **说明：** 辅助文本超过两行会显示“...”。 | 165| contentAreaPadding | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | @Param | 弹出框内容区内边距。<br />默认不显示。 | 166| buttons | [AdvancedDialogV2Button](#advanceddialogv2button)\[] | 否 | @Param | 弹出框操作区按钮，最多支持4个按钮。<br />默认不显示。 | 167 168## PopoverDialogV2OnVisibleChange 169 170type PopoverDialogV2OnVisibleChange = (visible: boolean) => void 171 172跟手弹出框显示状态改变事件。 173 174**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 175 176**系统能力：** SystemCapability.ArkUI.ArkUI.Full 177 178**参数：** 179 180| 参数名 | 类型 | 必填 | 说明 | 181| :------ | :------ | :- |:----------------------------------------------------------------------| 182| visible | boolean | 是 | 表示跟手弹出框显示状态。<br />值为true时跟手弹出框显示，为false时隐藏。 | 183 184## PopoverDialogV2 185 186PopoverDialogV2({visible: boolean, \$visible: PopoverDialogV2OnVisibleChange, popover: PopoverDialogV2Options, targetBuilder: CustomBuilder}) 187 188跟手弹出框，基于目标组件位置弹出，上文中的TipsDialogV2、SelectDialogV2、ConfirmDialogV2、AlertDialogV2、LoadingDialogV2、CustomContentDialogV2都可作为弹出框内容。 189 190**装饰器类型：**@ComponentV2 191 192**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 193 194**系统能力：** SystemCapability.ArkUI.ArkUI.Full 195 196| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 197| ------------- |-------------------------------------------------------------------| -- |---------------------| -------------------------------------------------- | 198| visible | boolean | 是 | @Param<br/>@Require | 跟手弹出框显示状态。<br />值为true时跟手弹出框显示，为false时隐藏。 | 199| \$visible | [PopoverDialogV2OnVisibleChange](#popoverdialogv2onvisiblechange) | 否 | @Event | 修改跟手弹出框显示状态时触发的回调函数，建议在visible后使用!!语法设置双向同步。<br />默认无事件。 | 200| popover | [PopoverDialogV2Options](#popoverdialogv2options) | 是 | @Param<br/>@Require | 配置跟手弹出框的参数。 | 201| targetBuilder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | @BuilderParam | 跟手弹出框基于的目标组件。 | 202 203## PopoverDialogV2Options 204 205跟手弹出框参数，用于设置弹出框内容、位置属性等。 206 207继承自[CustomPopupOptions](../arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8类型说明)。 208 209> **说明：** 210> 211> radius默认值为32vp。 212 213**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Full 216 217## AdvancedDialogV2ButtonAction 218 219type AdvancedDialogV2ButtonAction = () => void 220 221跟手弹出框显示状态改变事件。 222 223**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227## AdvancedDialogV2Button 228 229弹出框操作区按钮。 230 231**装饰器类型：**@ObservedV2 232 233**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 238|:-------------|:-----------------------------------------------------------------------|:---|:-------|:----------------------------------------------------------------------------| 239| content | [ResourceStr](ts-types.md#resourcestr) | 是 | @Trace | 按钮的内容。 | 240| action | [AdvancedDialogV2ButtonAction](#advanceddialogv2buttonaction) | 否 | @Trace | 按钮的点击事件。<br />默认无事件。 | 241| background | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Trace | 按钮的背景。<br />默认值跟随buttonStyle。 | 242| fontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Trace | 按钮的字体颜色。<br />默认值跟随buttonStyle。 | 243| buttonStyle | [ButtonStyleMode](ts-basic-components-button.md#buttonstylemode11枚举说明) | 否 | @Trace | 按钮的样式。<br />默认值：2in1设备为ButtonStyleMode.NORMAL，其他设备为ButtonStyleMode.TEXTUAL。 | 244| role | [ButtonRole](ts-basic-components-button.md#buttonrole12枚举说明) | 否 | @Trace | 按钮的角色。<br />默认值：ButtonRole.NORMAL | 245| defaultFocus | boolean | 否 | @Trace | 是否为默认焦点。<br/>true：按钮是默认焦点。<br/>false：按钮不是默认焦点。<br />默认值：false | 246| enabled | boolean | 否 | @Trace | 是否可用。<br/>true：按钮可用。<br/>false：按钮不可用。<br />默认值：true | 247 248> **说明：** 249> 250> buttonStyle和role优先级高于fontColor和background。如果buttonStyle和role设置的是默认值，那么fontColor和background可生效。 251> 252> 若同时给多个按钮设置defaultFocus，那么默认焦点为设置defaultFocus按钮显示顺序的第一个。 253 254### constructor 255 256constructor(options: AdvancedDialogV2ButtonOptions) 257 258AdvancedDialogV2Button的构造函数。 259 260**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 261 262**系统能力：** SystemCapability.ArkUI.ArkUI.Full 263 264**参数：** 265 266| 参数名 | 类型 | 必填 | 说明 | 267|:--------| :-------------------------------------------------------------- | :- | :------ | 268| options | [AdvancedDialogV2ButtonOptions](#advanceddialogv2buttonoptions) | 是 | 按钮配置信息。 | 269 270## AdvancedDialogV2ButtonOptions 271 272用于初始化AdvancedDialogV2Button对象。 273 274**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 275 276**系统能力：** SystemCapability.ArkUI.ArkUI.Full 277 278| 名称 | 类型 | 必填 | 说明 | 279|:-------------|:-----------------------------------------------------------------------|:---|:----------------------------------------------------------------------------| 280| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮的内容。 | 281| action | [AdvancedDialogV2ButtonAction](#advanceddialogv2buttonaction) | 否 | 按钮的点击事件。<br />默认无事件。 | 282| background | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 按钮的背景。<br /> 默认值跟随buttonStyle。 | 283| fontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 按钮的字体颜色。<br />默认值跟随buttonStyle。 | 284| buttonStyle | [ButtonStyleMode](ts-basic-components-button.md#buttonstylemode11枚举说明) | 否 | 按钮的样式。<br />默认值：2in1设备为ButtonStyleMode.NORMAL，其他设备为ButtonStyleMode.TEXTUAL。 | 285| role | [ButtonRole](ts-basic-components-button.md#buttonrole12枚举说明) | 否 | 按钮的角色。<br />默认值：ButtonRole.NORMAL | 286| defaultFocus | boolean | 否 | 是否为默认焦点。<br/>true：按钮是默认焦点。<br/>false：按钮不是默认焦点。<br />默认值：false | 287| enabled | boolean | 否 | 是否可用。<br/>true：按钮可用。<br/>false：按钮不可用。<br />默认值：true | 288 289## 示例 290 291### 示例1（上图下文弹出框） 292 293上图下文弹出框，包含imageRes、content等内容。 294 295```ts 296import { TipsDialogV2, AdvancedDialogV2Button, UIContext } from '@kit.ArkUI'; 297 298@Entry 299@ComponentV2 300struct Index { 301 @Local checked: boolean = false; 302 303 @Builder 304 dialogBuilder(): void { 305 TipsDialogV2({ 306 imageRes: $r('sys.media.ohos_ic_public_voice'), 307 content: '想要卸载这个APP嘛?', 308 title: 'TipsDialogV2', 309 checkTips: '不再提示', 310 checked: this.checked, 311 primaryButton: new AdvancedDialogV2Button({ 312 content: '取消', 313 action: () => { 314 console.info('Callback when the first button is clicked'); 315 }, 316 }), 317 secondaryButton: new AdvancedDialogV2Button({ 318 content: '删除', 319 role: ButtonRole.ERROR, 320 action: () => { 321 console.info('Callback when the second button is clicked'); 322 } 323 }), 324 onCheckedChange: (checked: boolean) => { 325 console.info('Callback when the checkbox is clicked'); 326 this.checked = checked; 327 } 328 }) 329 } 330 331 build() { 332 Row() { 333 Stack() { 334 Column() { 335 Button("打开TipsDialogV2弹出框") 336 .width(96) 337 .height(40) 338 .onClick(() => { 339 let uiContext: UIContext = this.getUIContext(); 340 uiContext.getPromptAction().openCustomDialog({ 341 builder: () => { 342 this.dialogBuilder(); 343 }, 344 }); 345 }) 346 }.margin({ bottom: 300 }) 347 }.align(Alignment.Bottom) 348 .width('100%').height('100%') 349 } 350 .backgroundImageSize({ width: '100%', height: '100%' }) 351 .height('100%') 352 } 353} 354``` 355 356 357 358### 示例2（纯列表弹出框） 359 360纯列表弹出框，包含selectedIndex、radioContent等内容。 361 362```ts 363import { SelectDialogV2, AdvancedDialogV2Button ,UIContext } from '@kit.ArkUI'; 364 365@Entry 366@ComponentV2 367struct Index { 368 @Local radioIndex: number = 0; 369 @Builder 370 dialogBuilder(): void { 371 SelectDialogV2({ 372 title: '文本标题', 373 selectedIndex: this.radioIndex, 374 confirm: new AdvancedDialogV2Button({ 375 content: '取消', 376 action: () => {}, 377 }), 378 radioContent: [ 379 { 380 title: '文本文本文本文本文本', 381 action: () => { 382 this.radioIndex = 0 383 } 384 }, 385 { 386 title: '文本文本文本文本', 387 action: () => { 388 this.radioIndex = 1 389 } 390 }, 391 { 392 title: '文本文本文本文本', 393 action: () => { 394 this.radioIndex = 2 395 } 396 }, 397 ] 398 }) 399 } 400 build() { 401 Row() { 402 Stack() { 403 Column() { 404 Button("纯列表弹出框") 405 .width(96) 406 .height(40) 407 .onClick(() => { 408 let uiContext: UIContext = this.getUIContext(); 409 uiContext.getPromptAction().openCustomDialog({ 410 builder: () => { 411 this.dialogBuilder(); 412 } 413 }) 414 }) 415 }.margin({ bottom: 300 }) 416 }.align(Alignment.Bottom) 417 .width('100%').height('100%') 418 } 419 .backgroundImageSize({ width: '100%', height: '100%' }) 420 .height('100%') 421 } 422} 423``` 424 425 426 427### 示例3（文本与勾选弹出框） 428 429文本与勾选弹出框，包含content、checkTips等内容。 430 431```ts 432import { ConfirmDialogV2, AdvancedDialogV2Button, UIContext } from '@kit.ArkUI'; 433 434@Entry 435@ComponentV2 436struct Index { 437 @Local checked: boolean = false; 438 439 @Builder 440 dialogBuilder(): void { 441 ConfirmDialogV2({ 442 title: '文本标题', 443 content: '文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本', 444 checked: this.checked, 445 checkTips: '禁止后不再提示', 446 primaryButton: new AdvancedDialogV2Button({ 447 content: '禁止', 448 action: () => { 449 console.info('Callback when the primary button is clicked'); 450 }, 451 }), 452 secondaryButton: new AdvancedDialogV2Button({ 453 content: '允许', 454 action: () => { 455 this.checked = false 456 console.info('Callback when the second button is clicked'); 457 } 458 }), 459 onCheckedChange: (checked: boolean) => { 460 console.info('Callback when the checkbox is clicked'); 461 this.checked = checked; 462 }, 463 }) 464 } 465 466 build() { 467 Row() { 468 Stack() { 469 Column() { 470 Button("打开ConfirmDialogV2弹出框") 471 .width(96) 472 .height(40) 473 .onClick(() => { 474 let uiContext: UIContext = this.getUIContext(); 475 uiContext.getPromptAction().openCustomDialog({ 476 builder: () => { 477 this.dialogBuilder(); 478 }, 479 alignment: DialogAlignment.Bottom 480 }); 481 }) 482 }.margin({ bottom: 300 }) 483 }.align(Alignment.Bottom) 484 .width('100%').height('100%') 485 } 486 .backgroundImageSize({ width: '100%', height: '100%' }) 487 .height('100%') 488 } 489} 490``` 491 492 493 494### 示例4（纯文本弹出框） 495 496纯文本弹出框，包含primaryTitle、secondaryTitle、content等内容。 497 498```ts 499import { AlertDialogV2, AdvancedDialogV2Button, UIContext } from '@kit.ArkUI'; 500 501@Entry 502@ComponentV2 503struct Index { 504 @Builder 505 dialogBuilder(): void { 506 AlertDialogV2({ 507 primaryTitle: '弹框一级标题', 508 secondaryTitle: '弹框二级标题', 509 content: '文本文本文本文本文本', 510 primaryButton: new AdvancedDialogV2Button({ 511 content: '取消', 512 action: () => { 513 console.info('Callback when the primary button is clicked'); 514 }, 515 }), 516 secondaryButton: new AdvancedDialogV2Button({ 517 content: '确认', 518 role: ButtonRole.ERROR, 519 action: () => { 520 console.info('Callback when the second button is clicked'); 521 } 522 }), 523 }) 524 } 525 526 build() { 527 Row() { 528 Stack() { 529 Column() { 530 Button("打开AlertDialogV2弹出框") 531 .width(96) 532 .height(40) 533 .onClick(() => { 534 let uiContext: UIContext = this.getUIContext(); 535 uiContext.getPromptAction().openCustomDialog({ 536 builder: () => { 537 this.dialogBuilder(); 538 } 539 }); 540 }) 541 }.margin({ bottom: 300 }) 542 }.align(Alignment.Bottom) 543 .width('100%').height('100%') 544 } 545 .backgroundImageSize({ width: '100%', height: '100%' }) 546 .height('100%') 547 } 548} 549``` 550 551 552 553### 示例5（进度加载类弹出框） 554 555进度加载类弹出框，包含content等内容。 556 557```ts 558import { LoadingDialogV2, UIContext } from '@kit.ArkUI'; 559 560@Entry 561@ComponentV2 562struct Index { 563 @Builder 564 dialogBuilder(): void { 565 LoadingDialogV2({ 566 content: '文本文本文本文本文本...', 567 }) 568 } 569 570 build() { 571 Row() { 572 Stack() { 573 Column() { 574 Button("打开LoadingDialogV2弹出框") 575 .width(96) 576 .height(40) 577 .onClick(() => { 578 let uiContext: UIContext = this.getUIContext(); 579 uiContext.getPromptAction().openCustomDialog({ 580 builder: () => { 581 this.dialogBuilder(); 582 } 583 }); 584 }) 585 }.margin({ bottom: 300 }) 586 }.align(Alignment.Bottom) 587 .width('100%').height('100%') 588 } 589 .backgroundImageSize({ width: '100%', height: '100%' }) 590 .height('100%') 591 } 592} 593``` 594 595 596 597### 示例6（自定义主题风格弹出框） 598 599自定义主题风格弹出框，包含content、theme等内容。 600 601```ts 602import { CustomColors, CustomTheme, LoadingDialogV2, UIContext } from '@kit.ArkUI'; 603 604class CustomThemeImpl implements CustomTheme { 605 colors?: CustomColors; 606 607 constructor(colors: CustomColors) { 608 this.colors = colors; 609 } 610} 611 612class CustomThemeColors implements CustomColors { 613 fontPrimary = '#ffd0a300'; 614 iconSecondary = '#ffd000cd'; 615} 616 617@Entry 618@ComponentV2 619struct Index { 620 @Builder 621 dialogBuilder(): void { 622 WithTheme({ theme: new CustomThemeImpl(new CustomThemeColors()) }) { 623 LoadingDialogV2({ 624 content: '文本文本文本文本文本...', 625 }) 626 } 627 } 628 629 build() { 630 Row() { 631 Stack() { 632 Column() { 633 Button("打开LoadingDialogV2弹出框") 634 .width(96) 635 .height(40) 636 .onClick(() => { 637 let uiContext: UIContext = this.getUIContext(); 638 uiContext.getPromptAction().openCustomDialog({ 639 builder: () => { 640 this.dialogBuilder(); 641 } 642 }); 643 }) 644 }.margin({ bottom: 300 }) 645 }.align(Alignment.Bottom) 646 .width('100%').height('100%') 647 } 648 .backgroundImageSize({ width: '100%', height: '100%' }) 649 .height('100%') 650 } 651} 652``` 653 654 655 656### 示例7（自定义内容弹出框） 657 658支持自定义内容弹出框，包含contentBuilder、buttons等内容。 659 660```ts 661import { CustomContentDialogV2, AdvancedDialogV2Button, UIContext } from '@kit.ArkUI'; 662 663@Entry 664@ComponentV2 665struct Index { 666 @Builder 667 dialogBuilder(): void { 668 CustomContentDialogV2({ 669 primaryTitle: '标题', 670 secondaryTitle: '辅助文本', 671 contentBuilder: () => { 672 this.buildContent(); 673 }, 674 buttons: [ 675 new AdvancedDialogV2Button({ 676 content: '按钮1', buttonStyle: ButtonStyleMode.TEXTUAL, 677 action: () => { 678 console.info('Callback when the button is clicked'); 679 } 680 }), 681 new AdvancedDialogV2Button({ 682 content: '按钮2', buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR, 683 }) 684 ], 685 }) 686 } 687 688 build() { 689 Column() { 690 Button("打开CustomContentDialogV2弹出框") 691 .onClick(() => { 692 let uiContext: UIContext = this.getUIContext(); 693 uiContext.getPromptAction().openCustomDialog({ 694 builder: () => { 695 this.dialogBuilder(); 696 } 697 }) 698 }) 699 } 700 .width('100%') 701 .height('100%') 702 .justifyContent(FlexAlign.Center) 703 } 704 705 @Builder 706 buildContent(): void { 707 Column() { 708 Text('内容区') 709 } 710 } 711} 712``` 713 714 715 716### 示例8（跟手弹出框） 717 718跟手弹出框（警告弹出框为例），包含visible、popover、targetBuilder等内容。 719 720```ts 721import { AlertDialogV2, PopoverDialogV2, PopoverDialogV2Options, AdvancedDialogV2Button} from '@kit.ArkUI'; 722 723@Entry 724@ComponentV2 725struct Index { 726 @Local isShow: boolean = false; 727 @Local popoverOptions: PopoverDialogV2Options = { 728 builder: () => { 729 this.dialogBuilder(); 730 } 731 } 732 733 @Builder dialogBuilder() { 734 AlertDialogV2({ 735 content: '跟手弹出框', 736 primaryButton: new AdvancedDialogV2Button({ 737 content: '取消', 738 action: () => { 739 this.isShow = false; 740 }, 741 }), 742 secondaryButton: new AdvancedDialogV2Button({ 743 content: '确认', 744 action: () => { 745 this.isShow = false; 746 }, 747 }), 748 }); 749 } 750 751 @Builder buttonBuilder() { 752 Button('跟手弹出框目标组件').onClick(() => { 753 this.isShow = true; 754 }); 755 } 756 757 build() { 758 Column() { 759 PopoverDialogV2({ 760 visible: this.isShow!!, 761 popover: this.popoverOptions, 762 targetBuilder: () => { 763 this.buttonBuilder(); 764 }, 765 }) 766 } 767 } 768} 769``` 770 771 772
