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 } from '@kit.ArkUI'; 14``` 15 16## NavDestinationState 17 18Describes the state of the **NavDestination** component. 19 20**System capability**: SystemCapability.ArkUI.ArkUI.Full 21 22| Name | Value | Description | 23| --------- | --- | ------------------------ | 24| ON_SHOWN | 0 | The **NavDestination** component is displayed. **Atomic service API**: This API can be used in atomic services since API version 12.| 25| ON_HIDDEN | 1 | The **NavDestination** component is hidden. **Atomic service API**: This API can be used in atomic services since API version 12.| 26| ON_APPEAR<sup>12+</sup> | 2 | The **NavDestination** component is attached to the component tree. **Atomic service API**: This API can be used in atomic services since API version 12.| 27| ON_DISAPPEAR<sup>12+</sup> | 3 | The **NavDestination** component is detached from the component tree. **Atomic service API**: This API can be used in atomic services since API version 12.| 28| ON_WILL_SHOW<sup>12+</sup> | 4 | The **NavDestination** is about to be displayed. **Atomic service API**: This API can be used in atomic services since API version 12.| 29| ON_WILL_HIDE<sup>12+</sup> | 5 | The **NavDestination** component is about to be hidden. **Atomic service API**: This API can be used in atomic services since API version 12.| 30| ON_WILL_APPEAR<sup>12+</sup>| 6 | The **NavDestination** component is about to be mounted to the component tree. **Atomic service API**: This API can be used in atomic services since API version 12.| 31| ON_WILL_DISAPPEAR<sup>12+</sup>| 7 | The **NavDestination** component is about to be unmounted from the component tree. **Atomic service API**: This API can be used in atomic services since API version 12.| 32| ON_ACTIVE<sup>18+</sup> | 8 | The **NavDestination** component is active. **Atomic service API**: This API can be used in atomic services since API version 18.| 33| ON_INACTIVE<sup>18+</sup> | 9 | The **NavDestination** component is inactive. **Atomic service API**: This API can be used in atomic services since API version 18.| 34| ON_BACKPRESS<sup>12+</sup> | 100 | The back button is pressed on the **NavDestination** component. **Atomic service API**: This API can be used in atomic services 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**System capability**: SystemCapability.ArkUI.ArkUI.Full 83 84| Name | Type | Mandatory| Description | 85| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 86| navigationId | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | Yes | ID of the **Navigation** component that contains the target **NavDestination** component.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 87| name | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | Yes | Name of the **NavDestination** component.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 88| state | [NavDestinationState](#navdestinationstate) | Yes | State of the **NavDestination** component.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 89| index<sup>12+</sup> | number | Yes | Index of the **NavDestination** component in the navigation stack.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 90| param<sup>12+</sup> | Object | No | Parameters of the **NavDestination** component.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 91| navDestinationId<sup>12+</sup> | string | Yes | Unique ID of the **NavDestination** component.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 92| mode<sup>15+</sup> | [NavDestinationMode](arkui-ts/ts-basic-components-navdestination.md#navdestinationmode11) | No | Mode of the **NavDestination** component.<br>**Atomic service API**: This API can be used in atomic services since API version 15. | 93| uniqueId<sup>15+</sup> | number | No | Unique ID of the **NavDestination** component.<br>**Atomic service API**: This API can be used in atomic services since API version 15. | 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.<br>Value range: [0, +∞) | 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| index | number | Yes | Index of the **TabContent** component. The index is zero-based. | 206| id | string | Yes | ID of the **Tabs** component. | 207| uniqueId | number | Yes | Unique ID of the **Tabs** component. | 208 209## uiObserver.on('navDestinationUpdate') 210 211on(type: 'navDestinationUpdate', callback: Callback\<NavDestinationInfo\>): void 212 213Subscribes to status changes of the **NavDestination** component. 214 215**Atomic service API**: This API can be used in atomic services since API version 12. 216 217**System capability**: SystemCapability.ArkUI.ArkUI.Full 218 219**Parameters** 220 221| Name | Type | Mandatory| Description | 222| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 223| type | string | Yes | Event type. The value is fixed at **'navDestinationUpdate'**, which indicates the status change event of the **NavDestination** component.| 224| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | Yes | Callback used to return the current state of the **NavDestination** component. | 225 226**Example** 227 228```ts 229// Index.ets 230// Example usage of uiObserver.on('navDestinationUpdate', callback) 231// uiObserver.off('navDestinationUpdate', callback) 232import { uiObserver } from '@kit.ArkUI'; 233 234@Component 235struct PageOne { 236 build() { 237 NavDestination() { 238 Text("pageOne") 239 }.title("pageOne") 240 } 241} 242 243@Entry 244@Component 245struct Index { 246 private stack: NavPathStack = new NavPathStack(); 247 248 @Builder 249 PageBuilder(name: string) { 250 PageOne() 251 } 252 253 aboutToAppear() { 254 uiObserver.on('navDestinationUpdate', (info) => { 255 console.info('NavDestination state update', JSON.stringify(info)); 256 }); 257 } 258 259 aboutToDisappear() { 260 uiObserver.off('navDestinationUpdate'); 261 } 262 263 build() { 264 Column() { 265 Navigation(this.stack) { 266 Button("push").onClick(() => { 267 this.stack.pushPath({ name: "pageOne" }); 268 }) 269 } 270 .title("Navigation") 271 .navDestination(this.PageBuilder) 272 } 273 .width('100%') 274 .height('100%') 275 } 276} 277``` 278 279## uiObserver.off('navDestinationUpdate') 280 281off(type: 'navDestinationUpdate', callback?: Callback\<NavDestinationInfo\>): void 282 283Unsubscribes from status changes of the **NavDestination** component. 284 285**Atomic service API**: This API can be used in atomic services since API version 12. 286 287**System capability**: SystemCapability.ArkUI.ArkUI.Full 288 289**Parameters** 290 291| Name | Type | Mandatory| Description | 292| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 293| type | string | Yes | Event type. The value is fixed at **'navDestinationUpdate'**, which indicates the status change event of the **NavDestination** component.| 294| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | No | Callback used to return the current state of the **NavDestination** component. | 295 296**Example** 297 298See the example for [uiObserver.on('navDestinationUpdate')](#uiobserveronnavdestinationupdate). 299 300## uiObserver.on('navDestinationUpdate') 301 302on(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback: Callback\<NavDestinationInfo\>): void 303 304Subscribes to status changes of the **NavDestination** component. 305 306**Atomic service API**: This API can be used in atomic services since API version 12. 307 308**System capability**: SystemCapability.ArkUI.ArkUI.Full 309 310**Parameters** 311 312| Name | Type | Mandatory| Description | 313| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 314| type | string | Yes | Event type. The value is fixed at **'navDestinationUpdate'**, which indicates the status change event of the **NavDestination** component.| 315| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | Yes | ID of the **Navigation** component that contains the target **NavDestination** component. | 316| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | Yes | Callback used to return the current state of the **NavDestination** component. | 317 318**Example** 319 320```ts 321// Index.ets 322// Example usage of uiObserver.on('navDestinationUpdate', navigationId, callback) 323// uiObserver.off('navDestinationUpdate', navigationId, callback) 324import { uiObserver } from '@kit.ArkUI'; 325 326@Component 327struct PageOne { 328 build() { 329 NavDestination() { 330 Text("pageOne") 331 }.title("pageOne") 332 } 333} 334 335@Entry 336@Component 337struct Index { 338 private stack: NavPathStack = new NavPathStack(); 339 340 @Builder 341 PageBuilder(name: string) { 342 PageOne() 343 } 344 345 aboutToAppear() { 346 uiObserver.on('navDestinationUpdate', { navigationId: "testId" }, (info) => { 347 console.info('NavDestination state update', JSON.stringify(info)); 348 }); 349 } 350 351 aboutToDisappear() { 352 uiObserver.off('navDestinationUpdate', { navigationId: "testId" }); 353 } 354 355 build() { 356 Column() { 357 Navigation(this.stack) { 358 Button("push").onClick(() => { 359 this.stack.pushPath({ name: "pageOne" }); 360 }) 361 } 362 .id("testId") 363 .title("Navigation") 364 .navDestination(this.PageBuilder) 365 } 366 .width('100%') 367 .height('100%') 368 } 369} 370``` 371 372## uiObserver.off('navDestinationUpdate') 373 374off(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback?: Callback\<NavDestinationInfo\>): void 375 376Unsubscribes from status changes of the **NavDestination** component. 377 378**Atomic service API**: This API can be used in atomic services since API version 12. 379 380**System capability**: SystemCapability.ArkUI.ArkUI.Full 381 382**Parameters** 383 384| Name | Type | Mandatory| Description | 385| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 386| type | string | Yes | Event type. The value is fixed at **'navDestinationUpdate'**, which indicates the status change event of the **NavDestination** component.| 387| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | Yes | ID of the **Navigation** component that contains the target **NavDestination** component. | 388| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | No | Callback used to return the current state of the **NavDestination** component. | 389 390**Example** 391 392See the example for [uiObserver.on('navDestinationUpdate')](#uiobserveronnavdestinationupdate-1). 393 394## uiObserver.on('scrollEvent')<sup>12+</sup> 395 396on(type: 'scrollEvent', callback: Callback\<ScrollEventInfo\>): void 397 398Subscribes to the start and end of a scroll event. 399 400**Atomic service API**: This API can be used in atomic services since API version 12. 401 402**System capability**: SystemCapability.ArkUI.ArkUI.Full 403 404**Parameters** 405 406| Name | Type | Mandatory| Description | 407| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 408| type | string | Yes | Event type. The value **'scrollEvent'** indicates the start and end of a scroll event. | 409| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | Yes | Callback used to return the Callback used to return the information about the scroll event. | 410 411**Example** 412 413See the example for [offscrollevent](#uiobserveroffscrollevent12-1). 414 415## uiObserver.off('scrollEvent')<sup>12+</sup> 416 417off(type: 'scrollEvent', callback?: Callback\<ScrollEventInfo\>): void 418 419Unsubscribes from the start and end of a scroll event. 420 421**Atomic service API**: This API can be used in atomic services since API version 12. 422 423**System capability**: SystemCapability.ArkUI.ArkUI.Full 424 425**Parameters** 426 427| Name | Type | Mandatory| Description | 428| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 429| type | string | Yes | Event type. The value **'scrollEvent'** indicates the start and end of a scroll event. | 430| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | No | Callback used to return the Callback used to return the information about the scroll event. | 431 432**Example** 433 434See the example for [offscrollevent](#uiobserveroffscrollevent12-1). 435 436## uiObserver.on('scrollEvent')<sup>12+</sup> 437 438on(type: 'scrollEvent', options: ObserverOptions, callback: Callback\<ScrollEventInfo\>): void 439 440Subscribes to the start and end of a scroll event. 441 442**Atomic service API**: This API can be used in atomic services since API version 12. 443 444**System capability**: SystemCapability.ArkUI.ArkUI.Full 445 446**Parameters** 447 448| Name | Type | Mandatory| Description | 449| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 450| type | string | Yes | Event type. The value **'scrollEvent'** indicates the start and end of a scroll event. | 451| options | [ObserverOptions](#observeroptions12) | Yes | ID of the target scrollable component. | 452| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | Yes | Callback used to return the Callback used to return the information about the scroll event. | 453 454**Example** 455 456See the example for [offscrollevent](#uiobserveroffscrollevent12-1). 457 458## uiObserver.off('scrollEvent')<sup>12+</sup> 459 460off(type: 'scrollEvent', options: ObserverOptions, callback?: Callback\<ScrollEventInfo\>): void 461 462Unsubscribes from the start and end of a scroll event. 463 464**Atomic service API**: This API can be used in atomic services since API version 12. 465 466**System capability**: SystemCapability.ArkUI.ArkUI.Full 467 468**Parameters** 469 470| Name | Type | Mandatory| Description | 471| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 472| type | string | Yes | Event type. The value **'scrollEvent'** indicates the start and end of a scroll event. | 473| options | [ObserverOptions](#observeroptions12) | Yes | ID of the target scrollable component. | 474| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | No | Callback used to return the Callback used to return the information about the scroll event. | 475 476**Example** 477 478```ts 479import { uiObserver } from '@kit.ArkUI' 480 481@Entry 482@Component 483struct Index { 484 scroller: Scroller = new Scroller(); 485 options: uiObserver.ObserverOptions = { id: "testId" }; 486 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7] 487 488 build() { 489 Column() { 490 Column() { 491 Scroll(this.scroller) { 492 Column() { 493 ForEach(this.arr, (item: number) => { 494 Text(item.toString()) 495 .width('90%') 496 .height(150) 497 .backgroundColor(0xFFFFFF) 498 .borderRadius(15) 499 .fontSize(16) 500 .textAlign(TextAlign.Center) 501 .margin({ top: 10 }) 502 }, (item: string) => item) 503 }.width('100%') 504 } 505 .id("testId") 506 .height('80%') 507 } 508 .width('100%') 509 510 Row() { 511 Button('UIObserver on') 512 .onClick(() => { 513 uiObserver.on('scrollEvent', (info) => { 514 console.info('scrollEventInfo', JSON.stringify(info)); 515 }); 516 }) 517 Button('UIObserver off') 518 .onClick(() => { 519 uiObserver.off('scrollEvent'); 520 }) 521 } 522 523 Row() { 524 Button('UIObserverWithId on') 525 .onClick(() => { 526 uiObserver.on('scrollEvent', this.options, (info) => { 527 console.info('scrollEventInfo', JSON.stringify(info)); 528 }); 529 }) 530 Button('UIObserverWithId off') 531 .onClick(() => { 532 uiObserver.off('scrollEvent', this.options); 533 }) 534 } 535 } 536 .height('100%') 537 } 538} 539``` 540 541## uiObserver.on('routerPageUpdate')<sup>11+</sup> 542 543on(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback: Callback\<RouterPageInfo\>): void 544 545Subscribes to state changes of the page during routing. 546 547**Atomic service API**: This API can be used in atomic services since API version 12. 548 549**System capability**: SystemCapability.ArkUI.ArkUI.Full 550 551**Parameters** 552 553| Name | Type | Mandatory| Description | 554| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 555| type | string | Yes | Event type. The value is fixed at **'routerPageUpdate'**, which indicates the state change event of the page during routing.| 556| 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.| 557| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | Yes | Callback used to return the If **pageInfo** is passed, the current page state is returned. | 558 559**Example** 560 561```ts 562// used in UIAbility 563import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 564import { UIContext, window, uiObserver } from '@kit.ArkUI'; 565import { BusinessError } from '@kit.BasicServicesKit'; 566 567export default class EntryAbility extends UIAbility { 568 private uiContext: UIContext | null = null; 569 570 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 571 // Subscribe to the target events within the scope of the page under the ability context. 572 uiObserver.on('routerPageUpdate', this.context, (info: uiObserver.RouterPageInfo) => { 573 console.info('[uiObserver][abilityContext] got info: ' + JSON.stringify(info)) 574 }) 575 } 576 577 onWindowStageCreate(windowStage: window.WindowStage): void { 578 windowStage.loadContent('pages/Index', (err) => { 579 windowStage.getMainWindow((err: BusinessError, data) => { 580 let windowInfo: window.Window = data; 581 // Obtain a UIContext instance. 582 this.uiContext = windowInfo.getUIContext(); 583 // Subscribe to the target events within the scope of the page under the UI context. 584 uiObserver.on('routerPageUpdate', this.uiContext, (info: uiObserver.RouterPageInfo)=>{ 585 console.info('[uiObserver][uiContext] got info: ' + JSON.stringify(info)) 586 }) 587 }) 588 }); 589 } 590 591 // ... other function in EntryAbility 592} 593``` 594 595## uiObserver.off('routerPageUpdate')<sup>11+</sup> 596 597off(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback?: Callback\<RouterPageInfo\>): void 598 599Unsubscribes to state changes of the page during routing. 600 601**Atomic service API**: This API can be used in atomic services since API version 12. 602 603**System capability**: SystemCapability.ArkUI.ArkUI.Full 604 605**Parameters** 606 607| Name | Type | Mandatory| Description | 608| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 609| type | string | Yes | Event type. The value is fixed at **'routerPageUpdate'**, which indicates the state change event of the page during routing.| 610| 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.| 611| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | No | Callback to be unregistered. | 612 613**Example** 614 615```ts 616// used in UIAbility 617import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 618import { uiObserver, UIContext } from '@kit.ArkUI'; 619 620export default class EntryAbility extends UIAbility { 621 // Before actual use, uiContext must be assigned a value. For details, see the example for uiObserver.on('routerPageUpdate'). 622 private uiContext: UIContext | null = null; 623 624 onDestroy(): void { 625 // Unregister all callbacks for the routerPageUpdate event under the current ability context. 626 uiObserver.off('routerPageUpdate', this.context) 627 } 628 629 onWindowStageDestroy(): void { 630 // Unregister all callbacks for the routerPageUpdate event under the UI context. 631 if (this.uiContext) { 632 uiObserver.off('routerPageUpdate', this.uiContext); 633 } 634 } 635 636 // ... other function in EntryAbility 637} 638``` 639 640## uiObserver.on('densityUpdate')<sup>12+</sup> 641 642on(type: 'densityUpdate', context: UIContext, callback: Callback\<DensityInfo\>): void 643 644Subscribes to the pixel density changes of the screen. 645 646**Atomic service API**: This API can be used in atomic services since API version 12. 647 648**System capability**: SystemCapability.ArkUI.ArkUI.Full 649 650**Parameters** 651 652| Name | Type | Mandatory| Description | 653| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 654| type | string | Yes | Event type. The value **'densityUpdate'** indicates the pixel density changes of the screen.| 655| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for.| 656| callback | Callback\<[DensityInfo](#densityinfo12)\> | Yes | Callback used to return the screen pixel density after the change. | 657 658**Example** 659 660```ts 661import { uiObserver } from '@kit.ArkUI'; 662 663@Entry 664@Component 665struct Index { 666 @State density: number = 0; 667 @State message: string = 'Listener not registered' 668 669 densityUpdateCallback = (info: uiObserver.DensityInfo) => { 670 this.density = info.density; 671 this.message = 'DPI after change:' + this.density.toString(); 672 } 673 674 build() { 675 Column() { 676 Text(this.message) 677 .fontSize(24) 678 .fontWeight(FontWeight.Bold) 679 Button ('Subscribe to Screen Pixel Density Changes') 680 .onClick(() => { 681 this.message = 'Listener registered' 682 uiObserver.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 683 }) 684 } 685 } 686} 687``` 688 689## uiObserver.off('densityUpdate')<sup>12+</sup> 690 691off(type: 'densityUpdate', context: UIContext, callback?: Callback\<DensityInfo\>): void 692 693Unsubscribes from the pixel density changes of the screen. 694 695**Atomic service API**: This API can be used in atomic services since API version 12. 696 697**System capability**: SystemCapability.ArkUI.ArkUI.Full 698 699**Parameters** 700 701| Name | Type | Mandatory| Description | 702| -------- | ----------------------------------------- | ---- | ---------------------------------------------------------------------------------------------- | 703| type | string | Yes | Event type. The value **'densityUpdate'** indicates the pixel density changes of the screen. | 704| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for. | 705| 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.| 706 707```ts 708import { uiObserver, UIContext } from '@kit.ArkUI'; 709 710@Entry 711@Component 712struct Index { 713 @State density: number = 0; 714 @State message: string = 'Listener not registered' 715 716 densityUpdateCallback = (info: uiObserver.DensityInfo) => { 717 this.density = info.density; 718 this.message = 'DPI after change:' + this.density.toString(); 719 } 720 721 build() { 722 Column() { 723 Text(this.message) 724 .fontSize(24) 725 .fontWeight(FontWeight.Bold) 726 Button ('Subscribe to Screen Pixel Density Changes') 727 .margin({ bottom: 10 }) 728 .onClick(() => { 729 this.message = 'Listener registered' 730 uiObserver.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 731 }) 732 Button ('Unsubscribe from Screen Pixel Density Changes') 733 .onClick(() => { 734 this.message = 'Listener not registered' 735 uiObserver.off('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 736 }) 737 } 738 } 739} 740``` 741 742## uiObserver.on('willDraw')<sup>12+</sup> 743 744on(type: 'willDraw', context: UIContext, callback: Callback\<void\>): void 745 746Subscribes to the dispatch of drawing instructions in each frame. 747 748**Atomic service API**: This API can be used in atomic services since API version 12. 749 750**System capability**: SystemCapability.ArkUI.ArkUI.Full 751 752**Parameters** 753 754| Name | Type | Mandatory| Description | 755| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 756| type | string | Yes | Event event. The value **'willDraw'** indicates whether drawing is about to occur.| 757| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for.| 758| callback | Callback\<void\> | Yes | Callback used to return the | 759 760**Example** 761 762```ts 763import { uiObserver } from '@kit.ArkUI'; 764 765@Entry 766@Component 767struct Index { 768 willDrawCallback = () => { 769 console.info("willDraw instruction dispatched.") 770 } 771 build() { 772 Column() { 773 Button('Subscribe to Drawing Instruction Dispatch') 774 .onClick(() => { 775 uiObserver.on('willDraw', this.getUIContext(), this.willDrawCallback); 776 }) 777 } 778 } 779} 780``` 781 782## uiObserver.off('willDraw')<sup>12+</sup> 783 784off(type: 'willDraw', context: UIContext, callback?: Callback\<void\>): void 785 786Unsubscribes from the dispatch of drawing instructions in each frame. 787 788**Atomic service API**: This API can be used in atomic services since API version 12. 789 790**System capability**: SystemCapability.ArkUI.ArkUI.Full 791 792**Parameters** 793 794| Name | Type | Mandatory| Description | 795| -------- | ----------------------------------------- | ---- | ----------------------------------------------------- | 796| type | string | Yes | Event event. The value **'willDraw'** indicates whether drawing is about to occur.| 797| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for. | 798| callback | Callback\<void\> | No | Callback to be unregistered. | 799 800```ts 801import { uiObserver } from '@kit.ArkUI'; 802 803@Entry 804@Component 805struct Index { 806 willDrawCallback = () => { 807 console.info("willDraw instruction dispatched.") 808 } 809 810 build() { 811 Column() { 812 Button('Subscribe to Drawing Instruction Dispatch') 813 .margin({ bottom: 10 }) 814 .onClick(() => { 815 uiObserver.on('willDraw', this.getUIContext(), this.willDrawCallback); 816 }) 817 Button('Unsubscribe from Drawing Instruction Dispatch') 818 .onClick(() => { 819 uiObserver.off('willDraw', this.getUIContext(), this.willDrawCallback); 820 }) 821 } 822 } 823} 824``` 825 826## uiObserver.on('didLayout')<sup>12+</sup> 827 828on(type: 'didLayout', context: UIContext, callback: Callback\<void\>): void 829 830Subscribes to layout completion status in each frame. 831 832**Atomic service API**: This API can be used in atomic services since API version 12. 833 834**System capability**: SystemCapability.ArkUI.ArkUI.Full 835 836**Parameters** 837 838| Name | Type | Mandatory| Description | 839| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 840| type | string | Yes | Event type. The value **'didLayout'** indicates whether the layout has been completed.| 841| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for.| 842| callback | Callback\<void\> | Yes | Callback used to return the | 843 844**Example** 845 846```ts 847import { uiObserver } from '@kit.ArkUI'; 848 849@Entry 850@Component 851struct Index { 852 didLayoutCallback = () => { 853 console.info("Layout completed."); 854 } 855 build() { 856 Column() { 857 Button('Subscribe to Layout Completion') 858 .onClick(() => { 859 uiObserver.on('didLayout', this.getUIContext(), this.didLayoutCallback); 860 }) 861 } 862 } 863} 864``` 865 866## uiObserver.off('didLayout')<sup>12+</sup> 867 868off(type: 'didLayout', context: UIContext, callback?: Callback\<void\>): void 869 870Unsubscribes from layout completion status in each frame. 871 872**Atomic service API**: This API can be used in atomic services since API version 12. 873 874**System capability**: SystemCapability.ArkUI.ArkUI.Full 875 876**Parameters** 877 878| Name | Type | Mandatory| Description | 879| -------- | ----------------------------------------- | ---- | ----------------------------------------------------- | 880| type | string | Yes | Event type. The value **'didLayout'** indicates whether the layout has been completed.| 881| context | [UIContext](./js-apis-arkui-UIContext.md) | Yes | Context information, which is used to specify the scope of the page to be listened for. | 882| callback | Callback\<void\> | No | Callback to be unregistered. | 883 884```ts 885import { uiObserver } from '@kit.ArkUI'; 886 887@Entry 888@Component 889struct Index { 890 didLayoutCallback = () => { 891 console.info("Layout completed."); 892 } 893 894 build() { 895 Column() { 896 Button('Subscribe to Layout Completion') 897 .margin({ bottom: 10 }) 898 .onClick(() => { 899 uiObserver.on('didLayout', this.getUIContext(), this.didLayoutCallback); 900 }) 901 Button ('Unsubscribe from Layout Completion') 902 .onClick(() => { 903 uiObserver.off('didLayout', this.getUIContext(), this.didLayoutCallback); 904 }) 905 } 906 } 907} 908``` 909 910## uiObserver.on('navDestinationSwitch')<sup>12+</sup> 911 912on(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, callback: Callback\<NavDestinationSwitchInfo\>): void 913 914Subscribes to the page switching event of the **Navigation** component. 915 916**Atomic service API**: This API can be used in atomic services since API version 12. 917 918**System capability**: SystemCapability.ArkUI.ArkUI.Full 919 920**Parameters** 921 922| Name | Type | Mandatory| Description | 923| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 924| type | string | Yes | Event type. The value **'navDestinationSwitch'** indicates the page switching event of the **Navigation** component.| 925| 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.| 926| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | Yes | Callback used to return the information about the page switching event. | 927 928**Example** 929 930```ts 931// EntryAbility.ets 932// Example usage of uiObserver.on('navDestinationSwitch', UIAbilityContext, callback) 933// uiObserver.off('navDestinationSwitch', UIAbilityContext, callback) 934import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 935import { uiObserver, window } from '@kit.ArkUI'; 936import { hilog } from "@kit.PerformanceAnalysisKit" 937 938function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) { 939 console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`) 940} 941 942export default class EntryAbility extends UIAbility { 943 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 944 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 945 uiObserver.on('navDestinationSwitch', this.context, callBackFunc); 946 } 947 948 onDestroy(): void { 949 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 950 uiObserver.off('navDestinationSwitch', this.context, callBackFunc); 951 } 952 953 onWindowStageCreate(windowStage: window.WindowStage): void { 954 // Main window is created, set main page for this ability 955 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 956 957 windowStage.loadContent('pages/Index', (err, data) => { 958 if (err.code) { 959 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 960 return; 961 } 962 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); 963 }); 964 } 965 966 onWindowStageDestroy(): void { 967 // Main window is destroyed, release UI related resources 968 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 969 } 970 971 onForeground(): void { 972 // Ability has brought to foreground 973 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 974 } 975 976 onBackground(): void { 977 // Ability has back to background 978 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 979 } 980} 981``` 982 983```ts 984// Index.ets 985// Example usage of uiObserver.on('navDestinationSwitch', UIContext, callback) 986// uiObserver.off('navDestinationSwitch', UIContext, callback) 987import { uiObserver } from '@kit.ArkUI'; 988 989@Component 990struct PageOne { 991 build() { 992 NavDestination() { 993 Text("pageOne") 994 }.title("pageOne") 995 } 996} 997 998function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) { 999 console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`) 1000} 1001 1002@Entry 1003@Component 1004struct Index { 1005 private stack: NavPathStack = new NavPathStack(); 1006 1007 @Builder 1008 PageBuilder(name: string) { 1009 PageOne() 1010 } 1011 1012 aboutToAppear() { 1013 uiObserver.on('navDestinationSwitch', this.getUIContext(), callBackFunc) 1014 } 1015 1016 aboutToDisappear() { 1017 uiObserver.off('navDestinationSwitch', this.getUIContext(), callBackFunc) 1018 } 1019 1020 build() { 1021 Column() { 1022 Navigation(this.stack) { 1023 Button("push").onClick(() => { 1024 this.stack.pushPath({ name: "pageOne" }); 1025 }) 1026 } 1027 .title("Navigation") 1028 .navDestination(this.PageBuilder) 1029 } 1030 .width('100%') 1031 .height('100%') 1032 } 1033} 1034``` 1035 1036## uiObserver.off('navDestinationSwitch')<sup>12+</sup> 1037 1038off(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, callback?: Callback\<NavDestinationSwitchInfo\>): void 1039 1040Unsubscribes from the page switching event of the **Navigation** component. 1041 1042**Atomic service API**: This API can be used in atomic services since API version 12. 1043 1044**System capability**: SystemCapability.ArkUI.ArkUI.Full 1045 1046**Parameters** 1047 1048| Name | Type | Mandatory| Description | 1049| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1050| type | string | Yes | Event type. The value **'navDestinationSwitch'** indicates the page switching event of the **Navigation** component.| 1051| 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.| 1052| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | No | Callback to be unregistered. | 1053 1054**Example** 1055 1056See the example for [uiObserver.on('navDestinationSwitch')](#uiobserveronnavdestinationswitch12). 1057 1058## uiObserver.on('navDestinationSwitch')<sup>12+</sup> 1059 1060on(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback: Callback\<NavDestinationSwitchInfo\>): void 1061 1062Subscribes to the page switching event of the **Navigation** component. 1063 1064**Atomic service API**: This API can be used in atomic services since API version 12. 1065 1066**System capability**: SystemCapability.ArkUI.ArkUI.Full 1067 1068**Parameters** 1069 1070| Name | Type | Mandatory| Description | 1071| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1072| type | string | Yes | Event type. The value **'navDestinationSwitch'** indicates the page switching event of the **Navigation** component.| 1073| 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.| 1074| observerOptions | [NavDestinationSwitchObserverOptions](#navdestinationswitchobserveroptions12) | Yes | Observer options. | 1075| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | Yes | Callback used to return the information about the page switching event. | 1076 1077**Example** 1078 1079```ts 1080// EntryAbility.ets 1081// Example usage of uiObserver.on('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback) 1082// uiObserver.off('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback) 1083import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 1084import { uiObserver, window } from '@kit.ArkUI'; 1085import { hilog } from "@kit.PerformanceAnalysisKit" 1086 1087function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) { 1088 console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`) 1089} 1090 1091export default class EntryAbility extends UIAbility { 1092 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 1093 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 1094 uiObserver.on('navDestinationSwitch', this.context, { 1095 navigationId: "myNavId" 1096 }, callBackFunc); 1097 } 1098 1099 onDestroy(): void { 1100 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 1101 uiObserver.off('navDestinationSwitch', this.context, { 1102 navigationId: "myNavId" 1103 }, callBackFunc); 1104 } 1105 1106 onWindowStageCreate(windowStage: window.WindowStage): void { 1107 // Main window is created, set main page for this ability 1108 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 1109 1110 windowStage.loadContent('pages/Index', (err, data) => { 1111 if (err.code) { 1112 hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 1113 return; 1114 } 1115 hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); 1116 }); 1117 } 1118 1119 onWindowStageDestroy(): void { 1120 // Main window is destroyed, release UI related resources 1121 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 1122 } 1123 1124 onForeground(): void { 1125 // Ability has brought to foreground 1126 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 1127 } 1128 1129 onBackground(): void { 1130 // Ability has back to background 1131 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 1132 } 1133} 1134``` 1135 1136```ts 1137// Index.ets 1138// Example usage of uiObserver.on('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback) 1139// uiObserver.off('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback) 1140import { uiObserver } from '@kit.ArkUI'; 1141 1142@Component 1143struct PageOne { 1144 build() { 1145 NavDestination() { 1146 Text("pageOne") 1147 }.title("pageOne") 1148 } 1149} 1150 1151function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) { 1152 console.info(`testTag navDestinationSwitch from: ${JSON.stringify(info.from)} to: ${JSON.stringify(info.to)}`) 1153} 1154 1155@Entry 1156@Component 1157struct Index { 1158 private stack: NavPathStack = new NavPathStack(); 1159 1160 @Builder 1161 PageBuilder(name: string) { 1162 PageOne() 1163 } 1164 1165 aboutToAppear() { 1166 uiObserver.on('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc) 1167 } 1168 1169 aboutToDisappear() { 1170 uiObserver.off('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc) 1171 } 1172 1173 build() { 1174 Column() { 1175 Navigation(this.stack) { 1176 Button("push").onClick(() => { 1177 this.stack.pushPath({ name: "pageOne" }); 1178 }) 1179 } 1180 .id("myNavId") 1181 .title("Navigation") 1182 .navDestination(this.PageBuilder) 1183 } 1184 .width('100%') 1185 .height('100%') 1186 } 1187} 1188``` 1189 1190## uiObserver.off('navDestinationSwitch')<sup>12+</sup> 1191 1192off(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback?: Callback\<NavDestinationSwitchInfo\>): void 1193 1194Unsubscribes from the page switching event of the **Navigation** component. 1195 1196**Atomic service API**: This API can be used in atomic services since API version 12. 1197 1198**System capability**: SystemCapability.ArkUI.ArkUI.Full 1199 1200**Parameters** 1201 1202| Name | Type | Mandatory| Description | 1203| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1204| type | string | Yes | Event type. The value **'navDestinationSwitch'** indicates the page switching event of the **Navigation** component.| 1205| 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.| 1206| observerOptions | [NavDestinationSwitchObserverOptions](#navdestinationswitchobserveroptions12) | Yes | Observer options. | 1207| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | No | Callback to be unregistered. | 1208 1209**Example** 1210 1211See the example for [uiObserver.on('navDestinationSwitch')](#uiobserveronnavdestinationswitch12-1). 1212 1213## uiObserver.on('tabContentUpdate')<sup>12+</sup> 1214 1215on(type: 'tabContentUpdate', callback: Callback\<TabContentInfo\>): void 1216 1217Subscribes to the **TabContent** switching event. 1218 1219**Atomic service API**: This API can be used in atomic services since API version 12. 1220 1221**System capability**: SystemCapability.ArkUI.ArkUI.Full 1222 1223**Parameters** 1224 1225| Name | Type | Mandatory| Description | 1226| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1227| type | string | Yes | Event type. The value **'tabContentUpdate'** indicates the **TabContent** switching event.| 1228| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | Yes | Callback used to return the information about the **TabContent** switching event.| 1229 1230**Example** 1231 1232```ts 1233import { uiObserver } from '@kit.ArkUI'; 1234 1235function callbackFunc(info: uiObserver.TabContentInfo) { 1236 console.info('tabContentUpdate', JSON.stringify(info)); 1237} 1238 1239@Entry 1240@Component 1241struct TabsExample { 1242 1243 aboutToAppear(): void { 1244 uiObserver.on('tabContentUpdate', callbackFunc); 1245 } 1246 1247 aboutToDisappear(): void { 1248 uiObserver.off('tabContentUpdate', callbackFunc); 1249 } 1250 1251 build() { 1252 Column() { 1253 Tabs() { 1254 TabContent() { 1255 Column().width('100%').height('100%').backgroundColor('#00CB87') 1256 }.tabBar('green').id('tabContentId0') 1257 1258 TabContent() { 1259 Column().width('100%').height('100%').backgroundColor('#007DFF') 1260 }.tabBar('blue').id('tabContentId1') 1261 1262 TabContent() { 1263 Column().width('100%').height('100%').backgroundColor('#FFBF00') 1264 }.tabBar('yellow').id('tabContentId2') 1265 1266 TabContent() { 1267 Column().width('100%').height('100%').backgroundColor('#E67C92') 1268 }.tabBar('pink').id('tabContentId3') 1269 } 1270 .width(360) 1271 .height(296) 1272 .backgroundColor('#F1F3F5') 1273 .id('tabsId') 1274 }.width('100%') 1275 } 1276} 1277``` 1278 1279## uiObserver.off('tabContentUpdate')<sup>12+</sup> 1280 1281off(type: 'tabContentUpdate', callback?: Callback\<TabContentInfo\>): void 1282 1283Unsubscribes from the **TabContent** switching event. 1284 1285**Atomic service API**: This API can be used in atomic services since API version 12. 1286 1287**System capability**: SystemCapability.ArkUI.ArkUI.Full 1288 1289**Parameters** 1290 1291| Name | Type | Mandatory| Description | 1292| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1293| type | string | Yes | Event type. The value **'tabContentUpdate'** indicates the **TabContent** switching event.| 1294| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | No | Callback to be unregistered.| 1295 1296**Example** 1297 1298See the example for [uiObserver.on('tabContentUpdate')](#uiobserverontabcontentupdate12). 1299 1300## uiObserver.on('tabContentUpdate')<sup>12+</sup> 1301 1302on(type: 'tabContentUpdate', options: ObserverOptions, callback: Callback\<TabContentInfo\>): void 1303 1304Subscribes to the **TabContent** switching event. 1305 1306**Atomic service API**: This API can be used in atomic services since API version 12. 1307 1308**System capability**: SystemCapability.ArkUI.ArkUI.Full 1309 1310**Parameters** 1311 1312| Name | Type | Mandatory| Description | 1313| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1314| type | string | Yes | Event type. The value **'tabContentUpdate'** indicates the **TabContent** switching event.| 1315| options | [ObserverOptions](#observeroptions12) | Yes | ID of the target **Tabs** component.| 1316| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | Yes | Callback used to return the information about the **TabContent** switching event.| 1317 1318**Example** 1319 1320```ts 1321import { uiObserver } from '@kit.ArkUI'; 1322 1323function callbackFunc(info: uiObserver.TabContentInfo) { 1324 console.info('tabContentUpdate', JSON.stringify(info)); 1325} 1326 1327@Entry 1328@Component 1329struct TabsExample { 1330 1331 aboutToAppear(): void { 1332 uiObserver.on('tabContentUpdate', { id: 'tabsId' }, callbackFunc); 1333 } 1334 1335 aboutToDisappear(): void { 1336 uiObserver.off('tabContentUpdate', { id: 'tabsId' }, callbackFunc); 1337 } 1338 1339 build() { 1340 Column() { 1341 Tabs() { 1342 TabContent() { 1343 Column().width('100%').height('100%').backgroundColor('#00CB87') 1344 }.tabBar('green').id('tabContentId0') 1345 1346 TabContent() { 1347 Column().width('100%').height('100%').backgroundColor('#007DFF') 1348 }.tabBar('blue').id('tabContentId1') 1349 1350 TabContent() { 1351 Column().width('100%').height('100%').backgroundColor('#FFBF00') 1352 }.tabBar('yellow').id('tabContentId2') 1353 1354 TabContent() { 1355 Column().width('100%').height('100%').backgroundColor('#E67C92') 1356 }.tabBar('pink').id('tabContentId3') 1357 } 1358 .width(360) 1359 .height(296) 1360 .backgroundColor('#F1F3F5') 1361 .id('tabsId') 1362 }.width('100%') 1363 } 1364} 1365``` 1366 1367## uiObserver.off('tabContentUpdate')<sup>12+</sup> 1368 1369off(type: 'tabContentUpdate', options: ObserverOptions, callback?: Callback\<TabContentInfo\>): void 1370 1371Unsubscribes from the **TabContent** switching event. 1372 1373**Atomic service API**: This API can be used in atomic services since API version 12. 1374 1375**System capability**: SystemCapability.ArkUI.ArkUI.Full 1376 1377**Parameters** 1378 1379| Name | Type | Mandatory| Description | 1380| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1381| type | string | Yes | Event type. The value **'tabContentUpdate'** indicates the **TabContent** switching event.| 1382| options | [ObserverOptions](#observeroptions12) | Yes | ID of the target **Tabs** component.| 1383| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | No | Callback to be unregistered.| 1384 1385**Example** 1386 1387See the example for [uiObserver.on('tabContentUpdate')](#uiobserverontabcontentupdate12-1). 1388