1# @ohos.arkui.observer (无感监听) 2 3提供UI组件行为变化的无感监听能力。 4 5> **说明：** 6> 7> 从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9 10## 导入模块 11 12```ts 13import { uiObserver as observer } from '@kit.ArkUI'; 14``` 15 16## NavDestinationState 17 18NavDestination组件状态。 19 20**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 21 22**系统能力：** SystemCapability.ArkUI.ArkUI.Full 23 24| 名称 | 值 | 说明 | 25| --------- | --- | ------------------------ | 26| ON_SHOWN | 0 | NavDestination组件显示。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 | 27| ON_HIDDEN | 1 | NavDestination组件隐藏。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 | 28| ON_APPEAR<sup>12+</sup> | 2 | NavDestination从组件树上挂载。<br/> **卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 29| ON_DISAPPEAR<sup>12+</sup> | 3 | NavDestination从组件树上卸载。 <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 30| ON_WILL_SHOW<sup>12+</sup> | 4 | NavDestination组件显示之前。 <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 31| ON_WILL_HIDE<sup>12+</sup> | 5 | NavDestination组件隐藏之前。<br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 | 32| ON_WILL_APPEAR<sup>12+</sup>| 6 | NavDestination挂载到组件树之前。<br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 33| ON_WILL_DISAPPEAR<sup>12+</sup>| 7 | NavDestination从组件树上卸载之前。<br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 34| ON_BACKPRESS<sup>12+</sup> | 100 | NavDestination组件返回。 <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。| 35 36## ScrollEventType<sup>12+</sup> 37 38滚动事件的类型。 39 40**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 41 42**系统能力：** SystemCapability.ArkUI.ArkUI.Full 43 44| 名称 | 值 | 说明 | 45| --------- | --- | ------------------------ | 46| SCROLL_START | 0 | 滚动事件开始。 | 47| SCROLL_STOP | 1 | 滚动事件结束。 | 48 49## RouterPageState 50 51routerPage生命周期触发时对应的状态。 52 53**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57| 名称 | 值 | 说明 | 58| ----------------- | --- | ----------------------- | 59| ABOUT_TO_APPEAR | 0 | page即将显示。 | 60| ABOUT_TO_DISAPPEAR | 1 | page即将销毁。 | 61| ON_PAGE_SHOW | 2 | page显示。 | 62| ON_PAGE_HIDE | 3 | page隐藏。 | 63| ON_BACK_PRESS | 4 | page返回时。 | 64 65## TabContentState<sup>12+</sup> 66 67TabContent组件的状态。 68 69**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 70 71**系统能力：** SystemCapability.ArkUI.ArkUI.Full 72 73| 名称 | 值 | 说明 | 74| ----------------- | --- | ----------------------- | 75| ON_SHOW | 0 | TabContent组件显示。 | 76| ON_HIDE | 1 | TabContent组件隐藏。 | 77 78## NavDestinationInfo 79 80NavDestination组件信息。 81 82**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86| 名称 | 类型 | 必填 | 说明 | 87| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 88| navigationId | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | 是 | 包含NavDestination组件的Navigation组件的id。 | 89| name | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | 是 | NavDestination组件的名称。 | 90| state | [NavDestinationState](#navdestinationstate) | 是 | NavDestination组件的状态。 | 91| index<sup>12+</sup> | number | 是 | NavDestination在页面栈中的索引。 | 92| param<sup>12+</sup> | Object | 否 | NavDestination组件的参数。 | 93| navDestinationId<sup>12+</sup> | string | 是 | NavDestination组件的唯一标识ID。 | 94 95## NavigationInfo<sup>12+</sup> 96 97Navigation组件信息。 98 99**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 100 101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 102 103| 名称 | 类型 | 必填 | 说明 | 104| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 105| navigationId | string | 是 | Navigation组件的id。 | 106| pathStack | [NavPathStack](arkui-ts/ts-basic-components-navigation.md#navpathstack10) | 是 | Navigation组件的路由栈。 | 107 108## ScrollEventInfo<sup>12+</sup> 109 110ScrollEvent滚动信息。 111 112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 113 114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 115 116| 名称 | 类型 | 必填 | 说明 | 117| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 118| id | string | 是 | 滚动组件的id。 | 119| uniqueId | number | 是 | 滚动组件的uniqueId。 | 120| scrollEvent | [ScrollEventType](#scrolleventtype12) | 是 | 滚动事件的类型。 | 121| offset | number | 是 | 滚动组件的当前偏移量。 | 122 123## ObserverOptions<sup>12+</sup> 124 125Observer选项。 126 127**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 128 129**系统能力：** SystemCapability.ArkUI.ArkUI.Full 130 131| 名称 | 类型 | 必填 | 说明 | 132| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 133| id | string | 是 | 组件的id。 | 134 135## RouterPageInfo 136 137RouterPageInfo包含的信息。 138 139**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 140 141**系统能力：** SystemCapability.ArkUI.ArkUI.Full 142 143| 名称 | 类型 | 必填 | 说明 | 144| -------------------- | ------------------------------------------------------------ | ---- | ---------------------------------------------- | 145| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 触发生命周期的routerPage页面对应的上下文信息。 | 146| index | number | 是 | 触发生命周期的routerPage在栈中的位置。 | 147| name | string | 是 | 触发生命周期的routerPage页面的名称。 | 148| path | string | 是 | 触发生命周期的routerPage页面的路径。 | 149| state | [RouterPageState](#routerpagestate) | 是 | 触发生命周期的routerPage页面的状态。 | 150| pageId<sup>12+</sup> | string | 是 | 触发生命周期的routerPage页面的唯一标识。 | 151 152## DensityInfo<sup>12+</sup> 153 154屏幕像素密度变化回调包含的信息。 155 156**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160| 名称 | 类型 | 必填 | 说明 | 161| ------- | ----------------------------------------- | ---- | -------------------------------------- | 162| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 屏幕像素密度变化时页面对应的上下文信息。 | 163| density | number | 是 | 变化后的屏幕像素密度。 | 164 165## NavDestinationSwitchInfo<sup>12+</sup> 166 167Navigation组件页面切换的信息。 168 169**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173| 名称 | 类型 | 必填 | 说明 | 174| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 175| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 触发页面切换的Navigation对应的上下文信息。 | 176| from | [NavDestinationInfo](#navdestinationinfo) \| [NavBar](./arkui-ts/ts-basic-components-navigation.md#navbar12) | 是 | 页面切换的源页面。 | 177| to | [NavDestinationInfo](#navdestinationinfo) \| [NavBar](./arkui-ts/ts-basic-components-navigation.md#navbar12) | 是 | 页面切换的目的页面。 | 178| operation | [NavigationOperation](./arkui-ts/ts-basic-components-navigation.md#navigationoperation11枚举说明) | 是 | 页面切换操作类型。 | 179 180## NavDestinationSwitchObserverOptions<sup>12+</sup> 181 182Navigation组件页面切换事件的监听选项。 183 184**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 185 186**系统能力：** SystemCapability.ArkUI.ArkUI.Full 187 188| 名称 | 类型 | 必填 | 说明 | 189| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 190| navigationId | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | 是 | 指定需要监听的Navigation的ID | 191 192## TabContentInfo<sup>12+</sup> 193 194TabContent页面的切换信息。 195 196**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 197 198**系统能力：** SystemCapability.ArkUI.ArkUI.Full 199 200| 名称 | 类型 | 必填 | 说明 | 201| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 202| tabContentId | string | 是 | TabContent组件的id。 | 203| tabContentUniqueId | number | 是 | TabContent组件的uniqueId。 | 204| state | [TabContentState](#tabcontentstate12) | 是 | TabContent组件的状态。 | 205| index | number | 是 | TabContent组件的下标索引。 | 206| id | string | 是 | Tabs组件的id。 | 207| uniqueId | number | 是 | Tabs组件的uniqueId。 | 208 209## observer.on('navDestinationUpdate') 210 211on(type: 'navDestinationUpdate', callback: Callback\<NavDestinationInfo\>): void 212 213监听NavDestination组件的状态变化。 214 215**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 216 217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 218 219**参数：** 220 221| 参数名 | 类型 | 必填 | 说明 | 222| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 223| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 224| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 是 | 回调函数。返回当前的NavDestination组件状态。 | 225 226**示例：** 227 228```ts 229// Index.ets 230// 演示 observer.on('navDestinationUpdate', callback) 231// observer.off('navDestinationUpdate', callback) 232import { uiObserver as observer } 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 observer.on('navDestinationUpdate', (info) => { 255 console.info('NavDestination state update', JSON.stringify(info)); 256 }); 257 } 258 259 aboutToDisappear() { 260 observer.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## observer.off('navDestinationUpdate') 280 281off(type: 'navDestinationUpdate', callback?: Callback\<NavDestinationInfo\>): void 282 283取消监听NavDestination组件的状态变化。 284 285**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 286 287**系统能力：** SystemCapability.ArkUI.ArkUI.Full 288 289**参数：** 290 291| 参数名 | 类型 | 必填 | 说明 | 292| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 293| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 294| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 否 | 回调函数。返回当前的NavDestination组件状态。 | 295 296**示例：** 297 298参考[observer.on('navDestinationUpdate')](#observeronnavdestinationupdate)示例。 299 300## observer.on('navDestinationUpdate') 301 302on(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback: Callback\<NavDestinationInfo\>): void 303 304监听NavDestination组件的状态变化。 305 306**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 307 308**系统能力：** SystemCapability.ArkUI.ArkUI.Full 309 310**参数：** 311 312| 参数名 | 类型 | 必填 | 说明 | 313| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 314| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 315| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | 是 | 指定监听的Navigation的id。 | 316| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 是 | 回调函数。返回当前的NavDestination组件状态。 | 317 318**示例：** 319 320```ts 321// Index.ets 322// 演示 observer.on('navDestinationUpdate', navigationId, callback) 323// observer.off('navDestinationUpdate', navigationId, callback) 324import { uiObserver as observer } 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 observer.on('navDestinationUpdate', { navigationId: "testId" }, (info) => { 347 console.info('NavDestination state update', JSON.stringify(info)); 348 }); 349 } 350 351 aboutToDisappear() { 352 observer.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## observer.off('navDestinationUpdate') 373 374off(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback?: Callback\<NavDestinationInfo\>): void 375 376取消监听NavDestination组件的状态变化。 377 378**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 379 380**系统能力：** SystemCapability.ArkUI.ArkUI.Full 381 382**参数：** 383 384| 参数名 | 类型 | 必填 | 说明 | 385| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 386| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 387| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | 是 | 指定监听的Navigation的id。 | 388| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 否 | 回调函数。返回当前的NavDestination组件状态。 | 389 390**示例：** 391 392参考[observer.on('navDestinationUpdate')](#observeronnavdestinationupdate-1)示例。 393 394## observer.on('scrollEvent')<sup>12+</sup> 395 396on(type: 'scrollEvent', callback: Callback\<ScrollEventInfo\>): void 397 398监听滚动事件的开始和结束。 399 400**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 401 402**系统能力：** SystemCapability.ArkUI.ArkUI.Full 403 404**参数：** 405 406| 参数名 | 类型 | 必填 | 说明 | 407| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 408| type | string | 是 | 监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。 | 409| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | 是 | 回调函数。返回滚动事件的信息。 | 410 411**示例：** 412 413参考[offscrollevent](#observeroffscrollevent12-1)示例。 414 415## observer.off('scrollEvent')<sup>12+</sup> 416 417off(type: 'scrollEvent', callback?: Callback\<ScrollEventInfo\>): void 418 419取消监听滚动事件的开始和结束。 420 421**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 422 423**系统能力：** SystemCapability.ArkUI.ArkUI.Full 424 425**参数：** 426 427| 参数名 | 类型 | 必填 | 说明 | 428| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 429| type | string | 是 | 监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。 | 430| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | 否 | 回调函数。返回滚动事件的信息。 | 431 432**示例：** 433 434参考[offscrollevent](#observeroffscrollevent12-1)示例。 435 436## observer.on('scrollEvent')<sup>12+</sup> 437 438on(type: 'scrollEvent', options: ObserverOptions, callback: Callback\<ScrollEventInfo\>): void 439 440监听滚动事件的开始和结束。 441 442**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 443 444**系统能力：** SystemCapability.ArkUI.ArkUI.Full 445 446**参数：** 447 448| 参数名 | 类型 | 必填 | 说明 | 449| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 450| type | string | 是 | 监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。 | 451| options | [ObserverOptions](#observeroptions12) | 是 | 指定监听的滚动组件的id。 | 452| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | 是 | 回调函数。返回滚动事件的信息。 | 453 454**示例：** 455 456参考[offscrollevent](#observeroffscrollevent12-1)示例。 457 458## observer.off('scrollEvent')<sup>12+</sup> 459 460off(type: 'scrollEvent', options: ObserverOptions, callback?: Callback\<ScrollEventInfo\>): void 461 462取消监听滚动事件的开始和结束。 463 464**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 465 466**系统能力：** SystemCapability.ArkUI.ArkUI.Full 467 468**参数：** 469 470| 参数名 | 类型 | 必填 | 说明 | 471| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 472| type | string | 是 | 监听事件，固定为'scrollEvent'，即滚动事件的开始和结束。 | 473| options | [ObserverOptions](#observeroptions12) | 是 | 指定监听的滚动组件的id。 | 474| callback | Callback\<[ScrollEventInfo](#scrolleventinfo12)\> | 否 | 回调函数。返回滚动事件的信息。 | 475 476**示例：** 477 478```ts 479import { uiObserver as observer } from '@kit.ArkUI' 480 481@Entry 482@Component 483struct Index { 484 scroller: Scroller = new Scroller(); 485 options: observer.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 observer.on('scrollEvent', (info) => { 514 console.info('scrollEventInfo', JSON.stringify(info)); 515 }); 516 }) 517 Button('UIObserver off') 518 .onClick(() => { 519 observer.off('scrollEvent'); 520 }) 521 } 522 523 Row() { 524 Button('UIObserverWithId on') 525 .onClick(() => { 526 observer.on('scrollEvent', this.options, (info) => { 527 console.info('scrollEventInfo', JSON.stringify(info)); 528 }); 529 }) 530 Button('UIObserverWithId off') 531 .onClick(() => { 532 observer.off('scrollEvent', this.options); 533 }) 534 } 535 } 536 .height('100%') 537 } 538} 539``` 540 541## observer.on('routerPageUpdate')<sup>11+</sup> 542 543on(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback: Callback\<RouterPageInfo\>): void 544 545监听router中page页面的状态变化。 546 547**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 548 549**系统能力：** SystemCapability.ArkUI.ArkUI.Full 550 551**参数：** 552 553| 参数名 | 类型 | 必填 | 说明 | 554| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 555| type | string | 是 | 监听事件，固定为'routerPageUpdate'，即router中page页面的状态变化。 | 556| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 557| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | 是 | 回调函数。携带pageInfo，返回当前的page页面状态。 | 558 559**示例：** 560 561```ts 562// used in UIAbility 563import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 564import { UIContext, window, uiObserver as observer } 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 // 注册监听，范围是abilityContext内的page 572 observer.on('routerPageUpdate', this.context, (info: observer.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 // 获取UIContext实例 582 this.uiContext = windowInfo.getUIContext(); 583 // 注册监听，范围是uiContext内的page 584 observer.on('routerPageUpdate', this.uiContext, (info: observer.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## observer.off('routerPageUpdate')<sup>11+</sup> 596 597off(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback?: Callback\<RouterPageInfo\>): void 598 599取消监听router中page页面的状态变化。 600 601**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 602 603**系统能力：** SystemCapability.ArkUI.ArkUI.Full 604 605**参数：** 606 607| 参数名 | 类型 | 必填 | 说明 | 608| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 609| type | string | 是 | 监听事件，固定为'routerPageUpdate'，即router中page页面的状态变化。 | 610| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 611| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | 否 | 需要被注销的回调函。 | 612 613**示例：** 614 615```ts 616// used in UIAbility 617import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 618import { uiObserver as observer, UIContext } from '@kit.ArkUI'; 619 620export default class EntryAbility extends UIAbility { 621 // 实际使用前uiContext需要被赋值。参见示例observer.on('routerPageUpdate') 622 private uiContext: UIContext | null = null; 623 624 onDestroy(): void { 625 // 注销当前abilityContext上的所有routerPageUpdate监听 626 observer.off('routerPageUpdate', this.context) 627 } 628 629 onWindowStageDestroy(): void { 630 // 注销在uiContext上的所有routerPageUpdate监听 631 if (this.uiContext) { 632 observer.off('routerPageUpdate', this.uiContext); 633 } 634 } 635 636 // ... other function in EntryAbility 637} 638``` 639 640## observer.on('densityUpdate')<sup>12+</sup> 641 642on(type: 'densityUpdate', context: UIContext, callback: Callback\<DensityInfo\>): void 643 644监听屏幕像素密度变化。 645 646**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 647 648**系统能力：** SystemCapability.ArkUI.ArkUI.Full 649 650**参数：** 651 652| 参数名 | 类型 | 必填 | 说明 | 653| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 654| type | string | 是 | 监听事件，固定为'densityUpdate'，即屏幕像素密度变化。 | 655| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 656| callback | Callback\<[DensityInfo](#densityinfo12)\> | 是 | 回调函数。携带densityInfo，返回变化后的屏幕像素密度。 | 657 658**示例：** 659 660```ts 661import { uiObserver as observer } from '@kit.ArkUI'; 662 663@Entry 664@Component 665struct Index { 666 @State density: number = 0; 667 @State message: string = '未注册监听' 668 669 densityUpdateCallback = (info: observer.DensityInfo) => { 670 this.density = info.density; 671 this.message = '变化后的DPI：' + this.density.toString(); 672 } 673 674 build() { 675 Column() { 676 Text(this.message) 677 .fontSize(24) 678 .fontWeight(FontWeight.Bold) 679 Button('注册屏幕像素密度变化监听') 680 .onClick(() => { 681 this.message = '已注册监听' 682 observer.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 683 }) 684 } 685 } 686} 687``` 688 689## observer.off('densityUpdate')<sup>12+</sup> 690 691off(type: 'densityUpdate', context: UIContext, callback?: Callback\<DensityInfo\>): void 692 693取消监听屏幕像素密度的变化。 694 695**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 696 697**系统能力：** SystemCapability.ArkUI.ArkUI.Full 698 699**参数：** 700 701| 参数名 | 类型 | 必填 | 说明 | 702| -------- | ----------------------------------------- | ---- | ---------------------------------------------------------------------------------------------- | 703| type | string | 是 | 监听事件，固定为'densityUpdate'，即屏幕像素密度变化。 | 704| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 705| callback | Callback\<[DensityInfo](#densityinfo12)\> | 否 | 需要被注销的回调函数。若不指定具体的回调函数，则注销指定UIContext下所有densityUpdate事件监听。 | 706 707```ts 708import { uiObserver as observer, UIContext } from '@kit.ArkUI'; 709 710@Entry 711@Component 712struct Index { 713 @State density: number = 0; 714 @State message: string = '未注册监听' 715 716 densityUpdateCallback = (info: observer.DensityInfo) => { 717 this.density = info.density; 718 this.message = '变化后的DPI：' + this.density.toString(); 719 } 720 721 build() { 722 Column() { 723 Text(this.message) 724 .fontSize(24) 725 .fontWeight(FontWeight.Bold) 726 Button('注册屏幕像素密度变化监听') 727 .margin({ bottom: 10 }) 728 .onClick(() => { 729 this.message = '已注册监听' 730 observer.on('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 731 }) 732 Button('解除注册屏幕像素密度变化监听') 733 .onClick(() => { 734 this.message = '未注册监听' 735 observer.off('densityUpdate', this.getUIContext(), this.densityUpdateCallback); 736 }) 737 } 738 } 739} 740``` 741 742## observer.on('willDraw')<sup>12+</sup> 743 744on(type: 'willDraw', context: UIContext, callback: Callback\<void\>): void 745 746监听每一帧绘制指令下发情况。 747 748**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 749 750**系统能力：** SystemCapability.ArkUI.ArkUI.Full 751 752**参数：** 753 754| 参数名 | 类型 | 必填 | 说明 | 755| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 756| type | string | 是 | 监听事件，固定为'willDraw'，即是否将要绘制。 | 757| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 758| callback | Callback\<void\> | 是 | 回调函数。 | 759 760**示例：** 761 762```ts 763import { uiObserver as observer } from '@kit.ArkUI'; 764 765@Entry 766@Component 767struct Index { 768 willDrawCallback = () => { 769 console.info("willDraw指令下发"); 770 } 771 build() { 772 Column() { 773 Button('注册绘制指令下发监听') 774 .onClick(() => { 775 observer.on('willDraw', this.getUIContext(), this.willDrawCallback); 776 }) 777 } 778 } 779} 780``` 781 782## observer.off('willDraw')<sup>12+</sup> 783 784off(type: 'willDraw', context: UIContext, callback?: Callback\<void\>): void 785 786取消监听每一帧绘制指令下发情况。 787 788**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 789 790**系统能力：** SystemCapability.ArkUI.ArkUI.Full 791 792**参数：** 793 794| 参数名 | 类型 | 必填 | 说明 | 795| -------- | ----------------------------------------- | ---- | ----------------------------------------------------- | 796| type | string | 是 | 监听事件，固定为'willDraw'，即是否将要绘制。 | 797| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 798| callback | Callback\<void\> | 否 | 需要被注销的回调函数。 | 799 800```ts 801import { uiObserver as observer } from '@kit.ArkUI'; 802 803@Entry 804@Component 805struct Index { 806 willDrawCallback = () => { 807 console.info("willDraw指令下发") 808 } 809 810 build() { 811 Column() { 812 Button('注册绘制指令下发监听') 813 .margin({ bottom: 10 }) 814 .onClick(() => { 815 observer.on('willDraw', this.getUIContext(), this.willDrawCallback); 816 }) 817 Button('解除注册绘制指令下发监听') 818 .onClick(() => { 819 observer.off('willDraw', this.getUIContext(), this.willDrawCallback); 820 }) 821 } 822 } 823} 824``` 825 826## observer.on('didLayout')<sup>12+</sup> 827 828on(type: 'didLayout', context: UIContext, callback: Callback\<void\>): void 829 830监听每一帧布局完成情况。 831 832**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 833 834**系统能力：** SystemCapability.ArkUI.ArkUI.Full 835 836**参数：** 837 838| 参数名 | 类型 | 必填 | 说明 | 839| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 840| type | string | 是 | 监听事件，固定为'didLayout'，即是否布局完成。 | 841| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 842| callback | Callback\<void\> | 是 | 回调函数。 | 843 844**示例：** 845 846```ts 847import { uiObserver as observer } from '@kit.ArkUI'; 848 849@Entry 850@Component 851struct Index { 852 didLayoutCallback = () => { 853 console.info("Layout布局完成"); 854 } 855 build() { 856 Column() { 857 Button('注册布局完成监听') 858 .onClick(() => { 859 observer.on('didLayout', this.getUIContext(), this.didLayoutCallback); 860 }) 861 } 862 } 863} 864``` 865 866## observer.off('didLayout')<sup>12+</sup> 867 868off(type: 'didLayout', context: UIContext, callback?: Callback\<void\>): void 869 870取消监听每一帧布局完成情况。 871 872**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 873 874**系统能力：** SystemCapability.ArkUI.ArkUI.Full 875 876**参数：** 877 878| 参数名 | 类型 | 必填 | 说明 | 879| -------- | ----------------------------------------- | ---- | ----------------------------------------------------- | 880| type | string | 是 | 监听事件，固定为'didLayout'，即是否布局完成。 | 881| context | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围。 | 882| callback | Callback\<void\> | 否 | 需要被注销的回调函数。 | 883 884```ts 885import { uiObserver as observer } from '@kit.ArkUI'; 886 887@Entry 888@Component 889struct Index { 890 didLayoutCallback = () => { 891 console.info("Layout布局完成") 892 } 893 894 build() { 895 Column() { 896 Button('注册布局完成监听') 897 .margin({ bottom: 10 }) 898 .onClick(() => { 899 observer.on('didLayout', this.getUIContext(), this.didLayoutCallback); 900 }) 901 Button('解除布局完成s监听') 902 .onClick(() => { 903 observer.off('didLayout', this.getUIContext(), this.didLayoutCallback); 904 }) 905 } 906 } 907} 908``` 909 910## observer.on('navDestinationSwitch')<sup>12+</sup> 911 912on(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, callback: Callback\<NavDestinationSwitchInfo\>): void 913 914监听Navigation的页面切换事件。 915 916**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 917 918**系统能力：** SystemCapability.ArkUI.ArkUI.Full 919 920**参数：** 921 922| 参数名 | 类型 | 必填 | 说明 | 923| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 924| type | string | 是 | 监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。 | 925| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面切换事件的范围。 | 926| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | 是 | 回调函数。携带NavDestinationSwitchInfo，返回页面切换事件的信息。 | 927 928**示例：** 929 930```ts 931// EntryAbility.ets 932// 演示 observer.on('navDestinationSwitch', UIAbilityContext, callback) 933// observer.off('navDestinationSwitch', UIAbilityContext, callback) 934import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 935import { uiObserver as observer, window } from '@kit.ArkUI'; 936import { hilog } from "@kit.PerformanceAnalysisKit" 937 938function callBackFunc(info: observer.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 observer.on('navDestinationSwitch', this.context, callBackFunc); 946 } 947 948 onDestroy(): void { 949 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 950 observer.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// 演示 observer.on('navDestinationSwitch', UIContext, callback) 986// observer.off('navDestinationSwitch', UIContext, callback) 987import { uiObserver as observer } from '@kit.ArkUI'; 988 989@Component 990struct PageOne { 991 build() { 992 NavDestination() { 993 Text("pageOne") 994 }.title("pageOne") 995 } 996} 997 998function callBackFunc(info: observer.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 observer.on('navDestinationSwitch', this.getUIContext(), callBackFunc) 1014 } 1015 1016 aboutToDisappear() { 1017 observer.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## observer.off('navDestinationSwitch')<sup>12+</sup> 1037 1038off(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, callback?: Callback\<NavDestinationSwitchInfo\>): void 1039 1040取消监听Navigation的页面切换事件。 1041 1042**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1043 1044**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1045 1046**参数：** 1047 1048| 参数名 | 类型 | 必填 | 说明 | 1049| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1050| type | string | 是 | 监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。 | 1051| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面切换事件的范围。 | 1052| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | 否 | 需要被注销的回调函数。 | 1053 1054**示例：** 1055 1056参考[observer.on('navDestinationSwitch')](#observeronnavdestinationswitch12)示例。 1057 1058## observer.on('navDestinationSwitch')<sup>12+</sup> 1059 1060on(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback: Callback\<NavDestinationSwitchInfo\>): void 1061 1062监听Navigation的页面切换事件。 1063 1064**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1065 1066**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1067 1068**参数：** 1069 1070| 参数名 | 类型 | 必填 | 说明 | 1071| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1072| type | string | 是 | 监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。 | 1073| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面切换事件的范围。 | 1074| observerOptions | [NavDestinationSwitchObserverOptions](#navdestinationswitchobserveroptions12) | 是 | 监听选项。 | 1075| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | 是 | 回调函数。携带NavDestinationSwitchInfo，返回页面切换事件的信息。 | 1076 1077**示例：** 1078 1079```ts 1080// EntryAbility.ets 1081// 演示 observer.on('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback) 1082// observer.off('navDestinationSwitch', UIAbilityContext, NavDestinationSwitchObserverOptions, callback) 1083import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 1084import { uiObserver as observer, window } from '@kit.ArkUI'; 1085import { hilog } from "@kit.PerformanceAnalysisKit" 1086 1087function callBackFunc(info: observer.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 observer.on('navDestinationSwitch', this.context, { 1095 navigationId: "myNavId" 1096 }, callBackFunc); 1097 } 1098 1099 onDestroy(): void { 1100 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 1101 observer.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// 演示 observer.on('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback) 1139// observer.off('navDestinationSwitch', UIContext, NavDestinationSwitchObserverOptions, callback) 1140import { uiObserver as observer } from '@kit.ArkUI'; 1141 1142@Component 1143struct PageOne { 1144 build() { 1145 NavDestination() { 1146 Text("pageOne") 1147 }.title("pageOne") 1148 } 1149} 1150 1151function callBackFunc(info: observer.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 observer.on('navDestinationSwitch', this.getUIContext(), { navigationId: "myNavId" }, callBackFunc) 1167 } 1168 1169 aboutToDisappear() { 1170 observer.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## observer.off('navDestinationSwitch')<sup>12+</sup> 1191 1192off(type: 'navDestinationSwitch', context: UIAbilityContext | UIContext, observerOptions: NavDestinationSwitchObserverOptions, callback?: Callback\<NavDestinationSwitchInfo\>): void 1193 1194取消监听Navigation的页面切换事件。 1195 1196**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1197 1198**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1199 1200**参数：** 1201 1202| 参数名 | 类型 | 必填 | 说明 | 1203| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1204| type | string | 是 | 监听事件，固定为'navDestinationSwitch'，即Navigation的页面切换事件。 | 1205| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面切换事件的范围。 | 1206| observerOptions | [NavDestinationSwitchObserverOptions](#navdestinationswitchobserveroptions12) | 是 | 监听选项。 | 1207| callback | Callback\<[NavDestinationSwitchInfo](#navdestinationswitchinfo12)\> | 否 | 需要被注销的回调函数。 | 1208 1209**示例：** 1210 1211参考[observer.on('navDestinationSwitch')](#observeronnavdestinationswitch12-1)接口示例。 1212 1213## observer.on('tabContentUpdate')<sup>12+</sup> 1214 1215on(type: 'tabContentUpdate', callback: Callback\<TabContentInfo\>): void 1216 1217监听TabContent页面的切换事件。 1218 1219**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1220 1221**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1222 1223**参数：** 1224 1225| 参数名 | 类型 | 必填 | 说明 | 1226| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1227| type | string | 是 | 监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。 | 1228| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | 是 | 回调函数。携带TabContentInfo，返回TabContent页面切换事件的信息。 | 1229 1230**示例：** 1231 1232```ts 1233import { uiObserver as observer } from '@kit.ArkUI'; 1234 1235function callbackFunc(info: observer.TabContentInfo) { 1236 console.info('tabContentUpdate', JSON.stringify(info)); 1237} 1238 1239@Entry 1240@Component 1241struct TabsExample { 1242 1243 aboutToAppear(): void { 1244 observer.on('tabContentUpdate', callbackFunc); 1245 } 1246 1247 aboutToDisappear(): void { 1248 observer.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## observer.off('tabContentUpdate')<sup>12+</sup> 1280 1281off(type: 'tabContentUpdate', callback?: Callback\<TabContentInfo\>): void 1282 1283取消监听TabContent页面的切换事件。 1284 1285**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1286 1287**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1288 1289**参数：** 1290 1291| 参数名 | 类型 | 必填 | 说明 | 1292| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1293| type | string | 是 | 监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。 | 1294| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | 否 | 需要被注销的回调函数。 | 1295 1296**示例：** 1297 1298参考[observer.on('tabContentUpdate')](#observerontabcontentupdate12)接口示例。 1299 1300## observer.on('tabContentUpdate')<sup>12+</sup> 1301 1302on(type: 'tabContentUpdate', options: ObserverOptions, callback: Callback\<TabContentInfo\>): void 1303 1304监听TabContent页面的切换事件。 1305 1306**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1307 1308**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1309 1310**参数：** 1311 1312| 参数名 | 类型 | 必填 | 说明 | 1313| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1314| type | string | 是 | 监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。 | 1315| options | [ObserverOptions](#observeroptions12) | 是 | 指定监听的Tabs组件的id。 | 1316| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | 是 | 回调函数。携带TabContentInfo，返回TabContent页面切换事件的信息。 | 1317 1318**示例：** 1319 1320```ts 1321import { uiObserver as observer } from '@kit.ArkUI'; 1322 1323function callbackFunc(info: observer.TabContentInfo) { 1324 console.info('tabContentUpdate', JSON.stringify(info)); 1325} 1326 1327@Entry 1328@Component 1329struct TabsExample { 1330 1331 aboutToAppear(): void { 1332 observer.on('tabContentUpdate', { id: 'tabsId' }, callbackFunc); 1333 } 1334 1335 aboutToDisappear(): void { 1336 observer.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## observer.off('tabContentUpdate')<sup>12+</sup> 1368 1369off(type: 'tabContentUpdate', options: ObserverOptions, callback?: Callback\<TabContentInfo\>): void 1370 1371取消监听TabContent页面的切换事件。 1372 1373**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1374 1375**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1376 1377**参数：** 1378 1379| 参数名 | 类型 | 必填 | 说明 | 1380| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 1381| type | string | 是 | 监听事件，固定为'tabContentUpdate'，即TabContent页面的切换事件。 | 1382| options | [ObserverOptions](#observeroptions12) | 是 | 指定监听的Tabs组件的id。 | 1383| callback | Callback\<[TabContentInfo](#tabcontentinfo12)\> | 否 | 需要被注销的回调函数。 | 1384 1385**示例：** 1386 1387参考[observer.on('tabContentUpdate')](#observerontabcontentupdate12-1)接口示例。