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