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