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