1# @ohos.arkui.observer (Observer) 2 3The **Observer** module provides APIs for listening for UI component behavior changes. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8> 9 10## Modules to Import 11 12```ts 13import { uiObserver as observer } from '@kit.ArkUI'; 14``` 15 16## NavDestinationState 17 18Describes the state of the **NavDestination** component. 19 20**Atomic service API**: This API can be used in atomic services since API version 12. 21 22**System capability**: SystemCapability.ArkUI.ArkUI.Full 23 24| Name | Value | Description | 25| --------- | --- | ------------------------ | 26| ON_SHOWN | 0 | The **NavDestination** component is displayed.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.| 27| ON_HIDDEN | 1 | The **NavDestination** component is hidden.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.| 28| ON_APPEAR<sup>12+</sup> | 2 | The **NavDestination** component is mounted to the component tree.<br> **Widget capability**: This API can be used in ArkTS widgets since API version 12.| 29| ON_DISAPPEAR<sup>12+</sup> | 3 | The **NavDestination** component is unmounted from the component tree.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.| 30| ON_WILL_SHOW<sup>12+</sup> | 4 | The **NavDestination** is about to be displayed.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.| 31| ON_WILL_HIDE<sup>12+</sup> | 5 | The **NavDestination** component is about to be hidden.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.| 32| ON_WILL_APPEAR<sup>12+</sup>| 6 | The **NavDestination** component is about to be mounted to the component tree.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.| 33| ON_WILL_DISAPPEAR<sup>12+</sup>| 7 | The **NavDestination** component is about to be unmounted from the component tree.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.| 34| ON_BACKPRESS<sup>12+</sup> | 100 | The back button is pressed on the **NavDestination** component.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.| 35 36## ScrollEventType<sup>12+</sup> 37 38Enumerates the scroll event types. 39 40**Atomic service API**: This API can be used in atomic services since API version 12. 41 42**System capability**: SystemCapability.ArkUI.ArkUI.Full 43 44| Name | Value | Description | 45| --------- | --- | ------------------------ | 46| SCROLL_START | 0 | The scroll event starts.| 47| SCROLL_STOP | 1 | The scroll event ends.| 48 49## RouterPageState 50 51Enumerates the states of a page during routing. 52 53**Atomic service API**: This API can be used in atomic services since API version 12. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57| Name | Value | Description | 58| ----------------- | --- | ----------------------- | 59| ABOUT_TO_APPEAR | 0 | The page is about to be displayed. | 60| ABOUT_TO_DISAPPEAR | 1 | The page is about to be destroyed. | 61| ON_PAGE_SHOW | 2 | The page is displayed. | 62| ON_PAGE_HIDE | 3 | The page is hidden. | 63| ON_BACK_PRESS | 4 | The page is returned. | 64 65## TabContentState<sup>12+</sup> 66 67Enumerates the states of the **NavDestination** component. 68 69**Atomic service API**: This API can be used in atomic services since API version 12. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73| Name | Value | Description | 74| ----------------- | --- | ----------------------- | 75| ON_SHOW | 0 | The **TabContent** component is displayed. | 76| ON_HIDE | 1 | The **TabContent** component is hidden. | 77 78## NavDestinationInfo 79 80Provides information about the **NavDestination** component. 81 82**Atomic service API**: This API can be used in atomic services since API version 12. 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86| Name | Type | Mandatory| Description | 87| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 88| navigationId | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | Yes | ID of the **Navigation** component that contains the target **NavDestination** component.| 89| name | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | Yes | Name of the **NavDestination** component.| 90| state | [NavDestinationState](#navdestinationstate) | Yes | State of the **NavDestination** component.| 91| index<sup>12+</sup> | number | Yes | Index of the **NavDestination** component in the navigation stack. | 92| param<sup>12+</sup> | Object | No | Parameters of the **NavDestination** component. | 93| navDestinationId<sup>12+</sup> | string | Yes | Unique ID of the **NavDestination** component. | 94 95## NavigationInfo<sup>12+</sup> 96 97Provides information about the **Navigation** component. 98 99**Atomic service API**: This API can be used in atomic services since API version 12. 100 101**System capability**: SystemCapability.ArkUI.ArkUI.Full 102 103| Name | Type | Mandatory| Description | 104| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 105| navigationId | string | Yes | ID of the **Navigation** component.| 106| pathStack | [NavPathStack](arkui-ts/ts-basic-components-navigation.md#navpathstack10) | Yes | Routing stack of the **Navigation** component. | 107 108## ScrollEventInfo<sup>12+</sup> 109 110Provides the scroll event information. 111 112**Atomic service API**: This API can be used in atomic services since API version 12. 113 114**System capability**: SystemCapability.ArkUI.ArkUI.Full 115 116| Name | Type | Mandatory| Description | 117| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 118| id | string | Yes | ID of the scrollable component. | 119| uniqueId | number | Yes | Unique ID of the scrollable component. | 120| scrollEvent | [ScrollEventType](#scrolleventtype12) | Yes | Type of the scroll event. | 121| offset | number | Yes | Current offset of the scrollable component. | 122 123## ObserverOptions<sup>12+</sup> 124 125Describes the observer options. 126 127**Atomic service API**: This API can be used in atomic services since API version 12. 128 129**System capability**: SystemCapability.ArkUI.ArkUI.Full 130 131| Name | Type | Mandatory| Description | 132| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 133| id | string | Yes | Component ID. | 134 135## RouterPageInfo 136 137Provides the information about a page during routing. 138 139**Atomic service API**: This API can be used in atomic services since API version 12. 140 141**System capability**: SystemCapability.ArkUI.ArkUI.Full 142 143| Name | Type | Mandatory| Description | 144| -------------------- | ------------------------------------------------------------ | ---- | ---------------------------------------------- | 145| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context of the router page that invokes the lifecycle callback.| 146| index | number | Yes | Position of the router page that invokes the lifecycle callback, in the navigation stack. | 147| name | string | Yes | Name of the page that invokes the lifecycle callback. | 148| path | string | Yes | Path of the page that invokes the lifecycle callback. | 149| state | [RouterPageState](#routerpagestate) | Yes | State of the router page that invokes the lifecycle callback. | 150| pageId<sup>12+</sup> | string | Yes | Unique ID of the router page that invokes the lifecycle callback. | 151 152## DensityInfo<sup>12+</sup> 153 154Provides the information contained in the callback when the screen pixel density changes. 155 156**Atomic service API**: This API can be used in atomic services since API version 12. 157 158**System capability**: SystemCapability.ArkUI.ArkUI.Full 159 160| Name | Type | Mandatory| Description | 161| ------- | ----------------------------------------- | ---- | -------------------------------------- | 162| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context corresponding to the page when the screen pixel density changes.| 163| density | number | Yes | Screen pixel density after the change. | 164 165## NavDestinationSwitchInfo<sup>12+</sup> 166 167Provides the information about page switching of the **Navigation** component. 168 169**Atomic service API**: This API can be used in atomic services since API version 12. 170 171**System capability**: SystemCapability.ArkUI.ArkUI.Full 172 173| Name | Type | Mandatory| Description | 174| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 175| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information corresponding to **Navigation** component that triggers page switching.| 176| from | [NavDestinationInfo](#navdestinationinfo) \| [NavBar](./arkui-ts/ts-basic-components-navigation.md#navbar12) | Yes | Source page for page switching. | 177| to | [NavDestinationInfo](#navdestinationinfo) \| [NavBar](./arkui-ts/ts-basic-components-navigation.md#navbar12) | Yes | Destination page for page switching. | 178| operation | [NavigationOperation](./arkui-ts/ts-basic-components-navigation.md#navigationoperation11)| Yes | Page switching operation type. | 179 180## NavDestinationSwitchObserverOptions<sup>12+</sup> 181 182Provides the observer options for the page switching event of the **Navigation** component. 183 184**Atomic service API**: This API can be used in atomic services since API version 12. 185 186**System capability**: SystemCapability.ArkUI.ArkUI.Full 187 188| Name | Type | Mandatory| Description | 189| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 190| navigationId | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | Yes | ID of the target **Navigation** component.| 191 192## TabContentInfo<sup>12+</sup> 193 194Provides the **TabContent** switching information. 195 196**Atomic service API**: This API can be used in atomic services since API version 12. 197 198**System capability**: SystemCapability.ArkUI.ArkUI.Full 199 200| Name | Type | Mandatory| Description | 201| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 202| tabContentId | string | Yes | ID of the **TabContent** component. | 203| tabContentUniqueId | number | Yes | Unique ID of the **TabContent** component. | 204| state | [TabContentState](#tabcontentstate12) | Yes | State of the **TabContent** component. | 205| id | string | Yes | ID of the **Tabs** component. | 206| uniqueId | number | Yes | Unique ID of the **Tabs** component. | 207 208## observer.on('navDestinationUpdate') 209 210on(type: 'navDestinationUpdate', callback: Callback\<NavDestinationInfo\>): void 211 212Subscribes to status changes of the **NavDestination** component. 213 214**Atomic service API**: This API can be used in atomic services since API version 12. 215 216**System capability**: SystemCapability.ArkUI.ArkUI.Full 217 218**Parameters** 219 220| Name | Type | Mandatory| Description | 221| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 222| type | string | Yes | Event type. The value is fixed at **'navDestinationUpdate'**, which indicates the status change event of the **NavDestination** component.| 223| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | Yes | Callback used to return the current state of the **NavDestination** component. | 224 225**Example** 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 237Unsubscribes from status changes of the **NavDestination** component. 238 239**Atomic service API**: This API can be used in atomic services since API version 12. 240 241**System capability**: SystemCapability.ArkUI.ArkUI.Full 242 243**Parameters** 244 245| Name | Type | Mandatory| Description | 246| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 247| type | string | Yes | Event type. The value is fixed at **'navDestinationUpdate'**, which indicates the status change event of the **NavDestination** component.| 248| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | No | Callback used to return the current state of the **NavDestination** component. | 249 250**Example** 251 252```ts 253observer.off('navDestinationUpdate'); 254``` 255 256## observer.on('navDestinationUpdate') 257 258on(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback: Callback\<NavDestinationInfo\>): void 259 260Subscribes to status changes of the **NavDestination** component. 261 262**Atomic service API**: This API can be used in atomic services since API version 12. 263 264**System capability**: SystemCapability.ArkUI.ArkUI.Full 265 266**Parameters** 267 268| Name | Type | Mandatory| Description | 269| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 270| type | string | Yes | Event type. The value is fixed at **'navDestinationUpdate'**, which indicates the status change event of the **NavDestination** component.| 271| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | Yes | ID of the **Navigation** component that contains the target **NavDestination** component. | 272| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | Yes | Callback used to return the current state of the **NavDestination** component. | 273 274**Example** 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 286Unsubscribes from status changes of the **NavDestination** component. 287 288**Atomic service API**: This API can be used in atomic services since API version 12. 289 290**System capability**: SystemCapability.ArkUI.ArkUI.Full 291 292**Parameters** 293 294| Name | Type | Mandatory| Description | 295| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 296| type | string | Yes | Event type. The value is fixed at **'navDestinationUpdate'**, which indicates the status change event of the **NavDestination** component.| 297| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | Yes | ID of the **Navigation** component that contains the target **NavDestination** component. | 298| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | No | Callback used to return the current state of the **NavDestination** component. | 299 300**Example** 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 310Subscribes to the start and end of a scroll event. 311 312**Atomic service API**: This API can be used in atomic services since API version 12. 313 314**System capability**: SystemCapability.ArkUI.ArkUI.Full 315 316**Parameters** 317 318| Name | Type | Mandatory| Description | 319| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 320| type | string | Yes | Event type. The value **'scrollEvent'** indicates the start and end of a scroll event. | 321| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | Yes | Callback used to return the Callback used to return the information about the scroll event. | 322 323**Example** 324 325See the example of [offscrollevent](#observeroffscrollevent12-1). 326 327## observer.off('scrollEvent')<sup>12+</sup> 328 329off(type: 'scrollEvent', callback?: Callback\<ScrollEventInfo\>): void 330 331Unsubscribes from the start and end of a scroll event. 332 333**Atomic service API**: This API can be used in atomic services since API version 12. 334 335**System capability**: SystemCapability.ArkUI.ArkUI.Full 336 337**Parameters** 338 339| Name | Type | Mandatory| Description | 340| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 341| type | string | Yes | Event type. The value **'scrollEvent'** indicates the start and end of a scroll event. | 342| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | No | Callback used to return the Callback used to return the information about the scroll event. | 343 344**Example** 345 346See the example of [offscrollevent](#observeroffscrollevent12-1). 347 348## observer.on('scrollEvent')<sup>12+</sup> 349 350on(type: 'scrollEvent', options: ObserverOptions, callback: Callback\<ScrollEventInfo\>): void 351 352Subscribes to the start and end of a scroll event. 353 354**Atomic service API**: This API can be used in atomic services since API version 12. 355 356**System capability**: SystemCapability.ArkUI.ArkUI.Full 357 358**Parameters** 359 360| Name | Type | Mandatory| Description | 361| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 362| type | string | Yes | Event type. The value **'scrollEvent'** indicates the start and end of a scroll event. | 363| options | [ObserverOptions](#observeroptions12) | Yes | ID of the target scrollable component. | 364| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | Yes | Callback used to return the Callback used to return the information about the scroll event. | 365 366**Example** 367 368See the example of [offscrollevent](#observeroffscrollevent12-1). 369 370## observer.off('scrollEvent')<sup>12+</sup> 371 372off(type: 'scrollEvent', options: ObserverOptions, callback?: Callback\<ScrollEventInfo\>): void 373 374Unsubscribes from the start and end of a scroll event. 375 376**Atomic service API**: This API can be used in atomic services since API version 12. 377 378**System capability**: SystemCapability.ArkUI.ArkUI.Full 379 380**Parameters** 381 382| Name | Type | Mandatory| Description | 383| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 384| type | string | Yes | Event type. The value **'scrollEvent'** indicates the start and end of a scroll event. | 385| options | [ObserverOptions](#observeroptions12) | Yes | ID of the target scrollable component. | 386| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | No | Callback used to return the Callback used to return the information about the scroll event. | 387 388**Example** 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 457Subscribes to state changes of the page during routing. 458 459**Atomic service API**: This API can be used in atomic services since API version 12. 460 461**System capability**: SystemCapability.ArkUI.ArkUI.Full 462 463**Parameters** 464 465| Name | Type | Mandatory| Description | 466| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 467| type | string | Yes | Event type. The value is fixed at **'routerPageUpdate'**, which indicates the state change event of the page during routing.| 468| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for.| 469| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | Yes | Callback used to return the If **pageInfo** is passed, the current page state is returned. | 470 471**Example** 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 // Subscribe to the target events within the scope of the page under the ability context. 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 // Obtain a UIContext instance. 494 this.uiContext = windowInfo.getUIContext(); 495 // Subscribe to the target events within the scope of the page under the UI context. 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 511Unsubscribes to state changes of the page during routing. 512 513**Atomic service API**: This API can be used in atomic services since API version 12. 514 515**System capability**: SystemCapability.ArkUI.ArkUI.Full 516 517**Parameters** 518 519| Name | Type | Mandatory| Description | 520| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 521| type | string | Yes | Event type. The value is fixed at **'routerPageUpdate'**, which indicates the state change event of the page during routing.| 522| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for.| 523| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | No | Callback to be unregistered. | 524 525**Example** 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 // Before actual use, uiContext must be assigned a value. For details, see the example of observer.on('routerPageUpdate'). 534 private uiContext: UIContext | null = null; 535 536 onDestroy(): void { 537 // Unregister all callbacks for the routerPageUpdate event under the current ability context. 538 observer.off('routerPageUpdate', this.context) 539 } 540 541 onWindowStageDestroy(): void { 542 // Unregister all callbacks for the routerPageUpdate event under the UI context. 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 556Subscribes to the pixel density changes of the screen. 557 558**Atomic service API**: This API can be used in atomic services since API version 12. 559 560**System capability**: SystemCapability.ArkUI.ArkUI.Full 561 562**Parameters** 563 564| Name | Type | Mandatory| Description | 565| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 566| type | string | Yes | Event type. The value **'densityUpdate'** indicates the pixel density changes of the screen.| 567| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for.| 568| callback | Callback\<[DensityInfo](#densityinfo12)\> | Yes | Callback used to return the screen pixel density after the change. | 569 570**Example** 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 = 'Listener not registered' 580 581 densityUpdateCallback = (info: observer.DensityInfo) => { 582 this.density = info.density; 583 this.message = 'DPI after change:' + this.density.toString(); 584 } 585 586 build() { 587 Column() { 588 Text(this.message) 589 .fontSize(24) 590 .fontWeight(FontWeight.Bold) 591 Button('Subscribe to Screen Pixel Density Changes') 592 .onClick(() => { 593 this.message = 'Listener registered' 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 605Unsubscribes from the pixel density changes of the screen. 606 607**Atomic service API**: This API can be used in atomic services since API version 12. 608 609**System capability**: SystemCapability.ArkUI.ArkUI.Full 610 611**Parameters** 612 613| Name | Type | Mandatory| Description | 614| -------- | ----------------------------------------- | ---- | ---------------------------------------------------------------------------------------------- | 615| type | string | Yes | Event type. The value **'densityUpdate'** indicates the pixel density changes of the screen. | 616| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for. | 617| callback | Callback\<[DensityInfo](#densityinfo12)\> | No | Callback to be unregistered. If this parameter is not specified, this API unregisters all callbacks for the **densityUpdate** event under the current UI context.| 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 = 'Listener not registered' 627 628 densityUpdateCallback = (info: observer.DensityInfo) => { 629 this.density = info.density; 630 this.message = 'DPI after change:' + this.density.toString(); 631 } 632 633 build() { 634 Column() { 635 Text(this.message) 636 .fontSize(24) 637 .fontWeight(FontWeight.Bold) 638 Button('Subscribe to Screen Pixel Density Changes') 639 .onClick(() => { 640 this.message = 'Listener registered' 641 observer.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 642 }) 643 Button('Unsubscribe from Screen Pixel Density Changes') 644 .onClick(() => { 645 this.message = 'Listener not registered' 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 657Subscribes to the dispatch of drawing instructions in each frame. 658 659**Atomic service API**: This API can be used in atomic services since API version 12. 660 661**System capability**: SystemCapability.ArkUI.ArkUI.Full 662 663**Parameters** 664 665| Name | Type | Mandatory| Description | 666| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 667| type | string | Yes | Event event. The value **'willDraw'** indicates whether drawing is about to occur.| 668| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for.| 669| callback | Callback\<void\> | Yes | Callback used to return the | 670 671**Example** 672 673```ts 674import { uiObserver as observer } from '@kit.ArkUI'; 675 676@Entry 677@Component 678struct Index { 679 willDrawCallback = () => { 680 console.info("willDraw instruction dispatched.") 681 } 682 build() { 683 Column() { 684 Button('Subscribe to Drawing Instruction Dispatch') 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 697Unsubscribes from the dispatch of drawing instructions in each frame. 698 699**Atomic service API**: This API can be used in atomic services since API version 12. 700 701**System capability**: SystemCapability.ArkUI.ArkUI.Full 702 703**Parameters** 704 705| Name | Type | Mandatory| Description | 706| -------- | ----------------------------------------- | ---- | ----------------------------------------------------- | 707| type | string | Yes | Event event. The value **'willDraw'** indicates whether drawing is about to occur.| 708| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for. | 709| callback | Callback\<void\> | No | Callback to be unregistered. | 710 711```ts 712import { uiObserver as observer } from '@kit.ArkUI'; 713 714@Entry 715@Component 716struct Index { 717 willDrawCallback = () => { 718 console.info("willDraw instruction dispatched.") 719 } 720 721 build() { 722 Column() { 723 Button('Subscribe to Drawing Instruction Dispatch') 724 .onClick(() => { 725 observer.on('willDraw', this.getUIContext(), this.willDrawCallback); 726 }) 727 Button('Unsubscribe from Drawing Instruction Dispatch') 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 740Subscribes to layout completion status in each frame. 741 742**Atomic service API**: This API can be used in atomic services since API version 12. 743 744**System capability**: SystemCapability.ArkUI.ArkUI.Full 745 746**Parameters** 747 748| Name | Type | Mandatory| Description | 749| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 750| type | string | Yes | Event type. The value **'didLayout'** indicates whether the layout has been completed.| 751| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for.| 752| callback | Callback\<void\> | Yes | Callback used to return the | 753 754**Example** 755 756```ts 757import { uiObserver as observer } from '@kit.ArkUI'; 758 759@Entry 760@Component 761struct Index { 762 didLayoutCallback = () => { 763 console.info("Layout completed."); 764 } 765 build() { 766 Column() { 767 Button('Subscribe to Layout Completion') 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 780Unsubscribes from layout completion status in each frame. 781 782**Atomic service API**: This API can be used in atomic services since API version 12. 783 784**System capability**: SystemCapability.ArkUI.ArkUI.Full 785 786**Parameters** 787 788| Name | Type | Mandatory| Description | 789| -------- | ----------------------------------------- | ---- | ----------------------------------------------------- | 790| type | string | Yes | Event type. The value **'didLayout'** indicates whether the layout has been completed.| 791| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for. | 792| callback | Callback\<void\> | No | Callback to be unregistered. | 793 794```ts 795import { uiObserver as observer } from '@kit.ArkUI'; 796 797@Entry 798@Component 799struct Index { 800 didLayoutCallback = () => { 801 console.info("Layout completed."); 802 } 803 804 build() { 805 Column() { 806 Button('Subscribe to Layout Completion') 807 .onClick(() => { 808 observer.on('didLayout', this.getUIContext(), this.didLayoutCallback); 809 }) 810 Button('Unsubscribe from Layout Completion') 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 823Subscribes to the page switching event of the **Navigation** component. 824 825**Atomic service API**: This API can be used in atomic services since API version 12. 826 827**System capability**: SystemCapability.ArkUI.ArkUI.Full 828 829**Parameters** 830 831| Name | Type | Mandatory| Description | 832| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 833| type | string | Yes | Event type. The value **'navDestinationSwitch'** indicates the page switching event of the **Navigation** component.| 834| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page switching event to be listened for.| 835| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | Yes | Callback used to return the information about the page switching event. | 836 837**Example** 838 839```ts 840// EntryAbility.ets 841// observer.on('navDestinationSwitch', UIAbilityContext, callback) demo 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) demo 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 949Unsubscribes from the page switching event of the **Navigation** component. 950 951**Atomic service API**: This API can be used in atomic services since API version 12. 952 953**System capability**: SystemCapability.ArkUI.ArkUI.Full 954 955**Parameters** 956 957| Name | Type | Mandatory| Description | 958| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 959| type | string | Yes | Event type. The value **'navDestinationSwitch'** indicates the page switching event of the **Navigation** component.| 960| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page switching event to be listened for.| 961| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | No | Callback to be unregistered. | 962 963**Example** 964 965See the example of [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 971Subscribes to the page switching event of the **Navigation** component. 972 973**Atomic service API**: This API can be used in atomic services since API version 12. 974 975**System capability**: SystemCapability.ArkUI.ArkUI.Full 976 977**Parameters** 978 979| Name | Type | Mandatory| Description | 980| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 981| type | string | Yes | Event type. The value **'navDestinationSwitch'** indicates the page switching event of the **Navigation** component.| 982| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page switching event to be listened for.| 983| observerOptions | [NavDestinationSwitchObserverOptions](#navdestinationswitchobserveroptions12) | Yes | Observer options. | 984| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | Yes | Callback used to return the information about the page switching event. | 985 986**Example** 987 988```ts 989// EntryAbility.ets 990// observer.on('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback) demo 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) demo 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 1099Unsubscribes from the page switching event of the **Navigation** component. 1100 1101**Atomic service API**: This API can be used in atomic services since API version 12. 1102 1103**System capability**: SystemCapability.ArkUI.ArkUI.Full 1104 1105**Parameters** 1106 1107| Name | Type | Mandatory| Description | 1108| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1109| type | string | Yes | Event type. The value **'navDestinationSwitch'** indicates the page switching event of the **Navigation** component.| 1110| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page switching event to be listened for.| 1111| observerOptions | [NavDestinationSwitchObserverOptions](#navdestinationswitchobserveroptions12) | Yes | Observer options. | 1112| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | No | Callback to be unregistered. | 1113 1114**Example** 1115 1116See the example of [observer.on('navDestinationSwitch')](#observeronnavdestinationswitch12-1). 1117 1118## observer.on('tabContentUpdate')<sup>12+</sup> 1119 1120on(type: 'tabContentUpdate', callback: Callback\<TabContentInfo\>): void 1121 1122Subscribes to the **TabContent** switching event. 1123 1124**Atomic service API**: This API can be used in atomic services since API version 12. 1125 1126**System capability**: SystemCapability.ArkUI.ArkUI.Full 1127 1128**Parameters** 1129 1130| Name | Type | Mandatory| Description | 1131| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1132| type | string | Yes | Event type. The value **'tabContentUpdate'** indicates the **TabContent** switching event.| 1133| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | Yes | Callback used to return the information about the **TabContent** switching event.| 1134 1135**Example** 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 1188Unsubscribes from the **TabContent** switching event. 1189 1190**Atomic service API**: This API can be used in atomic services since API version 12. 1191 1192**System capability**: SystemCapability.ArkUI.ArkUI.Full 1193 1194**Parameters** 1195 1196| Name | Type | Mandatory| Description | 1197| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1198| type | string | Yes | Event type. The value **'tabContentUpdate'** indicates the **TabContent** switching event.| 1199| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | No | Callback to be unregistered.| 1200 1201**Example** 1202 1203See the example of [observer.on('tabContentUpdate')](#observerontabcontentupdate12). 1204 1205## observer.on('tabContentUpdate')<sup>12+</sup> 1206 1207on(type: 'tabContentUpdate', options: ObserverOptions, callback: Callback\<TabContentInfo\>): void 1208 1209Subscribes to the **TabContent** switching event. 1210 1211**Atomic service API**: This API can be used in atomic services since API version 12. 1212 1213**System capability**: SystemCapability.ArkUI.ArkUI.Full 1214 1215**Parameters** 1216 1217| Name | Type | Mandatory| Description | 1218| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1219| type | string | Yes | Event type. The value **'tabContentUpdate'** indicates the **TabContent** switching event.| 1220| options | [ObserverOptions](#observeroptions12) | Yes | ID of the target **Tabs** component.| 1221| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | Yes | Callback used to return the information about the **TabContent** switching event.| 1222 1223**Example** 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 1276Unsubscribes from the **TabContent** switching event. 1277 1278**Atomic service API**: This API can be used in atomic services since API version 12. 1279 1280**System capability**: SystemCapability.ArkUI.ArkUI.Full 1281 1282**Parameters** 1283 1284| Name | Type | Mandatory| Description | 1285| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1286| type | string | Yes | Event type. The value **'tabContentUpdate'** indicates the **TabContent** switching event.| 1287| options | [ObserverOptions](#observeroptions12) | Yes | ID of the target **Tabs** component.| 1288| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | No | Callback to be unregistered.| 1289 1290**Example** 1291 1292See the example of [observer.on('tabContentUpdate')](#observerontabcontentupdate12-1). 1293