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