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-universal-attributes-size.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) | 是 | 弹框距离底部偏移类型 | 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) | 否 | 弹框标题文本颜色。 | 78| subtitleColor | [ResourceStr](ts-types.md#resourcestr) \| [Color](ts-appendix-enums.md#color) | 否 | 弹框副标题文本颜色。 | 79| backgroundImage | [Resource](ts-types.md#resource) | 否 | 弹框背景图片。 | 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-universal-events-click.md) 127 128## 示例 129 130### 示例1 131 132为可选属性设置相应值，用两种不同参数类型分别为主标题、副标题设置颜色值，关闭按钮设置为暗色调， 133主副标题相对位置设置为主标题在副标题上方，底部距离类型设置为不存在菜单栏情况下的距离。 134 135```ts 136// ../entryability/EntryAbility 137import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 138import { hilog } from '@kit.PerformanceAnalysisKit'; 139import { window } from '@kit.ArkUI'; 140import { BusinessError } from '@kit.BasicServicesKit'; 141 142let dialogUIContext: UIContext | null = null; 143 144export function getDialogUIContext(): UIContext | null { 145 return dialogUIContext; 146} 147 148export default class EntryAbility extends UIAbility { 149 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 150 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 151 } 152 153 onDestroy(): void { 154 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 155 } 156 157 onWindowStageCreate(windowStage: window.WindowStage): void { 158 // Main window is created, set main page for this ability 159 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 160 161 windowStage.loadContent('pages/Index', (err) => { 162 if (err.code) { 163 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 164 return; 165 } 166 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 167 }); 168 169 let windowClass: window.Window | undefined = undefined; 170 windowStage.getMainWindow((err: BusinessError, data) => { 171 let errCode: number = err.code; 172 if (errCode) { 173 console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 174 return; 175 } 176 windowClass = data; 177 console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 178 dialogUIContext = windowClass.getUIContext(); 179 }) 180 181 //获取窗口 182 windowStage.getMainWindow((err, data) => { 183 if (err.code) { 184 console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 185 return; 186 } 187 windowClass = data; 188 console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 189 //设置窗口全屏 190 windowClass.setWindowLayoutFullScreen(false) 191 }) 192 } 193 194 onWindowStageDestroy(): void { 195 // Main window is destroyed, release UI related resources 196 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 197 } 198 199 onForeground(): void { 200 // Ability has brought to foreground 201 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 202 } 203 204 onBackground(): void { 205 // Ability has back to background 206 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 207 } 208} 209``` 210 211```ts 212// Index.ets 213import { getDialogUIContext } from '../entryability/EntryAbility'; 214import { UIContext, InterstitialDialogAction, IconStyle, TitlePosition, BottomOffset } from '@kit.ArkUI'; 215 216@Entry 217@Component 218struct Index { 219 build() { 220 Row() { 221 Column() { 222 Text("show dialog") 223 .fontSize(50) 224 .fontWeight(FontWeight.Bold) 225 .onClick(() => { 226 let ctx: UIContext | null = getDialogUIContext(); 227 let interstitialDialogAction: InterstitialDialogAction = new InterstitialDialogAction({ 228 uiContext: ctx as UIContext, 229 title: "主标题", 230 subtitle: "副标题", 231 titleColor: 'rgb(255, 192, 0)', 232 subtitleColor: Color.Red, 233 backgroundImage: $r('app.media.testBackgroundImg'), 234 foregroundImage: $r('app.media.testForegroundImg'), 235 iconStyle: IconStyle.DARK, 236 titlePosition: TitlePosition.TOP, 237 bottomOffsetType: BottomOffset.OFFSET_FOR_NONE, 238 onDialogClick: () => { console.log('outer dialog click action') }, 239 onDialogClose: () => { console.log('outer close action') } 240 }); 241 interstitialDialogAction.openDialog(); 242 }) 243 } 244 .width('100%') 245 } 246 .height('100%') 247 .backgroundColor('rgba(0, 0, 0, 0.1)') 248 } 249} 250``` 251 252 253 254### 示例2 255 256为可选属性设置相应值，用两种不同参数类型分别为主标题，副标题设置颜色值，关闭按钮设置为亮色调，主副标题相对位置设置为主标题在副标题下方，底部距离类型设置为存在菜单栏情况下的距离。 257 258```ts 259// ../entryability/EntryAbility 260import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 261import { hilog } from '@kit.PerformanceAnalysisKit'; 262import { window } from '@kit.ArkUI'; 263import { BusinessError } from '@kit.BasicServicesKit'; 264 265let dialogUIContext: UIContext | null = null; 266 267export function getDialogUIContext(): UIContext | null { 268 if (getDialogUIContext === null) { 269 hilog.info(0x0000, 'testTag', '%{public}s', 'getDialogUIContext is null'); 270 } 271 return dialogUIContext; 272} 273 274export default class EntryAbility extends UIAbility { 275 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 276 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 277 } 278 279 onDestroy(): void { 280 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 281 } 282 283 onWindowStageCreate(windowStage: window.WindowStage): void { 284 // Main window is created, set main page for this ability 285 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 286 287 windowStage.loadContent('pages/Index', (err) => { 288 if (err.code) { 289 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 290 return; 291 } 292 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 293 }); 294 295 let windowClass: window.Window | undefined = undefined; 296 windowStage.getMainWindow((err: BusinessError, data) => { 297 let errCode: number = err.code; 298 if (errCode) { 299 console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 300 return; 301 } 302 windowClass = data; 303 console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 304 dialogUIContext = windowClass.getUIContext(); 305 }) 306 307 //获取窗口 308 windowStage.getMainWindow((err, data) => { 309 if (err.code) { 310 console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 311 return; 312 } 313 windowClass = data; 314 console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 315 //设置窗口全屏 316 windowClass.setWindowLayoutFullScreen(false) 317 }) 318 } 319 320 onWindowStageDestroy(): void { 321 // Main window is destroyed, release UI related resources 322 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 323 } 324 325 onForeground(): void { 326 // Ability has brought to foreground 327 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 328 } 329 330 onBackground(): void { 331 // Ability has back to background 332 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 333 } 334} 335``` 336 337```ts 338// Index.ets 339import { getDialogUIContext } from '../entryability/EntryAbility'; 340import { UIContext, InterstitialDialogAction, IconStyle, TitlePosition, BottomOffset } from '@kit.ArkUI'; 341 342@Entry 343@Component 344struct Index { 345 build() { 346 Row() { 347 Column() { 348 Text("show dialog") 349 .fontSize(50) 350 .fontWeight(FontWeight.Bold) 351 .onClick(() => { 352 let ctx: UIContext | null = getDialogUIContext(); 353 let interstitialDialogAction: InterstitialDialogAction = new InterstitialDialogAction({ 354 uiContext: ctx as UIContext, 355 title: "主标题", 356 subtitle: "副标题", 357 titleColor: 'rgb(255, 192, 0)', 358 subtitleColor: Color.Red, 359 backgroundImage: $r('app.media.testBackgroundImg'), 360 foregroundImage: $r('app.media.testForegroundImg'), 361 iconStyle: IconStyle.LIGHT, 362 titlePosition: TitlePosition.BOTTOM, 363 bottomOffsetType: BottomOffset.OFFSET_FOR_BAR, 364 onDialogClick: () => { console.log('outer dialog click action') }, 365 onDialogClose: () => { console.log('outer close action') } 366 }); 367 interstitialDialogAction.openDialog(); 368 }) 369 } 370 .width('100%') 371 } 372 .height('100%') 373 .backgroundColor('rgba(0, 0, 0, 0.1)') 374 } 375} 376``` 377 378
