1# InterstitialDialogAction 2 3<!--Kit: ArkUI--> 4<!--Subsystem: ArkUI--> 5<!--Owner: @qq_36417014--> 6<!--Designer: @autojuan--> 7<!--Tester: @tinygreyy--> 8<!--Adviser: @zengyawen--> 9 10InterstitialDialogAction弹框在原子化服务中用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户点击弹框的不同区域可以触发相应的动作。 11 12> **说明：** 13> 14> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15 16## 导入模块 17 18``` 19import { InterstitialDialogAction, IconStyle, TitlePosition, BottomOffset } from '@kit.ArkUI'; 20``` 21 22## 子组件 23 24无 25 26## 属性 27 28不支持[通用属性](ts-component-general-attributes.md) 29 30## InterstitialDialogAction 31 32对自定义弹框进行封装，用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作。使用示例参见[示例](#示例)。 33 34### constructor 35 36constructor(dialogOptions: DialogOptions) 37 38InterstitialDialogAction的构造函数 39 40**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 41 42**系统能力：** SystemCapability.ArkUI.ArkUI.Full 43 44**参数**： 45 46| 参数名 | 类型 | 必填 | 说明 | 47| - | - | - | - | 48| dialogOptions | [DialogOptions](#dialogoptions)| 是 | 设置弹框特有的属性。 | 49 50### openDialog 51 52openDialog(): void 53 54打开弹框。 55 56**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 57 58**系统能力：** SystemCapability.ArkUI.ArkUI.Full 59 60### closeDialog 61 62closeDialog(): void 63 64关闭弹框。 65 66**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 67 68**系统能力：** SystemCapability.ArkUI.ArkUI.Full 69 70## DialogOptions 71 72**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76设置弹框特有的属性以及提供给用户自定义的点击触发动作。 77 78| 名称 | 类型 | 必填 | 说明 | 79| - | - | - | - | 80| uiContext | [UIContext](../arkts-apis-uicontext-uicontext.md) | 是 | UI上下文实例。 | 81| bottomOffsetType | [BottomOffset](#bottomoffset) | 否 | 弹框距离底部偏移类型。默认值为[BottomOffset](#bottomoffset).OFFSET_FOR_BAR。 | 82| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹框标题文本。默认为空字符串。 | 83| subtitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹框副标题文本。默认为空字符串。 | 84| titleColor | [ResourceStr](ts-types.md#resourcestr) \| [Color](ts-appendix-enums.md#color) | 否 | 弹框标题文本颜色。默认为$r('sys.color.ohos_id_color_text_primary_contrary')。 | 85| subtitleColor | [ResourceStr](ts-types.md#resourcestr) \| [Color](ts-appendix-enums.md#color) | 否 | 弹框副标题文本颜色。默认为$r('sys.color.ohos_id_color_text_secondary_contrary')。 | 86| backgroundImage | [Resource](ts-types.md#resource) | 否 | 弹框背景图片。默认为纯色背景，颜色值为#EBEEF5。 | 87| foregroundImage | [Resource](ts-types.md#resource) | 否 | 弹框前景图片。默认为空，即不显示前景图片。 | 88| iconStyle | [IconStyle](#iconstyle) | 否 | 关闭按钮图标的样式（亮调或者暗调）。<br>默认值：[IconStyle](#iconstyle).Light | 89| titlePosition | [TitlePosition](#titleposition) | 否 | 标题在弹框中的位置，在副标题的上方或者在副标题的下方。<br>默认值：[TitlePosition](#titleposition).Top | 90| onDialogClick | Callback\<void\> | 否 | 点击弹框任意位置后触发的用户自定义动作。默认为“执行关闭弹框的函数”，即仅关闭弹框。 | 91| onDialogClose | Callback\<void\> | 否 | 点击关闭按钮后触发的用户自定义动作。默认为“执行关闭弹框的函数”，即仅关闭弹框。 | 92 93## IconStyle 94 95**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99设置关闭按钮的色调样式，默认设置关闭按钮为亮色。 100 101| 名称 | 值 | 说明 | 102| - | - | - | 103| DARK | 0 | 设置关闭按钮为暗色调。 | 104| LIGHT | 1 | 设置关闭按钮为亮色调。<br>默认值。 | 105 106## TitlePosition 107 108**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 109 110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 111 112设置主副标题之间的上下相对位置，默认设置为主标题在副标题之上。 113 114| 名称 | 值 | 说明 | 115| - | - | - | 116| TOP | 0 | 设置主标题位于副标题之上。<br>默认值。 | 117| BOTTOM | 1 | 设置副标题位于主标题之上。 | 118 119## BottomOffset 120 121**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 122 123**系统能力：** SystemCapability.ArkUI.ArkUI.Full 124 125设置不同情景模式下弹框距离底部的距离，判断依据为是否存在菜单栏，默认显示为不存在菜单栏情况下的距离。 126 127| 名称 | 值 | 说明 | 128| - | - | - | 129| OFFSET_FOR_BAR | 0 | 存在菜单栏情况下与窗口底部的距离。<br>默认值，设置后弹框距离底部88vp。 | 130| OFFSET_FOR_NONE | 1 | 不存在菜单栏情况下与窗口底部的距离。<br>设置后弹框距离底部44vp。 | 131 132## 事件 133不支持[通用事件](ts-component-general-events.md) 134 135## 示例 136 137### 示例1 138 139为可选属性设置相应值，用两种不同参数类型分别为主标题、副标题设置颜色值，关闭按钮设置为暗色调， 140主副标题相对位置设置为主标题在副标题上方，底部距离类型设置为不存在菜单栏情况下的距离。 141 142<!--code_no_check--> 143```ts 144// ../entryability/EntryAbility 145import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 146import { hilog } from '@kit.PerformanceAnalysisKit'; 147import { window } from '@kit.ArkUI'; 148import { BusinessError } from '@kit.BasicServicesKit'; 149 150let dialogUIContext: UIContext | null = null; 151 152export function getDialogUIContext(): UIContext | null { 153 return dialogUIContext; 154} 155 156export default class EntryAbility extends UIAbility { 157 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 158 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 159 } 160 161 onDestroy(): void { 162 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 163 } 164 165 onWindowStageCreate(windowStage: window.WindowStage): void { 166 // Main window is created, set main page for this ability 167 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 168 169 windowStage.loadContent('pages/Index', (err) => { 170 if (err.code) { 171 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 172 return; 173 } 174 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 175 }); 176 177 let windowClass: window.Window | undefined = undefined; 178 windowStage.getMainWindow((err: BusinessError, data) => { 179 let errCode: number = err.code; 180 if (errCode) { 181 console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 182 return; 183 } 184 windowClass = data; 185 console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 186 dialogUIContext = windowClass.getUIContext(); 187 }) 188 189 //获取窗口 190 windowStage.getMainWindow((err, data) => { 191 if (err.code) { 192 console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 193 return; 194 } 195 windowClass = data; 196 console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 197 //设置窗口全屏 198 windowClass.setWindowLayoutFullScreen(false) 199 }) 200 } 201 202 onWindowStageDestroy(): void { 203 // Main window is destroyed, release UI related resources 204 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 205 } 206 207 onForeground(): void { 208 // Ability has brought to foreground 209 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 210 } 211 212 onBackground(): void { 213 // Ability has back to background 214 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 215 } 216} 217``` 218<!--code_no_check--> 219```ts 220// Index.ets 221import { getDialogUIContext } from '../entryability/EntryAbility'; 222import { UIContext, InterstitialDialogAction, IconStyle, TitlePosition, BottomOffset } from '@kit.ArkUI'; 223 224@Entry 225@Component 226struct Index { 227 build() { 228 Row() { 229 Column() { 230 Text("show dialog") 231 .fontSize(50) 232 .fontWeight(FontWeight.Bold) 233 .onClick(() => { 234 let ctx: UIContext | null = getDialogUIContext(); 235 let interstitialDialogAction: InterstitialDialogAction = new InterstitialDialogAction({ 236 uiContext: ctx as UIContext, 237 title: "主标题", 238 subtitle: "副标题", 239 titleColor: 'rgb(255, 192, 0)', 240 subtitleColor: Color.Red, 241 backgroundImage: $r('app.media.testBackgroundImg'), 242 foregroundImage: $r('app.media.testForegroundImg'), 243 iconStyle: IconStyle.DARK, 244 titlePosition: TitlePosition.TOP, 245 bottomOffsetType: BottomOffset.OFFSET_FOR_NONE, 246 onDialogClick: () => { console.log('outer dialog click action') }, 247 onDialogClose: () => { console.log('outer close action') } 248 }); 249 interstitialDialogAction.openDialog(); 250 }) 251 } 252 .width('100%') 253 } 254 .height('100%') 255 .backgroundColor('rgba(0, 0, 0, 0.1)') 256 } 257} 258``` 259 260 261 262### 示例2 263 264为可选属性设置相应值，用两种不同参数类型分别为主标题，副标题设置颜色值，关闭按钮设置为亮色调，主副标题相对位置设置为主标题在副标题下方，底部距离类型设置为存在菜单栏情况下的距离。 265 266<!--code_no_check--> 267```ts 268// ../entryability/EntryAbility 269import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 270import { hilog } from '@kit.PerformanceAnalysisKit'; 271import { window } from '@kit.ArkUI'; 272import { BusinessError } from '@kit.BasicServicesKit'; 273 274let dialogUIContext: UIContext | null = null; 275 276export function getDialogUIContext(): UIContext | null { 277 if (getDialogUIContext === null) { 278 hilog.info(0x0000, 'testTag', '%{public}s', 'getDialogUIContext is null'); 279 } 280 return dialogUIContext; 281} 282 283export default class EntryAbility extends UIAbility { 284 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 285 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 286 } 287 288 onDestroy(): void { 289 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 290 } 291 292 onWindowStageCreate(windowStage: window.WindowStage): void { 293 // Main window is created, set main page for this ability 294 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 295 296 windowStage.loadContent('pages/Index', (err) => { 297 if (err.code) { 298 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 299 return; 300 } 301 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 302 }); 303 304 let windowClass: window.Window | undefined = undefined; 305 windowStage.getMainWindow((err: BusinessError, data) => { 306 let errCode: number = err.code; 307 if (errCode) { 308 console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 309 return; 310 } 311 windowClass = data; 312 console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 313 dialogUIContext = windowClass.getUIContext(); 314 }) 315 316 //获取窗口 317 windowStage.getMainWindow((err, data) => { 318 if (err.code) { 319 console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 320 return; 321 } 322 windowClass = data; 323 console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 324 //设置窗口全屏 325 windowClass.setWindowLayoutFullScreen(false) 326 }) 327 } 328 329 onWindowStageDestroy(): void { 330 // Main window is destroyed, release UI related resources 331 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 332 } 333 334 onForeground(): void { 335 // Ability has brought to foreground 336 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 337 } 338 339 onBackground(): void { 340 // Ability has back to background 341 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 342 } 343} 344``` 345<!--code_no_check--> 346```ts 347// Index.ets 348import { getDialogUIContext } from '../entryability/EntryAbility'; 349import { UIContext, InterstitialDialogAction, IconStyle, TitlePosition, BottomOffset } from '@kit.ArkUI'; 350 351@Entry 352@Component 353struct Index { 354 build() { 355 Row() { 356 Column() { 357 Text("show dialog") 358 .fontSize(50) 359 .fontWeight(FontWeight.Bold) 360 .onClick(() => { 361 let ctx: UIContext | null = getDialogUIContext(); 362 let interstitialDialogAction: InterstitialDialogAction = new InterstitialDialogAction({ 363 uiContext: ctx as UIContext, 364 title: "主标题", 365 subtitle: "副标题", 366 titleColor: 'rgb(255, 192, 0)', 367 subtitleColor: Color.Red, 368 backgroundImage: $r('app.media.testBackgroundImg'), 369 foregroundImage: $r('app.media.testForegroundImg'), 370 iconStyle: IconStyle.LIGHT, 371 titlePosition: TitlePosition.BOTTOM, 372 bottomOffsetType: BottomOffset.OFFSET_FOR_BAR, 373 onDialogClick: () => { console.log('outer dialog click action') }, 374 onDialogClose: () => { console.log('outer close action') } 375 }); 376 interstitialDialogAction.openDialog(); 377 }) 378 } 379 .width('100%') 380 } 381 .height('100%') 382 .backgroundColor('rgba(0, 0, 0, 0.1)') 383 } 384} 385``` 386 387
