1# @ohos.arkui.observer (无感监听) 2 3提供UI组件行为变化的无感监听能力。 4 5> **说明：** 6> 7> 从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9 10## 导入模块 11 12```ts 13import { uiObserver as observer } from '@kit.ArkUI'; 14``` 15 16## NavDestinationState 17 18NavDestination组件状态。 19 20**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 21 22**系统能力：** SystemCapability.ArkUI.ArkUI.Full 23 24| 名称 | 值 | 说明 | 25| --------- | --- | ------------------------ | 26| ON_SHOWN | 0 | NavDestination组件显示。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 | 27| ON_HIDDEN | 1 | NavDestination组件隐藏。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 | 28| ON_APPEAR<sup>12+</sup> | 2 | NavDestination从组件树上挂载。<br/> **卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 29| ON_DISAPPEAR<sup>12+</sup> | 3 | NavDestination从组件树上卸载。 <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 30| ON_WILL_SHOW<sup>12+</sup> | 4 | NavDestination组件显示之前。 <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 31| ON_WILL_HIDE<sup>12+</sup> | 5 | NavDestination组件隐藏之前。<br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 | 32| ON_WILL_APPEAR<sup>12+</sup>| 6 | NavDestination挂载到组件树之前。<br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 33| ON_WILL_DISAPPEAR<sup>12+</sup>| 7 | NavDestination从组件树上卸载之前。<br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 34| ON_BACKPRESS<sup>12+</sup> | 100 | NavDestination组件返回。 <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 35 36## ScrollEventType<sup>12+</sup> 37 38滚动事件的类型。 39 40**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 41 42**系统能力：** SystemCapability.ArkUI.ArkUI.Full 43 44| 名称 | 值 | 说明 | 45| --------- | --- | ------------------------ | 46| SCROLL_START | 0 | 滚动事件开始。 | 47| SCROLL_STOP | 1 | 滚动事件结束。 | 48 49## RouterPageState 50 51routerPage生命周期触发时对应的状态。 52 53**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57| 名称 | 值 | 说明 | 58| ----------------- | --- | ----------------------- | 59| ABOUT_TO_APPEAR | 0 | page即将显示。 | 60| ABOUT_TO_DISAPPEAR | 1 | page即将销毁。 | 61| ON_PAGE_SHOW | 2 | page显示。 | 62| ON_PAGE_HIDE | 3 | page隐藏。 | 63| ON_BACK_PRESS | 4 | page返回时。 | 64 65## TabContentState<sup>12+</sup> 66 67TabContent组件的状态。 68 69**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 70 71**系统能力：** SystemCapability.ArkUI.ArkUI.Full 72 73| 名称 | 值 | 说明 | 74| ----------------- | --- | ----------------------- | 75| ON_SHOW | 0 | TabContent组件显示。 | 76| ON_HIDE | 1 | TabContent组件隐藏。 | 77 78## NavDestinationInfo 79 80NavDestination组件信息。 81 82**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86| 名称 | 类型 | 必填 | 说明 | 87| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 88| navigationId | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | 是 | 包含NavDestination组件的Navigation组件的id。 | 89| name | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | 是 | NavDestination组件的名称。 | 90| state | [NavDestinationState](#navdestinationstate) | 是 | NavDestination组件的状态。 | 91| index<sup>12+</sup> | number | 是 | NavDestination在页面栈中的索引。 | 92| param<sup>12+</sup> | Object | 否 | NavDestination组件的参数。 | 93| navDestinationId<sup>12+</sup> | string | 是 | NavDestination组件的唯一标识ID。 | 94 95## NavigationInfo<sup>12+</sup> 96 97Navigation组件信息。 98 99**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 100 101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 102 103| 名称 | 类型 | 必填 | 说明 | 104| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 105| navigationId | string | 是 | Navigation组件的id。 | 106| pathStack | [NavPathStack](arkui-ts/ts-basic-components-navigation.md#navpathstack10) | 是 | Navigation组件的路由栈。 | 107 108## ScrollEventInfo<sup>12+</sup> 109 110ScrollEvent滚动信息。 111 112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 113 114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 115 116| 名称 | 类型 | 必填 | 说明 | 117| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 118| id | string | 是 | 滚动组件的id。 | 119| uniqueId | number | 是 | 滚动组件的uniqueId。 | 120| scrollEvent | [ScrollEventType](#scrolleventtype12) | 是 | 滚动事件的类型。 | 121| offset | number | 是 | 滚动组件的当前偏移量。 | 122 123## ObserverOptions<sup>12+</sup> 124 125Observer选项。 126 127**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 128 129**系统能力：** SystemCapability.ArkUI.ArkUI.Full 130 131| 名称 | 类型 | 必填 | 说明 | 132| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 133| id | string | 是 | 组件的id。 | 134 135## RouterPageInfo 136 137RouterPageInfo包含的信息。 138 139**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 140 141**系统能力：** SystemCapability.ArkUI.ArkUI.Full 142 143| 名称 | 类型 | 必填 | 说明 | 144| -------------------- | ------------------------------------------------------------ | ---- | ---------------------------------------------- | 145| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 触发生命周期的routerPage页面对应的上下文信息。 | 146| index | number | 是 | 触发生命周期的routerPage在栈中的位置。 | 147| name | string | 是 | 触发生命周期的routerPage页面的名称。 | 148| path | string | 是 | 触发生命周期的routerPage页面的路径。 | 149| state | [RouterPageState](#routerpagestate) | 是 | 触发生命周期的routerPage页面的状态。 | 150| pageId<sup>12+</sup> | string | 是 | 触发生命周期的routerPage页面的唯一标识。 | 151 152## DensityInfo<sup>12+</sup> 153 154屏幕像素密度变化回调包含的信息。 155 156**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160| 名称 | 类型 | 必填 | 说明 | 161| ------- | ----------------------------------------- | ---- | -------------------------------------- | 162| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 屏幕像素密度变化时页面对应的上下文信息。 | 163| density | number | 是 | 变化后的屏幕像素密度。 | 164 165## NavDestinationSwitchInfo<sup>12+</sup> 166 167Navigation组件页面切换的信息。 168 169**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173| 名称 | 类型 | 必填 | 说明 | 174| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 175| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 触发页面切换的Navigation对应的上下文信息。 | 176| from | [NavDestinationInfo](#navdestinationinfo) \| [NavBar](./arkui-ts/ts-basic-components-navigation.md#navbar12) | 是 | 页面切换的源页面。 | 177| to | [NavDestinationInfo](#navdestinationinfo) \| [NavBar](./arkui-ts/ts-basic-components-navigation.md#navbar12) | 是 | 页面切换的目的页面。 | 178| operation | [NavigationOperation](./arkui-ts/ts-basic-components-navigation.md#navigationoperation11枚举说明) | 是 | 页面切换操作类型。 | 179 180## NavDestinationSwitchObserverOptions<sup>12+</sup> 181 182Navigation组件页面切换事件的监听选项。 183 184**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 185 186**系统能力：** SystemCapability.ArkUI.ArkUI.Full 187 188| 名称 | 类型 | 必填 | 说明 | 189| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 190| navigationId | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | 是 | 指定需要监听的Navigation的ID | 191 192## TabContentInfo<sup>12+</sup> 193 194TabContent页面的切换信息。 195 196**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 197 198**系统能力：** SystemCapability.ArkUI.ArkUI.Full 199 200| 名称 | 类型 | 必填 | 说明 | 201| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 202| tabContentId | string | 是 | TabContent组件的id。 | 203| tabContentUniqueId | number | 是 | TabContent组件的uniqueId。 | 204| state | [TabContentState](#tabcontentstate12) | 是 | TabContent组件的状态。 | 205| id | string | 是 | Tabs组件的id。 | 206| uniqueId | number | 是 | Tabs组件的uniqueId。 | 207 208## observer.on('navDestinationUpdate') 209 210on(type: 'navDestinationUpdate', callback: Callback\<NavDestinationInfo\>): void 211 212监听NavDestination组件的状态变化。 213 214**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 215 216**系统能力：** SystemCapability.ArkUI.ArkUI.Full 217 218**参数：** 219 220| 参数名 | 类型 | 必填 | 说明 | 221| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 222| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 223| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 是 | 回调函数。返回当前的NavDestination组件状态。 | 224 225**示例：** 226 227```ts 228observer.on('navDestinationUpdate', (info) => { 229 console.info('NavDestination state update', JSON.stringify(info)); 230}); 231``` 232 233## observer.off('navDestinationUpdate') 234 235off(type: 'navDestinationUpdate', callback?: Callback\<NavDestinationInfo\>): void 236 237取消监听NavDestination组件的状态变化。 238 239**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 240 241**系统能力：** SystemCapability.ArkUI.ArkUI.Full 242 243**参数：** 244 245| 参数名 | 类型 | 必填 | 说明 | 246| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 247| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 248| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 否 | 回调函数。返回当前的NavDestination组件状态。 | 249 250**示例：** 251 252```ts 253observer.off('navDestinationUpdate'); 254``` 255 256## observer.on('navDestinationUpdate') 257 258on(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback: Callback\<NavDestinationInfo\>): void 259 260监听NavDestination组件的状态变化。 261 262**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 263 264**系统能力：** SystemCapability.ArkUI.ArkUI.Full 265 266**参数：** 267 268| 参数名 | 类型 | 必填 | 说明 | 269| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 270| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 271| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | 是 | 指定监听的Navigation的id。 | 272| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 是 | 回调函数。返回当前的NavDestination组件状态。 | 273 274**示例：** 275 276```ts 277observer.on('navDestinationUpdate', { navigationId: "testId" }, (info) => { 278 console.info('NavDestination state update', JSON.stringify(info)); 279}); 280``` 281 282## observer.off('navDestinationUpdate') 283 284off(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback?: Callback\<NavDestinationInfo\>): void 285 286取消监听NavDestination组件的状态变化。 287 288**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 289 290**系统能力：** SystemCapability.ArkUI.ArkUI.Full 291 292**参数：** 293 294| 参数名 | 类型 | 必填 | 说明 | 295| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 296| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 297| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | 是 | 指定监听的Navigation的id。 | 298| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 否 | 回调函数。返回当前的NavDestination组件状态。 | 299 300**示例：** 301 302```ts 303observer.off('navDestinationUpdate', { navigationId: "testId" }); 304``` 305 306## observer.on('scrollEvent')<sup>12+</sup> 307 308on(type: 'scrollEvent', callback: Callback\<ScrollEventInfo\>): void 309 310监听滚动事件的开始和结束。 311 312**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 313 314**系统能力：** SystemCapability.ArkUI.ArkUI.Full 315 316**参数：** 317 318| 参数名 | 类型 | 必填 | 说明 | 319| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 320| type | string | 是 | 监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。 | 321| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | 是 | 回调函数。返回滚动事件的信息。 | 322 323**示例：** 324 325参考[offscrollevent](#observeroffscrollevent12-1)示例。 326 327## observer.off('scrollEvent')<sup>12+</sup> 328 329off(type: 'scrollEvent', callback?: Callback\<ScrollEventInfo\>): void 330 331取消监听滚动事件的开始和结束。 332 333**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 334 335**系统能力：** SystemCapability.ArkUI.ArkUI.Full 336 337**参数：** 338 339| 参数名 | 类型 | 必填 | 说明 | 340| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 341| type | string | 是 | 监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。 | 342| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | 否 | 回调函数。返回滚动事件的信息。 | 343 344**示例：** 345 346参考[offscrollevent](#observeroffscrollevent12-1)示例。 347 348## observer.on('scrollEvent')<sup>12+</sup> 349 350on(type: 'scrollEvent', options: ObserverOptions, callback: Callback\<ScrollEventInfo\>): void 351 352监听滚动事件的开始和结束。 353 354**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 355 356**系统能力：** SystemCapability.ArkUI.ArkUI.Full 357 358**参数：** 359 360| 参数名 | 类型 | 必填 | 说明 | 361| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 362| type | string | 是 | 监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。 | 363| options | [ObserverOptions](#observeroptions12) | 是 | 指定监听的滚动组件的id。 | 364| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | 是 | 回调函数。返回滚动事件的信息。 | 365 366**示例：** 367 368参考[offscrollevent](#observeroffscrollevent12-1)示例。 369 370## observer.off('scrollEvent')<sup>12+</sup> 371 372off(type: 'scrollEvent', options: ObserverOptions, callback?: Callback\<ScrollEventInfo\>): void 373 374取消监听滚动事件的开始和结束。 375 376**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 377 378**系统能力：** SystemCapability.ArkUI.ArkUI.Full 379 380**参数：** 381 382| 参数名 | 类型 | 必填 | 说明 | 383| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 384| type | string | 是 | 监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。 | 385| options | [ObserverOptions](#observeroptions12) | 是 | 指定监听的滚动组件的id。 | 386| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | 否 | 回调函数。返回滚动事件的信息。 | 387 388**示例：** 389 390```ts 391import { uiObserver as observer } from '@kit.ArkUI' 392 393@Entry 394@Component 395struct Index { 396 scroller: Scroller = new Scroller(); 397 options: observer.ObserverOptions = { id: "testId" }; 398 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7] 399 400 build() { 401 Column() { 402 Column() { 403 Scroll(this.scroller) { 404 Column() { 405 ForEach(this.arr, (item: number) => { 406 Text(item.toString()) 407 .width('90%') 408 .height(150) 409 .backgroundColor(0xFFFFFF) 410 .borderRadius(15) 411 .fontSize(16) 412 .textAlign(TextAlign.Center) 413 .margin({ top: 10 }) 414 }, (item: string) => item) 415 }.width('100%') 416 } 417 .id("testId") 418 .height('80%') 419 } 420 .width('100%') 421 422 Row() { 423 Button('UIObserver on') 424 .onClick(() => { 425 observer.on('scrollEvent', (info) => { 426 console.info('scrollEventInfo', JSON.stringify(info)); 427 }); 428 }) 429 Button('UIObserver off') 430 .onClick(() => { 431 observer.off('scrollEvent'); 432 }) 433 } 434 435 Row() { 436 Button('UIObserverWithId on') 437 .onClick(() => { 438 observer.on('scrollEvent', this.options, (info) => { 439 console.info('scrollEventInfo', JSON.stringify(info)); 440 }); 441 }) 442 Button('UIObserverWithId off') 443 .onClick(() => { 444 observer.off('scrollEvent', this.options); 445 }) 446 } 447 } 448 .height('100%') 449 } 450} 451``` 452 453## observer.on('routerPageUpdate')<sup>11+</sup> 454 455on(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback: Callback\<RouterPageInfo\>): void 456 457监听router中page页面的状态变化。 458 459**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 460 461**系统能力：** SystemCapability.ArkUI.ArkUI.Full 462 463**参数：** 464 465| 参数名 | 类型 | 必填 | 说明 | 466| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 467| type | string | 是 | 监听事件，固定为'routerPageUpdate'，即router中page页面的状态变化。 | 468| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 469| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | 是 | 回调函数。携带pageInfo，返回当前的page页面状态。 | 470 471**示例：** 472 473```ts 474// used in UIAbility 475import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 476import { UIContext, window, uiObserver as observer } from '@kit.ArkUI'; 477import { BusinessError } from '@kit.BasicServicesKit'; 478 479export default class EntryAbility extends UIAbility { 480 private uiContext: UIContext | null = null; 481 482 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 483 // 注册监听，范围是abilityContext内的page 484 observer.on('routerPageUpdate', this.context, (info: observer.RouterPageInfo) => { 485 console.info('[uiObserver][abilityContext] got info: ' + JSON.stringify(info)) 486 }) 487 } 488 489 onWindowStageCreate(windowStage: window.WindowStage): void { 490 windowStage.loadContent('pages/Index', (err) => { 491 windowStage.getMainWindow((err: BusinessError, data) => { 492 let windowInfo: window.Window = data; 493 // 获取UIContext实例 494 this.uiContext = windowInfo.getUIContext(); 495 // 注册监听，范围是uiContext内的page 496 observer.on('routerPageUpdate', this.uiContext, (info: observer.RouterPageInfo)=>{ 497 console.info('[uiObserver][uiContext] got info: ' + JSON.stringify(info)) 498 }) 499 }) 500 }); 501 } 502 503 // ... other function in EntryAbility 504} 505``` 506 507## observer.off('routerPageUpdate')<sup>11+</sup> 508 509off(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback?: Callback\<RouterPageInfo\>): void 510 511取消监听router中page页面的状态变化。 512 513**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 514 515**系统能力：** SystemCapability.ArkUI.ArkUI.Full 516 517**参数：** 518 519| 参数名 | 类型 | 必填 | 说明 | 520| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 521| type | string | 是 | 监听事件，固定为'routerPageUpdate'，即router中page页面的状态变化。 | 522| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围 | 523| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | 否 | 需要被注销的回调函。 | 524 525**示例：** 526 527```ts 528// used in UIAbility 529import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 530import { uiObserver as observer, UIContext } from '@kit.ArkUI'; 531 532export default class EntryAbility extends UIAbility { 533 // 实际使用前uiContext需要被赋值。参见示例observer.on('routerPageUpdate') 534 private uiContext: UIContext | null = null; 535 536 onDestroy(): void { 537 // 注销当前abilityContext上的所有routerPageUpdate监听 538 observer.off('routerPageUpdate', this.context) 539 } 540 541 onWindowStageDestroy(): void { 542 // 注销在uiContext上的所有routerPageUpdate监听 543 if (this.uiContext) { 544 observer.off('routerPageUpdate', this.uiContext); 545 } 546 } 547 548 // ... other function in EntryAbility 549} 550``` 551 552## observer.on('densityUpdate')<sup>12+</sup> 553 554on(type: 'densityUpdate', context: UIContext, callback: Callback\<DensityInfo\>): void 555 556监听屏幕像素密度变化。 557 558**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 559 560**系统能力：** SystemCapability.ArkUI.ArkUI.Full 561 562**参数：** 563 564| 参数名 | 类型 | 必填 | 说明 | 565| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 566| type | string | 是 | 监听事件，固定为'densityUpdate'，即屏幕像素密度变化。 | 567| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 568| callback | Callback\<[DensityInfo](#densityinfo12)\> | 是 | 回调函数。携带densityInfo，返回变化后的屏幕像素密度。 | 569 570**示例：** 571 572```ts 573import { uiObserver as observer } from '@kit.ArkUI'; 574 575@Entry 576@Component 577struct Index { 578 @State density: number = 0; 579 @State message: string = '未注册监听' 580 581 densityUpdateCallback = (info: observer.DensityInfo) => { 582 this.density = info.density; 583 this.message = '变化后的DPI：' + this.density.toString(); 584 } 585 586 build() { 587 Column() { 588 Text(this.message) 589 .fontSize(24) 590 .fontWeight(FontWeight.Bold) 591 Button('注册屏幕像素密度变化监听') 592 .onClick(() => { 593 this.message = '已注册监听' 594 observer.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 595 }) 596 } 597 } 598} 599``` 600 601## observer.off('densityUpdate')<sup>12+</sup> 602 603off(type: 'densityUpdate', context: UIContext, callback?: Callback\<DensityInfo\>): void 604 605取消监听屏幕像素密度的变化。 606 607**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 608 609**系统能力：** SystemCapability.ArkUI.ArkUI.Full 610 611**参数：** 612 613| 参数名 | 类型 | 必填 | 说明 | 614| -------- | ----------------------------------------- | ---- | ---------------------------------------------------------------------------------------------- | 615| type | string | 是 | 监听事件，固定为'densityUpdate'，即屏幕像素密度变化。 | 616| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 617| callback | Callback\<[DensityInfo](#densityinfo12)\> | 否 | 需要被注销的回调函数。若不指定具体的回调函数，则注销指定UIContext下所有densityUpdate事件监听。 | 618 619```ts 620import { uiObserver as observer, UIContext } from '@kit.ArkUI'; 621 622@Entry 623@Component 624struct Index { 625 @State density: number = 0; 626 @State message: string = '未注册监听' 627 628 densityUpdateCallback = (info: observer.DensityInfo) => { 629 this.density = info.density; 630 this.message = '变化后的DPI：' + this.density.toString(); 631 } 632 633 build() { 634 Column() { 635 Text(this.message) 636 .fontSize(24) 637 .fontWeight(FontWeight.Bold) 638 Button('注册屏幕像素密度变化监听') 639 .onClick(() => { 640 this.message = '已注册监听' 641 observer.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 642 }) 643 Button('解除注册屏幕像素密度变化监听') 644 .onClick(() => { 645 this.message = '未注册监听' 646 observer.off('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 647 }) 648 } 649 } 650} 651``` 652 653## observer.on('willDraw')<sup>12+</sup> 654 655on(type: 'willDraw', context: UIContext, callback: Callback\<void\>): void 656 657监听每一帧绘制指令下发情况。 658 659**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 660 661**系统能力：** SystemCapability.ArkUI.ArkUI.Full 662 663**参数：** 664 665| 参数名 | 类型 | 必填 | 说明 | 666| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 667| type | string | 是 | 监听事件，固定为'willDraw'，即是否将要绘制。 | 668| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 669| callback | Callback\<void\> | 是 | 回调函数。 | 670 671**示例：** 672 673```ts 674import { uiObserver as observer } from '@kit.ArkUI'; 675 676@Entry 677@Component 678struct Index { 679 willDrawCallback = () => { 680 console.info("willDraw指令下发"); 681 } 682 build() { 683 Column() { 684 Button('注册绘制指令下发监听') 685 .onClick(() => { 686 observer.on('willDraw', this.getUIContext(), this.willDrawCallback); 687 }) 688 } 689 } 690} 691``` 692 693## observer.off('willDraw')<sup>12+</sup> 694 695off(type: 'willDraw', context: UIContext, callback?: Callback\<void\>): void 696 697取消监听每一帧绘制指令下发情况。 698 699**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 700 701**系统能力：** SystemCapability.ArkUI.ArkUI.Full 702 703**参数：** 704 705| 参数名 | 类型 | 必填 | 说明 | 706| -------- | ----------------------------------------- | ---- | ----------------------------------------------------- | 707| type | string | 是 | 监听事件，固定为'willDraw'，即是否将要绘制。 | 708| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 709| callback | Callback\<void\> | 否 | 需要被注销的回调函数。 | 710 711```ts 712import { uiObserver as observer } from '@kit.ArkUI'; 713 714@Entry 715@Component 716struct Index { 717 willDrawCallback = () => { 718 console.info("willDraw指令下发") 719 } 720 721 build() { 722 Column() { 723 Button('注册绘制指令下发监听') 724 .onClick(() => { 725 observer.on('willDraw', this.getUIContext(), this.willDrawCallback); 726 }) 727 Button('解除注册绘制指令下发监听') 728 .onClick(() => { 729 observer.off('willDraw', this.getUIContext(), this.willDrawCallback); 730 }) 731 } 732 } 733} 734``` 735 736## observer.on('didLayout')<sup>12+</sup> 737 738on(type: 'didLayout', context: UIContext, callback: Callback\<void\>): void 739 740监听每一帧布局完成情况 741 742**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 743 744**系统能力：** SystemCapability.ArkUI.ArkUI.Full 745 746**参数：** 747 748| 参数名 | 类型 | 必填 | 说明 | 749| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 750| type | string | 是 | 监听事件，固定为'didLayout'，即是否布局完成。 | 751| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 752| callback | Callback\<void\> | 是 | 回调函数。 | 753 754**示例：** 755 756```ts 757import { uiObserver as observer } from '@kit.ArkUI'; 758 759@Entry 760@Component 761struct Index { 762 didLayoutCallback = () => { 763 console.info("Layout布局完成"); 764 } 765 build() { 766 Column() { 767 Button('注册布局完成监听') 768 .onClick(() => { 769 observer.on('didLayout', this.getUIContext(), this.didLayoutCallback); 770 }) 771 } 772 } 773} 774``` 775 776## observer.off('didLayout')<sup>12+</sup> 777 778off(type: 'didLayout', context: UIContext, callback?: Callback\<void\>): void 779 780取消监听每一帧布局完成情况。 781 782**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 783 784**系统能力：** SystemCapability.ArkUI.ArkUI.Full 785 786**参数：** 787 788| 参数名 | 类型 | 必填 | 说明 | 789| -------- | ----------------------------------------- | ---- | ----------------------------------------------------- | 790| type | string | 是 | 监听事件，固定为'didLayout'，即是否布局完成。 | 791| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 792| callback | Callback\<void\> | 否 | 需要被注销的回调函数。 | 793 794```ts 795import { uiObserver as observer } from '@kit.ArkUI'; 796 797@Entry 798@Component 799struct Index { 800 didLayoutCallback = () => { 801 console.info("Layout布局完成") 802 } 803 804 build() { 805 Column() { 806 Button('注册布局完成监听') 807 .onClick(() => { 808 observer.on('didLayout', this.getUIContext(), this.didLayoutCallback); 809 }) 810 Button('解除布局完成s监听') 811 .onClick(() => { 812 observer.off('didLayout', this.getUIContext(), this.didLayoutCallback); 813 }) 814 } 815 } 816} 817``` 818 819## observer.on('navDestinationSwitch')<sup>12+</sup> 820 821on(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, callback: Callback\<NavDestinationSwitchInfo\>): void 822 823监听Navigation的页面切换事件。 824 825**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 826 827**系统能力：** SystemCapability.ArkUI.ArkUI.Full 828 829**参数：** 830 831| 参数名 | 类型 | 必填 | 说明 | 832| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 833| type | string | 是 | 监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。 | 834| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面切换事件的范围。 | 835| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | 是 | 回调函数。携带NavDestinationSwitchInfo，返回页面切换事件的信息。 | 836 837**示例：** 838 839```ts 840// EntryAbility.ets 841// 演示 observer.on('navDestinationSwitch', UIAbilityContext, callback) 842// observer.off('navDestinationSwitch', UIAbilityContext, callback) 843import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 844import { uiObserver as observer, window } from '@kit.ArkUI'; 845import { hilog } from "@kit.PerformanceAnalysisKit" 846 847function callBackFunc(info: observer.NavDestinationSwitchInfo) { 848 console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`) 849} 850 851export default class EntryAbility extends UIAbility { 852 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 853 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 854 observer.on('navDestinationSwitch', this.context, callBackFunc); 855 } 856 857 onDestroy(): void { 858 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 859 observer.off('navDestinationSwitch', this.context, callBackFunc); 860 } 861 862 onWindowStageCreate(windowStage: window.WindowStage): void { 863 // Main window is created, set main page for this ability 864 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 865 866 windowStage.loadContent('pages/Index', (err, data) => { 867 if (err.code) { 868 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 869 return; 870 } 871 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); 872 }); 873 } 874 875 onWindowStageDestroy(): void { 876 // Main window is destroyed, release UI related resources 877 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 878 } 879 880 onForeground(): void { 881 // Ability has brought to foreground 882 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 883 } 884 885 onBackground(): void { 886 // Ability has back to background 887 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 888 } 889} 890``` 891 892```ts 893// Index.ets 894// 演示 observer.on('navDestinationSwitch', UIContext, callback) 895// observer.off('navDestinationSwitch', UIContext, callback) 896import { uiObserver as observer } from '@kit.ArkUI'; 897 898@Component 899struct PageOne { 900 build() { 901 NavDestination() { 902 Text("pageOne") 903 }.title("pageOne") 904 } 905} 906 907function callBackFunc(info: observer.NavDestinationSwitchInfo) { 908 console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`) 909} 910 911@Entry 912@Component 913struct Index { 914 private stack: NavPathStack = new NavPathStack(); 915 916 @Builder 917 PageBuilder(name: string) { 918 PageOne() 919 } 920 921 aboutToAppear() { 922 observer.on('navDestinationSwitch', this.getUIContext(), callBackFunc) 923 } 924 925 aboutToDisappear() { 926 observer.off('navDestinationSwitch', this.getUIContext(), callBackFunc) 927 } 928 929 build() { 930 Column() { 931 Navigation(this.stack) { 932 Button("push").onClick(() => { 933 this.stack.pushPath({name: "pageOne"}); 934 }) 935 } 936 .title("Navigation") 937 .navDestination(this.PageBuilder) 938 } 939 .width('100%') 940 .height('100%') 941 } 942} 943``` 944 945## observer.off('navDestinationSwitch')<sup>12+</sup> 946 947off(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, callback?: Callback\<NavDestinationSwitchInfo\>): void 948 949取消监听Navigation的页面切换事件。 950 951**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 952 953**系统能力：** SystemCapability.ArkUI.ArkUI.Full 954 955**参数：** 956 957| 参数名 | 类型 | 必填 | 说明 | 958| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 959| type | string | 是 | 监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。 | 960| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面切换事件的范围。 | 961| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | 否 | 需要被注销的回调函数。 | 962 963**示例：** 964 965参考[observer.on('navDestinationSwitch')](#observeronnavdestinationswitch12)示例。 966 967## observer.on('navDestinationSwitch')<sup>12+</sup> 968 969on(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback: Callback\<NavDestinationSwitchInfo\>): void 970 971监听Navigation的页面切换事件。 972 973**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 974 975**系统能力：** SystemCapability.ArkUI.ArkUI.Full 976 977**参数：** 978 979| 参数名 | 类型 | 必填 | 说明 | 980| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 981| type | string | 是 | 监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。 | 982| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面切换事件的范围。 | 983| observerOptions | [NavDestinationSwitchObserverOptions](#navdestinationswitchobserveroptions12) | 是 | 监听选项。 | 984| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | 是 | 回调函数。携带NavDestinationSwitchInfo，返回页面切换事件的信息。 | 985 986**示例：** 987 988```ts 989// EntryAbility.ets 990// 演示 observer.on('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback) 991// observer.off('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback) 992import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 993import { uiObserver as observer, window } from '@kit.ArkUI'; 994import { hilog } from "@kit.PerformanceAnalysisKit" 995 996function callBackFunc(info: observer.NavDestinationSwitchInfo) { 997 console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`) 998} 999 1000export default class EntryAbility extends UIAbility { 1001 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 1002 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 1003 observer.on('navDestinationSwitch', this.context, { navigationId: "myNavId" }, callBackFunc); 1004 } 1005 1006 onDestroy(): void { 1007 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 1008 observer.off('navDestinationSwitch', this.context, { navigationId: "myNavId" }, callBackFunc); 1009 } 1010 1011 onWindowStageCreate(windowStage: window.WindowStage): void { 1012 // Main window is created, set main page for this ability 1013 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 1014 1015 windowStage.loadContent('pages/Index', (err, data) => { 1016 if (err.code) { 1017 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 1018 return; 1019 } 1020 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); 1021 }); 1022 } 1023 1024 onWindowStageDestroy(): void { 1025 // Main window is destroyed, release UI related resources 1026 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 1027 } 1028 1029 onForeground(): void { 1030 // Ability has brought to foreground 1031 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 1032 } 1033 1034 onBackground(): void { 1035 // Ability has back to background 1036 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 1037 } 1038} 1039``` 1040 1041```ts 1042// Index.ets 1043// 演示 observer.on('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback) 1044// observer.off('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback) 1045import { uiObserver as observer } from '@kit.ArkUI'; 1046 1047@Component 1048struct PageOne { 1049 build() { 1050 NavDestination() { 1051 Text("pageOne") 1052 }.title("pageOne") 1053 } 1054} 1055 1056function callBackFunc(info: observer.NavDestinationSwitchInfo) { 1057 console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`) 1058} 1059 1060@Entry 1061@Component 1062struct Index { 1063 private stack: NavPathStack = new NavPathStack(); 1064 1065 @Builder 1066 PageBuilder(name: string) { 1067 PageOne() 1068 } 1069 1070 aboutToAppear() { 1071 observer.on('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc) 1072 } 1073 1074 aboutToDisappear() { 1075 observer.off('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc) 1076 } 1077 1078 build() { 1079 Column() { 1080 Navigation(this.stack) { 1081 Button("push").onClick(() => { 1082 this.stack.pushPath({name: "pageOne"}); 1083 }) 1084 } 1085 .id("myNavId") 1086 .title("Navigation") 1087 .navDestination(this.PageBuilder) 1088 } 1089 .width('100%') 1090 .height('100%') 1091 } 1092} 1093``` 1094 1095## observer.off('navDestinationSwitch')<sup>12+</sup> 1096 1097off(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback?: Callback\<NavDestinationSwitchInfo\>): void 1098 1099取消监听Navigation的页面切换事件。 1100 1101**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1102 1103**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1104 1105**参数：** 1106 1107| 参数名 | 类型 | 必填 | 说明 | 1108| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1109| type | string | 是 | 监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。 | 1110| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面切换事件的范围。 | 1111| observerOptions | [NavDestinationSwitchObserverOptions](#navdestinationswitchobserveroptions12) | 是 | 监听选项。 | 1112| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | 否 | 需要被注销的回调函数。 | 1113 1114**示例：** 1115 1116参考[observer.on('navDestinationSwitch')](#observeronnavdestinationswitch12-1)接口示例。 1117 1118## observer.on('tabContentUpdate')<sup>12+</sup> 1119 1120on(type: 'tabContentUpdate', callback: Callback\<TabContentInfo\>): void 1121 1122监听TabContent页面的切换事件。 1123 1124**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1125 1126**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1127 1128**参数：** 1129 1130| 参数名 | 类型 | 必填 | 说明 | 1131| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1132| type | string | 是 | 监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。 | 1133| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | 是 | 回调函数。携带TabContentInfo，返回TabContent页面切换事件的信息。 | 1134 1135**示例：** 1136 1137```ts 1138import { uiObserver as observer } from '@kit.ArkUI'; 1139 1140function callbackFunc(info: observer.TabContentInfo) { 1141 console.info('tabContentUpdate', JSON.stringify(info)); 1142} 1143 1144@Entry 1145@Component 1146struct TabsExample { 1147 1148 aboutToAppear(): void { 1149 observer.on('tabContentUpdate', callbackFunc); 1150 } 1151 1152 aboutToDisappear(): void { 1153 observer.off('tabContentUpdate', callbackFunc); 1154 } 1155 1156 build() { 1157 Column() { 1158 Tabs() { 1159 TabContent() { 1160 Column().width('100%').height('100%').backgroundColor('#00CB87') 1161 }.tabBar('green').id('tabContentId0') 1162 1163 TabContent() { 1164 Column().width('100%').height('100%').backgroundColor('#007DFF') 1165 }.tabBar('blue').id('tabContentId1') 1166 1167 TabContent() { 1168 Column().width('100%').height('100%').backgroundColor('#FFBF00') 1169 }.tabBar('yellow').id('tabContentId2') 1170 1171 TabContent() { 1172 Column().width('100%').height('100%').backgroundColor('#E67C92') 1173 }.tabBar('pink').id('tabContentId3') 1174 } 1175 .width(360) 1176 .height(296) 1177 .backgroundColor('#F1F3F5') 1178 .id('tabsId') 1179 }.width('100%') 1180 } 1181} 1182``` 1183 1184## observer.off('tabContentUpdate')<sup>12+</sup> 1185 1186off(type: 'tabContentUpdate', callback?: Callback\<TabContentInfo\>): void 1187 1188取消监听TabContent页面的切换事件。 1189 1190**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1191 1192**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1193 1194**参数：** 1195 1196| 参数名 | 类型 | 必填 | 说明 | 1197| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1198| type | string | 是 | 监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。 | 1199| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | 否 | 需要被注销的回调函数。 | 1200 1201**示例：** 1202 1203参考[observer.on('tabContentUpdate')](#observerontabcontentupdate12)接口示例。 1204 1205## observer.on('tabContentUpdate')<sup>12+</sup> 1206 1207on(type: 'tabContentUpdate', options: ObserverOptions, callback: Callback\<TabContentInfo\>): void 1208 1209监听TabContent页面的切换事件。 1210 1211**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1212 1213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1214 1215**参数：** 1216 1217| 参数名 | 类型 | 必填 | 说明 | 1218| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1219| type | string | 是 | 监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。 | 1220| options | [ObserverOptions](#observeroptions12) | 是 | 指定监听的Tabs组件的id。 | 1221| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | 是 | 回调函数。携带TabContentInfo，返回TabContent页面切换事件的信息。 | 1222 1223**示例：** 1224 1225```ts 1226import { uiObserver as observer } from '@kit.ArkUI'; 1227 1228function callbackFunc(info: observer.TabContentInfo) { 1229 console.info('tabContentUpdate', JSON.stringify(info)); 1230} 1231 1232@Entry 1233@Component 1234struct TabsExample { 1235 1236 aboutToAppear(): void { 1237 observer.on('tabContentUpdate', { id: 'tabsId' }, callbackFunc); 1238 } 1239 1240 aboutToDisappear(): void { 1241 observer.off('tabContentUpdate', { id: 'tabsId' }, callbackFunc); 1242 } 1243 1244 build() { 1245 Column() { 1246 Tabs() { 1247 TabContent() { 1248 Column().width('100%').height('100%').backgroundColor('#00CB87') 1249 }.tabBar('green').id('tabContentId0') 1250 1251 TabContent() { 1252 Column().width('100%').height('100%').backgroundColor('#007DFF') 1253 }.tabBar('blue').id('tabContentId1') 1254 1255 TabContent() { 1256 Column().width('100%').height('100%').backgroundColor('#FFBF00') 1257 }.tabBar('yellow').id('tabContentId2') 1258 1259 TabContent() { 1260 Column().width('100%').height('100%').backgroundColor('#E67C92') 1261 }.tabBar('pink').id('tabContentId3') 1262 } 1263 .width(360) 1264 .height(296) 1265 .backgroundColor('#F1F3F5') 1266 .id('tabsId') 1267 }.width('100%') 1268 } 1269} 1270``` 1271 1272## observer.off('tabContentUpdate')<sup>12+</sup> 1273 1274off(type: 'tabContentUpdate', options: ObserverOptions, callback?: Callback\<TabContentInfo\>): void 1275 1276取消监听TabContent页面的切换事件。 1277 1278**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1279 1280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1281 1282**参数：** 1283 1284| 参数名 | 类型 | 必填 | 说明 | 1285| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1286| type | string | 是 | 监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。 | 1287| options | [ObserverOptions](#observeroptions12) | 是 | 指定监听的Tabs组件的id。 | 1288| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | 否 | 需要被注销的回调函数。 | 1289 1290**示例：** 1291 1292参考[observer.on('tabContentUpdate')](#observerontabcontentupdate12-1)接口示例。