1# @ohos.arkui.uiExtension (uiExtension) 2 3用于EmbeddedUIExtensionAbility（或UIExtensionAbility）中获取宿主应用的窗口信息或对应的EmbeddedComponent<!--Del-->（或UIExtensionComponent）<!--DelEnd-->组件的信息。 4 5> **说明** 6> 7> 从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9 10## 导入模块 11 12``` 13import { uiExtension } from '@kit.ArkUI' 14``` 15 16## WindowProxy 17 18### getWindowAvoidArea 19 20getWindowAvoidArea(type: window.AvoidAreaType): window.AvoidArea 21 22获取宿主应用窗口内容规避的区域；如系统栏区域、刘海屏区域、手势区域、软键盘区域等与宿主窗口内容重叠时，需要宿主窗口内容避让的区域。 23 24**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 25 26**系统能力**：SystemCapability.ArkUI.ArkUI.Full 27 28| 参数名 | 类型 | 必填 | 说明 | 29| -------- | -------- | -------- | -------- | 30| type |[window.AvoidAreaType](./js-apis-window.md#avoidareatype7) | 是 | 表示规避区类型。 | 31 32**返回值：** 33 34| 类型 | 说明 | 35| -------- | -------- | 36|[window.AvoidArea](./js-apis-window.md#avoidarea7) | 宿主窗口内容规避区域。 | 37 38**错误码**： 39 40以下错误码详细介绍请参考[通用错误码](../errorcode-universal.md)。 41 42| 错误码ID | 错误信息 | 43| ------- | -------- | 44| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 45 46**示例** 47 48```ts 49// ExtensionProvider.ts 50import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 51import { window } from '@kit.ArkUI'; 52 53export default class EntryAbility extends EmbeddedUIExtensionAbility { 54 onSessionCreate(want: Want, session: UIExtensionContentSession) { 55 const extensionWindow = session.getUIExtensionWindowProxy(); 56 // 获取宿主应用窗口的避让信息 57 let avoidArea: window.AvoidArea | undefined = extensionWindow?.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); 58 console.info(`avoidArea: ${JSON.stringify(avoidArea)}`); 59 } 60} 61``` 62 63### on('avoidAreaChange') 64 65on(type: 'avoidAreaChange', callback: Callback<AvoidAreaInfo>): void 66 67注册系统规避区变化的监听。 68 69**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 70 71**系统能力**：SystemCapability.ArkUI.ArkUI.Full 72 73| 参数名 | 类型 | 必填 | 说明 | 74| ------ | ---- | ---- | ---- | 75| type | string | 是 | 监听的事件类型，固定为'avoidAreaChange'，即系统规避区变化事件。 | 76| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[AvoidAreaInfo](#avoidareainfo)> | 是 | 回调函数：入参用于接收当前规避区的信息。 | 77 78**错误码**： 79 80以下错误码详细介绍请参考[通用错误码](../errorcode-universal.md)。 81 82| 错误码ID | 错误信息 | 83| ------- | -------- | 84| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 85 86**示例** 87 88```ts 89// ExtensionProvider.ts 90import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 91import { uiExtension } from '@kit.ArkUI'; 92 93export default class EntryAbility extends EmbeddedUIExtensionAbility { 94 onSessionCreate(want: Want, session: UIExtensionContentSession) { 95 const extensionWindow = session.getUIExtensionWindowProxy(); 96 // 注册避让区变化的监听 97 extensionWindow.on('avoidAreaChange', (info: uiExtension.AvoidAreaInfo) => { 98 console.info(`The avoid area of the host window is: ${JSON.stringify(info.area)}.`); 99 }); 100 } 101} 102``` 103 104### off('avoidAreaChange') 105 106off(type: 'avoidAreaChange', callback?: Callback<AvoidAreaInfo>): void 107 108注销系统规避区变化的监听。 109 110**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 111 112**系统能力**：SystemCapability.ArkUI.ArkUI.Full 113 114| 参数名 | 类型 | 必填 | 说明 | 115| -------- | ---- | ---- | --- | 116| type | string | 是 | 注销的事件类型，固定为'avoidAreaChange'，即系统规避区变化事件。 | 117| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[AvoidAreaInfo](#avoidareainfo)> | 否 | 回调函数：如果传入该参数，则关闭该监听。如果未传入参数，则关闭所有系统规避区变化的监听。 | 118 119**错误码**： 120 121以下错误码详细介绍请参考[通用错误码](../errorcode-universal.md)。 122 123| 错误码ID | 错误信息 | 124| -------- | ------------------------------------------------------------ | 125| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 126 127**示例** 128 129```ts 130// ExtensionProvider.ts 131import { EmbeddedUIExtensionAbility, UIExtensionContentSession } from '@kit.AbilityKit'; 132 133export default class EntryAbility extends EmbeddedUIExtensionAbility { 134 onSessionDestroy(session: UIExtensionContentSession) { 135 const extensionWindow = session.getUIExtensionWindowProxy(); 136 // 注销所有避让区变化的监听 137 extensionWindow.off('avoidAreaChange'); 138 } 139} 140``` 141 142### on('windowSizeChange') 143 144on(type: 'windowSizeChange', callback: Callback<window.Size>): void 145 146注册宿主应用窗口尺寸变化的监听。 147 148**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 149 150**系统能力**：SystemCapability.ArkUI.ArkUI.Full 151 152| 参数名 | 类型 | 必填 | 说明 | 153| -------- | --------------------- | ---- | ---------------------- | 154| type | string | 是 | 监听的事件类型，固定为'windowSizeChange'，即窗口尺寸变化事件。 | 155| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[window.Size](js-apis-window.md#size7)> | 是 | 回调函数：入参用于接收当前窗口的尺寸。 | 156 157**错误码**： 158 159以下错误码详细介绍请参考[通用错误码](../errorcode-universal.md)。 160 161| 错误码ID | 错误信息 | 162| ------- | -------- | 163| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 164 165**示例** 166 167```ts 168// ExtensionProvider.ts 169import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 170import { window } from '@kit.ArkUI'; 171 172export default class EntryAbility extends EmbeddedUIExtensionAbility { 173 onSessionCreate(want: Want, session: UIExtensionContentSession) { 174 const extensionWindow = session.getUIExtensionWindowProxy(); 175 // 注册宿主应用窗口大小变化的监听 176 extensionWindow.on('windowSizeChange', (size: window.Size) => { 177 console.info(`The avoid area of the host window is: ${JSON.stringify(size)}.`); 178 }); 179 } 180} 181``` 182 183### off('windowSizeChange') 184 185off(type: 'windowSizeChange', callback?: Callback<window.Size>): void 186 187注销宿主应用窗口尺寸变化的监听。 188 189**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 190 191**系统能力**：SystemCapability.ArkUI.ArkUI.Full 192 193| 参数名 | 类型 | 必填 | 说明 | 194| -------- | --------------------- | ---- | ---------------------- | 195| type | string | 是 | 注销的事件类型，固定值：'windowSizeChange'，即窗口尺寸变化事件。 | 196| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[window.Size](js-apis-window.md#size7)> | 否 | 回调函数：如果传入该参数，则关闭该监听。如果未传入参数，则关闭所有系统规避区变化的监听。 | 197 198**错误码**： 199 200以下错误码详细介绍请参考[通用错误码](../errorcode-universal.md)。 201 202| 错误码ID | 错误信息 | 203| ------- | -------- | 204| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 205 206**示例** 207 208```ts 209// ExtensionProvider.ts 210import { EmbeddedUIExtensionAbility, UIExtensionContentSession } from '@kit.AbilityKit'; 211 212export default class EntryAbility extends EmbeddedUIExtensionAbility { 213 onSessionDestroy(session: UIExtensionContentSession) { 214 const extensionWindow = session.getUIExtensionWindowProxy(); 215 // 注销宿主应用窗口大小变化的监听 216 extensionWindow.off('windowSizeChange'); 217 } 218} 219``` 220 221### on('rectChange')<sup>14+</sup> 222 223on(type: 'rectChange', reasons: number, callback: Callback<RectChangeOptions>): void 224 225注册组件（EmbeddedComponent或UIExtensionComponent）位置及尺寸变化的监听，目前仅支持在2in1设备上使用。 226 227**系统能力：** SystemCapability.ArkUI.ArkUI.Full 228 229**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 230 231**参数：** 232 233| 参数名 | 类型 | 必填 | 说明 | 234| -------- | ------------------------------ | ---- | -------------------------------------------------------- | 235| type | string | 是 | 监听事件，固定为'rectChange'，即组件（EmbeddedComponent或UIExtensionComponent）矩形变化事件。 | 236| reasons | number | 是 | 触发组件（EmbeddedComponent或UIExtensionComponent）位置及尺寸变化的原因。 237| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[RectChangeOptions](#rectchangeoptions14)> | 是 | 回调函数。返回当前组件（EmbeddedComponent或UIExtensionComponent）矩形变化值及变化原因。 | 238 239**错误码：** 240 241以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 242 243| 错误码ID | 错误信息 | 244| ------- | -------------------------------------------- | 245| 401 | Parameter error. Possible cause: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types; 3. Parameter verification failed. | 246| 801 | Capability not supported. Failed to call the API due to limited device capabilities. | 247 248**示例：** 249 250```ts 251// ExtensionProvider.ts 252import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 253import { uiExtension } from '@kit.ArkUI'; 254 255export default class EntryAbility extends EmbeddedUIExtensionAbility { 256 onSessionCreate(want: Want, session: UIExtensionContentSession) { 257 const extensionWindow = session.getUIExtensionWindowProxy(); 258 // 注册组件（EmbeddedComponent或UIExtensionComponent）位置及尺寸变化的监听 259 extensionWindow.on('rectChange', uiextension.RectChangeReason.HOST_WINDOW_RECT_CHANGE, (data: uiextension.RectChangeOptions) => { 260 console.info('Succeeded window rect changes. Data: ' + JSON.stringify(data)); 261 }); 262 } 263} 264``` 265 266### off('rectChange')<sup>14+</sup> 267 268off(type: 'rectChange', callback?: Callback<RectChangeOptions>): void 269 270注销组件（EmbeddedComponent或UIExtensionComponent）位置及尺寸变化的监听，目前仅支持在2in1设备上使用。 271 272**系统能力：** SystemCapability.ArkUI.ArkUI.Full 273 274**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 275 276**参数：** 277 278| 参数名 | 类型 | 必填 | 说明 | 279| -------- | ------------------------------ | ---- | ------------------------------------------------------------ | 280| type | string | 是 | 监听事件，固定为'rectChange'，即组件（EmbeddedComponent或UIExtensionComponent）矩形变化事件。 | 281| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[RectChangeOptions](#rectchangeoptions14)> | 否 | 回调函数。返回当前组件（EmbeddedComponent或UIExtensionComponent）矩形变化值及变化原因。如果传入参数，则关闭该监听。如果未传入参数，则关闭所有组件（EmbeddedComponent或UIExtensionComponent）矩形变化的监听。 | 282 283**错误码：** 284 285以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 286 287| 错误码ID | 错误信息 | 288| ------- | -------------------------------------------- | 289| 401 | Parameter error. Possible cause: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types; 3. Parameter verification failed. | 290| 801 | Capability not supported. Failed to call the API due to limited device capabilities. | 291 292**示例：** 293 294```ts 295// ExtensionProvider.ts 296import { EmbeddedUIExtensionAbility, UIExtensionContentSession } from '@kit.AbilityKit'; 297 298export default class EntryAbility extends EmbeddedUIExtensionAbility { 299 onSessionDestroy(session: UIExtensionContentSession) { 300 const extensionWindow = session.getUIExtensionWindowProxy(); 301 // 注销组件（EmbeddedComponent或UIExtensionComponent）位置及尺寸变化的监听 302 extensionWindow.off('rectChange'); 303 } 304} 305``` 306 307### properties<sup>14+</sup> 308 309properties: WindowProxyProperties 310 311宿主应用窗口和组件（EmbeddedComponent或UIExtensionComponent）的信息。 312 313| 参数名 | 类型 | 说明 | 314| ---------- | ------------------------------------ | -------------------------------- | 315| properties | [WindowProxyProperties](#windowproxyproperties14) | 组件（EmbeddedComponent或UIExtensionComponent）以及宿主窗口的信息。 | 316 317**示例** 318 319```ts 320// ExtensionProvider.ts 321import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 322 323export default class EntryAbility extends EmbeddedUIExtensionAbility { 324 onSessionCreate(want: Want, session: UIExtensionContentSession) { 325 const extensionWindow = session.getUIExtensionWindowProxy(); 326 // 获取组件（EmbeddedComponent或UIExtensionComponent）位置和尺寸信息 327 const rect = extensionWindow.properties.uiExtensionHostWindowProxyRect; 328 console.log(`Rect Info: ${JSON.stringify(rect)}`); 329 } 330} 331``` 332 333### createSubWindowWithOptions 334 335createSubWindowWithOptions(name: string, subWindowOptions: window.SubWindowOptions): Promise<window.Window> 336 337创建该WindowProxy实例下的子窗口，使用Promise异步回调。 338 339**系统能力：** SystemCapability.ArkUI.ArkUI.Full 340 341**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 342 343**模型约束：** 此接口仅可在Stage模型下使用。 344 345**参数：** 346 347| 参数名 | 类型 | 必填 | 说明 | 348| ------ | ------ | ---- | -------------- | 349| name | string | 是 | 子窗口的名字。 | 350| subWindowOptions | [window.SubWindowOptions](js-apis-window.md#subwindowoptions11) | 是 | 子窗口参数。 | 351 352**返回值：** 353 354| 类型 | 说明 | 355| -------------------------------- | ------------------------------------------------ | 356| Promise<[window.Window](js-apis-window.md#window)> | Promise对象。返回当前WindowProxy下创建的子窗口对象。 | 357 358**错误码：** 359 360以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)和[窗口错误码](errorcode-window.md)。 361 362| 错误码ID | 错误信息 | 363| ------- | ------------------------------ | 364| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 365| 801 | Capability not supported. Failed to call the API due to limited device capabilities. | 366| 1300002 | This window state is abnormal. | 367| 1300005 | This window proxy is abnormal. | 368 369**示例：** 370 371```ts 372// ExtensionProvider.ts 373import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 374import { window } from '@kit.ArkUI'; 375import { BusinessError } from '@kit.BasicServicesKit'; 376 377export default class EntryAbility extends EmbeddedUIExtensionAbility { 378 onSessionCreate(want: Want, session: UIExtensionContentSession) { 379 const extensionWindow = session.getUIExtensionWindowProxy(); 380 const subWindowOpts: window.SubWindowOptions = { 381 title: 'This is a subwindow', 382 decorEnabled: true 383 }; 384 // 创建子窗口 385 extensionWindow.createSubWindowWithOptions('subWindowForHost', subWindowOpts) 386 .then((subWindow: window.Window) => { 387 subWindow.setUIContent('pages/Index', (err, data) =>{ 388 if (err && err.code != 0) { 389 return; 390 } 391 subWindow?.resize(300, 300, (err, data)=>{ 392 if (err && err.code != 0) { 393 return; 394 } 395 subWindow?.moveWindowTo(100, 100, (err, data)=>{ 396 if (err && err.code != 0) { 397 return; 398 } 399 subWindow?.showWindow((err, data) => { 400 if (err && err.code == 0) { 401 console.info(`The subwindow has been shown!`); 402 } else { 403 console.error(`Failed to show the subwindow!`); 404 } 405 }); 406 }); 407 }); 408 }); 409 }).catch((error: BusinessError) => { 410 console.error(`Create subwindow failed: ${JSON.stringify(error)}`); 411 }) 412 } 413} 414``` 415 416## AvoidAreaInfo 417 418用于表示窗口规避区的信息。 419 420**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 421 422**系统能力**：SystemCapability.ArkUI.ArkUI.Full 423 424| 名称 | 类型 | 必填 | 说明 | 425| ------ | -------------------- | ------------------ | ------------------ | 426| type | [window.AvoidAreaType](js-apis-window.md#avoidareatype7) | 是 | 窗口规避区类型。 | 427| area | [window.AvoidArea](js-apis-window.md#avoidarea7) | 是| 窗口内容规避区域。 | 428 429## WindowProxyProperties<sup>14+</sup> 430 431用于表示宿主应用窗口和组件（EmbeddedComponent或UIExtensionComponent）的信息。 432 433| 名称 | 类型 | 必填 | 说明 | 434| ------------------------------ | ----------- | -------------------------------- | -------------------------------- | 435| uiExtensionHostWindowProxyRect | [window.Rect](js-apis-window.md#rect7) | 是 | 组件（EmbeddedComponent或UIExtensionComponent）的位置和宽高。 | 436 437## RectChangeReason<sup>14+</sup> 438 439组件（EmbeddedComponent或UIExtensionComponent）矩形（位置及尺寸）变化的原因。 440 441**系统能力：** SystemCapability.ArkUI.ArkUI.Full 442 443**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 444 445| 名称 | 值 | 说明 | 446| ----------------------- | ---- | ------------------------------------------------------------ | 447| HOST_WINDOW_RECT_CHANGE | 1 | 组件所在的宿主窗口矩形变化。 | 448 449## RectChangeOptions<sup>14+</sup> 450 451组件（EmbeddedComponent或UIExtensionComponent）矩形（位置及尺寸）变化返回的值及变化原因。 452 453**系统能力：** SystemCapability.ArkUI.ArkUI.Full 454 455**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 456 457| 名称 | 类型 | 可读 | 可写 | 说明 | 458| ---------- | ------------- | ---- | ---- | ------------------ | 459| rect | [Rect](js-apis-window.md#rect7) | 是 | 是 | 组件矩形变化后的值。 | 460| reason | [RectChangeReason](#rectchangereason14) | 是 | 是 | 组件矩形变化的原因。 | 461 462## 完整示例 463 464本示例展示文档中所有API在EmbeddedUIExtensionAbility中的基础使用方式，示例应用的`bundleName`为"com.example.embeddeddemo", 被拉起的`EmbeddedUIExtensionAbility`为"ExampleEmbeddedAbility"。 465 466- 示例应用中的EntryAbility(UIAbility)加载首页文件：`pages/Index.ets`，其中内容如下： 467 468 ```ts 469 // pages/Index.ets -- UIAbility启动时加载此页面 470 import { Want } from '@kit.AbilityKit'; 471 472 @Entry 473 @Component 474 struct Index { 475 @State message: string = 'Message: ' 476 private want: Want = { 477 bundleName: "com.example.embeddeddemo", 478 abilityName: "ExampleEmbeddedAbility", 479 } 480 481 build() { 482 Row() { 483 Column() { 484 Text(this.message).fontSize(30) 485 EmbeddedComponent(this.want, EmbeddedType.EMBEDDED_UI_EXTENSION) 486 .width('100%') 487 .height('90%') 488 .onTerminated((info)=>{ 489 this.message = 'Termination: code = ' + info.code + ', want = ' + JSON.stringify(info.want); 490 }) 491 .onError((error)=>{ 492 this.message = 'Error: code = ' + error.code; 493 }) 494 } 495 .width('100%') 496 } 497 .height('100%') 498 } 499 } 500 ``` 501 502- EmbeddedComponent拉起的EmbeddedUIExtensionAbility在`ets/extensionAbility/ExampleEmbeddedAbility`文件中实现，内容如下： 503 504 ```ts 505 import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 506 507 const TAG: string = '[ExampleEmbeddedAbility]' 508 export default class ExampleEmbeddedAbility extends EmbeddedUIExtensionAbility { 509 510 onCreate() { 511 console.info(TAG, `onCreate`); 512 } 513 514 onForeground() { 515 console.info(TAG, `onForeground`); 516 } 517 518 onBackground() { 519 console.info(TAG, `onBackground`); 520 } 521 522 onDestroy() { 523 console.info(TAG, `onDestroy`); 524 } 525 526 onSessionCreate(want: Want, session: UIExtensionContentSession) { 527 console.info(TAG, `onSessionCreate, want: ${JSON.stringify(want)}`); 528 let param: Record<string, UIExtensionContentSession> = { 529 'session': session 530 }; 531 let storage: LocalStorage = new LocalStorage(param); 532 session.loadContent('pages/extension', storage); 533 } 534 } 535 ``` 536 537- EmbeddedUIExtensionAbility的入口页面文件`pages/extension.ets`内容如下： 538 539 ```ts 540 import { UIExtensionContentSession } from '@kit.AbilityKit'; 541 import { uiExtension, window } from '@kit.ArkUI'; 542 import { BusinessError } from '@kit.BasicServicesKit'; 543 let storage = LocalStorage.getShared() 544 545 @Entry(storage) 546 @Component 547 struct Extension { 548 @State message: string = 'EmbeddedUIExtensionAbility Index'; 549 private session: UIExtensionContentSession | undefined = storage.get<UIExtensionContentSession>('session'); 550 private extensionWindow: uiExtension.WindowProxy | undefined = this.session?.getUIExtensionWindowProxy(); 551 private subWindow: window.Window | undefined = undefined; 552 553 aboutToAppear(): void { 554 this.extensionWindow?.on('windowSizeChange', (size: window.Size) => { 555 console.info(`size = ${JSON.stringify(size)}`); 556 }); 557 this.extensionWindow?.on('rectChange', uiextension.RectChangeReason.HOST_WINDOW_RECT_CHANGE, (data: uiextension.RectChangeOptions) => { 558 console.info('Succeeded window rect changes. Data: ' + JSON.stringify(data)); 559 }); 560 this.extensionWindow?.on('avoidAreaChange', (info: uiExtension.AvoidAreaInfo) => { 561 console.info(`type = ${JSON.stringify(info.type)}, area = ${JSON.stringify(info.area)}`); 562 }); 563 } 564 565 aboutToDisappear(): void { 566 this.extensionWindow?.off('windowSizeChange'); 567 this.extensionWindow?.off('rectChange'); 568 this.extensionWindow?.off('avoidAreaChange'); 569 } 570 571 build() { 572 Column() { 573 Text(this.message) 574 .fontSize(20) 575 .fontWeight(FontWeight.Bold) 576 Button("获取组件大小").width('90%').margin({top: 5, bottom: 5}).fontSize(16).onClick(() => { 577 let rect = this.extensionWindow?.properties.uiExtensionHostWindowProxyRect; 578 console.info(`EmbeddedComponent的位置和尺寸信息: ${JSON.stringify(rect)}`); 579 }) 580 Button("获取系统规避区信息").width('90%').margin({top: 5, bottom: 5}).fontSize(16).onClick(() => { 581 let avoidArea: window.AvoidArea | undefined = this.extensionWindow?.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); 582 console.info(`系统规避区: ${JSON.stringify(avoidArea)}`); 583 }) 584 Button("创建子窗口").width('90%').margin({top: 5, bottom: 5}).fontSize(16).onClick(() => { 585 let subWindowOpts: window.SubWindowOptions = { 586 'title': 'This is a subwindow', 587 decorEnabled: true 588 }; 589 this.extensionWindow?.createSubWindowWithOptions('subWindowForHost', subWindowOpts) 590 .then((subWindow: window.Window) => { 591 this.subWindow = subWindow; 592 this.subWindow.loadContent('pages/Index', storage, (err, data) =>{ 593 if (err && err.code != 0) { 594 return; 595 } 596 this.subWindow?.resize(300, 300, (err, data)=>{ 597 if (err && err.code != 0) { 598 return; 599 } 600 this.subWindow?.moveWindowTo(100, 100, (err, data)=>{ 601 if (err && err.code != 0) { 602 return; 603 } 604 this.subWindow?.showWindow((err, data) => { 605 if (err && err.code == 0) { 606 console.info(`The subwindow has been shown!`); 607 } else { 608 console.error(`Failed to show the subwindow!`); 609 } 610 }); 611 }); 612 }); 613 }); 614 }).catch((error: BusinessError) => { 615 console.error(`Create subwindow failed: ${JSON.stringify(error)}`); 616 }) 617 }) 618 }.width('100%').height('100%') 619 } 620 } 621 ``` 622 623- 最后，示例应用的`module.json5`中的"extensionAbilities"中需要增加一项，具体内容如下： 624 ```json 625 { 626 "name": "ExampleEmbeddedAbility", 627 "srcEntry": "./ets/extensionAbility/ExampleEmbeddedAbility.ets", 628 "type": "embeddedUI" 629 } 630 ``` 631