1# UIExtensionComponent (系统接口) 2 3UIExtensionComponent用于支持在本页面内嵌入其他应用提供的UI。展示的内容在另外一个进程中运行，本应用并不参与其中的布局和渲染。 4 5通常用于有进程隔离诉求的模块化开发场景。 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10> 11> 本模块为系统接口。 12 13## 使用约束 14 15本组件不支持预览。 16 17被拉起的Ability必须是带UI的Ability扩展，如何实现带UI的Ability扩展请参考[实现带UI的Ability扩展](../../apis-ability-kit/js-apis-app-ability-uiExtensionAbility.md)。 18 19必须显式设置组件宽高为非0有效值。 20 21不支持滚动到边界后，传递至上层继续滚动的场景。当UIExtensionComponent组件使用方和扩展Ability都支持内容滚动时，通过手势滚动会导致UIExtensionComponent内外同时响应，包括但不限于[Scroll](ts-container-scroll.md)、[Swiper](ts-container-swiper.md)、[List](ts-container-list.md)、[Grid](ts-container-grid.md)等滚动容器。内外手势同时滚动场景的规避方法可参考[示例2](#示例2-uec内外部同时响应滚动时隔离处理)。 22 23 24## 子组件 25 26无 27 28## 接口 29 30UIExtensionComponent(want: Want, options?: UIExtensionOptions) 31 32**参数：** 33 34| 参数名 | 参数类型 | 必填 | 参数描述 | 35| --------------------- | ---------------------------------------------------------- | ---- | ------------------ | 36| want | [Want](../../apis-ability-kit/js-apis-app-ability-want.md) | 是 | 要加载的Ability。 | 37| options<sup>11+</sup> | [UIExtensionOptions](#uiextensionoptions11) | 否 | 需要传递的构造项。 | 38 39## 属性 40 41支持[通用属性](ts-universal-attributes-size.md)。 42 43## 事件 44 45不支持[点击](ts-universal-events-click.md)等通用事件。 46 47将事件经过坐标转换后传递给对端Ability处理。 48 49支持以下事件： 50 51### onRemoteReady 52 53onRemoteReady(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<UIExtensionProxy>) 54 55UIExtensionAbility连接完成时的回调，之后可使用proxy向被拉起的Ability发送数据。 56 57**参数：** 58 59| 参数名 | 类型 | 说明 | 60| ---------------------------- | ------ | ------------------------------------------------------------ | 61| proxy | UIExtensionProxy | 用于向对端Ability发送数据。 | 62 63### onReceive 64 65onReceive(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<{ [key: string]: Object }>) 66 67收到被拉起的Ability发送的数据时触发的回调。 68 69**参数：** 70 71| 参数名 | 类型 | 说明 | 72| ---------------------------- | ------ | ------------------------------------------------------------ | 73| data | { [key: string]: Object } | 收到来自对端Ability的数据。 | 74 75### onResult<sup>(deprecated)</sup> 76 77onResult(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<{code: number; want?: Want}>) 78 79被拉起的Ability扩展调用terminateSelfWithResult时会先触发本回调函数，再触发OnRelease。 80 81本回调内可处理对端Ability的结果数据，可参考[AbilityResult](../../apis-ability-kit/js-apis-inner-ability-abilityResult.md)。 82 83> **说明：** 84> 从 API version 10 开始支持，从 API version 12 开始废弃，建议使用[onTerminated](#onterminated12)替代。 85 86**参数：** 87 88| 参数名 | 类型 | 说明 | 89| ---------------------------- | ------ | ------------------------------------------------------------ | 90| code | number | 收到来自对端Ability的处理結果code。 | 91| want | Want | 收到来自对端Ability的处理結果[Want](../../apis-ability-kit/js-apis-app-ability-want.md)。 | 92 93### onRelease<sup>(deprecated)</sup> 94 95onRelease(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<number>) 96 97用于处理被拉起的Ability销毁时的回调。 98 99被拉起的Ability扩展调用terminateSelfWithResult或者terminateSelf时会触发本回调，此时releaseCode为0，即正常销毁。 100 101被拉起的Ability扩展意外Crash或被kill时，触发本回调，此时releaseCode为1。 102 103> **说明：** 104> 从 API version 10 开始支持，从 API version 12 开始废弃，建议使用[onTerminated](#onterminated12)或者[onError](#onerror)替代。 105 106**参数：** 107 108| 参数名 | 类型 | 说明 | 109| ---------------------------- | ------ | ------------------------------------------------------------ | 110| releaseCode | number | 对端Ability销毁时的code，0为正常销毁，1为异常销毁。 | 111 112### onError 113 114onError(callback:[ErrorCallback](../../apis-basic-services-kit/js-apis-base.md#errorcallback)) 115 116被拉起的Ability扩展在运行过程中发生异常时触发本回调。可通过回调参数中的code、name和message获取错误信息并做处理。 117 118**参数：** 119 120| 参数名 | 类型 | 说明 | 121| ---------------------------- | ------ | ------------------------------------------------------------ | 122| err | [BusinessError](../../apis-basic-services-kit/js-apis-base.md#businesserror) | 报错信息。 | 123 124### onTerminated<sup>12+<sup> 125 126onTerminated(callback: Callback<TerminationInfo>) 127 128被拉起的UIExtensionAbility通过调用`terminateSelfWithResult`或者`terminateSelf`正常退出时，触发本回调函数。 129 130**参数：** 131 132| 参数名 | 类型 | 说明 | 133| ------- | ------ | ---------------------------------------------------------------------------------------- | 134| callback | [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<[TerminationInfo](#terminationinfo12)> | 回调函数，入参用于接收UIExtensionAbility的返回结果，类型为[TerminationInfo](#terminationinfo12)。 | 135 136> **说明：** 137> 138> - 若UIExtensionAbility通过调用`terminateSelfWithResult`退出，其携带的信息会传给回调函数的入参； 139> - 若UIExtensionAbility通过调用`terminateSelf`退出，上述回调函数的入参中，"code"取默认值"0"，"want"为"undefined"。 140 141### TerminationInfo<sup>12+<sup> 142 143用于表示被拉起的UIExtensionAbility通过调用`terminateSelfWithResult`或者`terminateSelf`正常退出时的返回结果。 144 145| 属性名 | 类型 | 说明 | 146| ------- | ------ | --------------------------------------------------- | 147| code | number | 被拉起UIExtensionAbility退出时返回的结果码。 | 148| want | [Want](../../apis-ability-kit/js-apis-app-ability-want.md) | 被拉起UIExtensionAbility退出时返回的数据。 | 149 150## UIExtensionOptions<sup>11+</sup> 151用于在UIExtensionComponent进行构造的时传递可选的构造参数。 152 153**参数：** 154 155| 参数名 | 参数类型 | 必填 | 参数描述 | 156| ---- | ---------------------------------------- | ---- | --------------- | 157| isTransferringCaller | boolean | 否 | 在使用UIExtensionComponent嵌套时，设置当前UIExtensionComponent是否转发上一级的Caller信息。</br> 默认值：false。 | 158| placeholder<sup>12+<sup> | [ComponentContent](../js-apis-arkui-ComponentContent.md) | 否 | 设置占位符，在UIExtensionComponent与UIExtensionAbility建立连接前显示。 | 159| dpiFollowStrategy<sup>12+<sup> | [DpiFollowStrategy](ts-container-ui-extension-component-sys.md#dpifollowstrategy12) | 否 | 提供接口支持设置DPI跟随宿主或跟随UIExtensionAbility。</br> 默认值：FOLLOW_UI_EXTENSION_ABILITY_DPI。 | 160| areaChangePlaceholder<sup>14+<sup> | Record<string, [ComponentContent](../js-apis-arkui-ComponentContent.md)> | 否 | 设置尺寸变化占位符，在UIExtensionComponent尺寸发生变化并且UIExtension内部渲染未完成时显示, key值支持"FOLD_TO_EXPAND"(折叠展开尺寸变化)、"UNDEFINED"(默认尺寸变化)。 | 161 162## DpiFollowStrategy<sup>12+</sup> 163 164| 名称 | 描述 | 165| -------------------------------- | --------------- | 166| FOLLOW_HOST_DPI | 表示DPI跟随宿主。 | 167| FOLLOW_UI_EXTENSION_ABILITY_DPI | 表示DPI跟随UIExtensionAbility。 | 168 169## UIExtensionProxy 170 171用于在双方建立连接成功后，组件使用方向被拉起的Ability发送数据、订阅和取消订阅注册。 172 173### send 174 175send(data: { [key: string]: Object }): void 176 177用于在双方建立连接成功后，组件使用方向被拉起的Ability发送数据的场景，提供异步发送数据。 178 179**系统能力：** SystemCapability.ArkUI.ArkUI.Full 180 181**参数：** 182 183| 参数名 | 参数类型 | 必填 | 参数描述 | 184| ---- | ---------------------------------------- | ---- | --------------- | 185| data | { [key: string]: Object }): { [key: string]: Object } | 186 187### sendSync<sup>11+</sup> 188 189sendSync(data: Record\<string, Object\>): Record\<string, Object\> 190 191用于在双方建立连接成功后，组件使用方向被拉起的Ability发送数据的场景，提供同步发送数据。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**参数：** 196 197| 参数名 | 参数类型 | 必填 | 参数描述 | 198| ---- | ---------------------------------------- | ---- | --------------- | 199| data | { [key: string]: Object } | 是 | 同步发送给被拉起的扩展Ability的数据。 | 200 201**返回值：** 202 203| 类型 | 描述 | 204| ---- | ----| 205| { [key: string]: Object } | 扩展Ability回复的数据。 | 206 207**错误码：** 208 209| 错误号 | 描述 | 210| ---- | ----| 211| 100011 | 扩展Ability未注册同步回调 | 212| 100012 | 数据发送失败 | 213 214### on('asyncReceiverRegister')<sup>11+</sup> 215 216on(type: 'asyncReceiverRegister', callback: (proxy: UIExtensionProxy) => void): void 217 218用于在双方建立连接成功后，组件使用方订阅被拉起的Ability发生异步注册的场景。 219 220**系统能力：** SystemCapability.ArkUI.ArkUI.Full 221 222**参数：** 223 224| 参数名 | 参数类型 |必填 | 参数描述 | 225| ------ | -------- |---- | ------- | 226| type | string | 是 | 代表订阅扩展Ability发生异步注册回调。 | 227| callback | (proxy: UIExtensionProxy) => void | 是 | 订阅扩展Ability注册setReceiveDataCallback后触发的回调。 | 228 229### on('syncReceiverRegister')<sup>11+</sup> 230 231on(type: 'syncReceiverRegister', callback: (proxy: UIExtensionProxy) => void): void 232 233用于在双方建立连接成功后，组件使用方订阅被拉起的Ability发生同步注册的场景。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237**参数：** 238 239| 参数名 | 参数类型 |必填 | 参数描述 | 240| ------ | -------- |---- | ------- | 241| type | string | 是 | 订阅扩展Ability发生同步注册回调。 | 242| callback | (proxy: UIExtensionProxy) => void | 是 | 扩展Ability注册setReceiveDataForResultCallback后触发的回调。 | 243 244### off('asyncReceiverRegister')<sup>11+</sup> 245 246off(type: 'syncReceiverRegister', callback?: (proxy: UIExtensionProxy) => void): void 247 248用于在双方建立连接成功后，组件使用方取消订阅被拉起的Ability发生异步注册的场景。 249 250**系统能力：** SystemCapability.ArkUI.ArkUI.Full 251 252**参数：** 253 254| 参数名 | 参数类型 | 必填 | 参数描述 | 255| ------ | -------- | ----- | ------- | 256| type | string | 是 | 取消订阅扩展Ability发生异步注册回调。 | 257| callback | Callback\<UIExtensionProxy\> | 否 | 为空代表取消订阅所有扩展Ability异步注册后触发回调。<br> 非空代表取消订阅异步对应回调。 | 258 259### off('syncReceiverRegister')<sup>11+</sup> 260 261off(type: 'syncReceiverRegister', callback?: Callback\<UIExtensionProxy\>): void 262 263用于在双方建立连接成功后，组件使用方取消订阅被拉起的Ability发生同步注册的场景。 264 265**系统能力：** SystemCapability.ArkUI.ArkUI.Full 266 267**参数：** 268 269| 参数名 | 参数类型 | 必填 | 参数描述 | 270| ------ | -------- | ----- | ------- | 271| type | string | 是 | 取消订阅扩展Ability发生同步注册回调。 | 272| callback | (proxy: UIExtensionProxy) => void | 否 | 为空代表取消订阅所有扩展Ability同步注册后触发回调<br> 非空代表取消订阅同步对应回调。 | 273 274## 示例 275 276### 示例1 (加载UIExtension) 277 278UIExtensionComponent组件使用分为使用方和提供方。本示例仅展示组件使用的方法和扩展的Ability，实际运行需在设备中安装bundleName为"com.example.newdemo"，abilityName为"UIExtensionProvider"的Ability扩展。 279 280**组件使用方** 281 282使用方入口界面Index.ets内容如下: 283```ts 284import { ComponentContent } from '@kit.ArkUI'; 285class Params { 286} 287@Builder 288function LoadingBuilder(params: Params) { 289 Column() { 290 LoadingProgress() 291 .color(Color.Blue) 292 } 293} 294@Builder 295function AreaChangePlaceholderBuilder(params: Params) { 296 Column() { 297 } 298 .width('100%') 299 .height('100%') 300 .backgroundColor(Color.Orange) 301} 302@Entry 303@Component 304struct Second { 305 @State message1: string = 'Hello World 1' 306 @State message2: string = 'Hello World 2' 307 @State message3: string = 'Hello World 3' 308 @State visible: Visibility = Visibility.Hidden 309 @State wid: number = 300 310 @State hei: number = 300 311 private proxy: UIExtensionProxy | null = null; 312 private initPlaceholder = new ComponentContent(this.getUIContext(), wrapBuilder(LoadingBuilder), new Params); 313 private areaChangePlaceholder = new ComponentContent(this.getUIContext(), wrapBuilder(AreaChangePlaceholderBuilder), new Params); 314 315 316 build() { 317 Row() { 318 Column() { 319 Text(this.message1).fontSize(30) 320 Text(this.message2).fontSize(30) 321 Text(this.message3).fontSize(30) 322 UIExtensionComponent({ 323 bundleName : "com.example.newdemo", 324 abilityName: "UIExtensionProvider", 325 parameters: { 326 "ability.want.params.uiExtensionType": "sys/commonUI" 327 }}, 328 { 329 placeholder: this.initPlaceholder, 330 areaChangePlaceholder: { 331 "FOLD_TO_EXPAND" : this.areaChangePlaceholder, 332 } 333 }) 334 .width(this.wid) 335 .height(this.hei) 336 .border({width: 5, color: Color.Blue}) 337 .onReceive((data) => { 338 console.info('Lee onReceive, for test') 339 this.message3 = JSON.stringify(data['data']) 340 }) 341 .onTerminated((info) => { 342 console.info('onTerminated: code =' + info.code + ', want = ' + JSON.stringify(info.want)); 343 }) 344 .onRemoteReady((proxy) => { 345 console.info('onRemoteReady, for test') 346 this.proxy = proxy 347 348 this.proxy.on("syncReceiverRegister", syncRegisterCallback1); 349 350 this.proxy.on("asyncReceiverRegister", (proxy1) => { 351 console.info("on invoke for test, type is asyncReceiverRegister"); 352 }); 353 }) 354 355 Button("点击向UIExtensionAbility发送数据").onClick(() => { 356 if (this.proxy != undefined) { 357 this.proxy.send({data: "你好1"}) 358 359 try { 360 let re = this.proxy.sendSync({data: "你好2"}) 361 console.info("for test, re=" + JSON.stringify(re)); 362 } catch (err) { 363 console.error(`sendSync failed for test. errCode=${err.code}, msg=${err.message}`); 364 } 365 } 366 }) 367 } 368 .width('100%') 369 } 370 .height('100%') 371 } 372} 373 374function syncRegisterCallback1(proxy: UIExtensionProxy) { 375 console.info("on invoke for test, syncRegisterCallback1, type is syncReceiverRegister"); 376} 377 378function syncRegisterCallback2(proxy: UIExtensionProxy) { 379 console.info("on invoke for test, syncRegisterCallback2, type is syncReceiverRegister"); 380} 381``` 382**组件提供方** 383 384提供方包含三个文件需要修改 385- 提供方新增扩展入口文件/src/main/ets/uiextensionability/UIExtensionProvider.ets 386```ts 387import { UIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 388 389const TAG: string = '[UIExtAbility]' 390export default class UIExtAbility extends UIExtensionAbility { 391 392 onCreate() { 393 console.log(TAG, `UIExtAbility onCreate`) 394 } 395 396 onForeground() { 397 console.log(TAG, `UIExtAbility onForeground`) 398 } 399 400 onBackground() { 401 console.log(TAG, `UIExtAbility onBackground`) 402 } 403 404 onDestroy() { 405 console.log(TAG, `UIExtAbility onDestroy`) 406 } 407 408 onSessionCreate(want: Want, session: UIExtensionContentSession) { 409 console.log(TAG, `UIExtAbility onSessionCreate, want: ${JSON.stringify(want)}`) 410 let param: Record<string, UIExtensionContentSession> = { 411 'session': session 412 }; 413 let storage: LocalStorage = new LocalStorage(param); 414 session.loadContent('pages/extension', storage); 415 } 416 417 onSessionDestroy(session: UIExtensionContentSession) { 418 console.log(TAG, `UIExtAbility onSessionDestroy`) 419 } 420} 421``` 422 423- 提供方扩展Ability入口页面文件/src/main/ets/pages/extension.ets 424```ts 425import { UIExtensionContentSession } from '@kit.AbilityKit'; 426 427let storage = LocalStorage.getShared() 428AppStorage.setOrCreate('message', 'UIExtensionAbility') 429 430@Entry(storage) 431@Component 432struct Extension { 433 @StorageLink('message') storageLink: string = ''; 434 private session: UIExtensionContentSession | undefined = storage.get<UIExtensionContentSession>('session'); 435 pathStack: NavPathStack = new NavPathStack() 436 437 @Builder 438 PageMap(name: string) { 439 if (name === "hello") { 440 pageOneTmp() 441 } 442 } 443 444 onPageShow() { 445 if (this.session != undefined) { 446 this.session.setReceiveDataCallback((data)=> { 447 this.storageLink = JSON.stringify(data) 448 console.info("invoke for test, handle callback set by setReceiveDataCallback successfully"); 449 }) 450 451 this.session.setReceiveDataForResultCallback(func1) 452 } 453 } 454 455 build() { 456 Navigation(this.pathStack) { 457 Row() { 458 Column() { 459 Text(this.storageLink) 460 .fontSize(20) 461 .fontWeight(FontWeight.Bold) 462 Button("点击向Component发送数据").onClick(()=>{ 463 if (this.session != undefined) { 464 this.session.sendData({"data": 543321}) 465 console.info('send 543321, for test') 466 } 467 }) 468 Button("terminate").onClick(()=> { 469 if (this.session != undefined) { 470 this.session.terminateSelf(); 471 } 472 storage.clear() 473 }) 474 Button("terminate with result").onClick(()=>{ 475 if (this.session != undefined) { 476 this.session.terminateSelfWithResult({ 477 resultCode: 0, 478 want: { 479 bundleName: "myBundleName", 480 parameters: { "result": 123456 } 481 } 482 }) 483 } 484 storage.clear() 485 }) 486 487 Button("点击跳转").onClick(()=> { 488 this.pathStack.pushPath({ name: "hello"}) 489 }) 490 } 491 } 492 .height('100%') 493 }.navDestination(this.PageMap) 494 .mode(NavigationMode.Stack) 495 } 496} 497 498// pageOne 499@Component 500export struct pageOneTmp { 501 pathStack: NavPathStack = new NavPathStack() 502 503 build() { 504 NavDestination() { 505 Column() { 506 Text("Hello World") 507 }.width('100%').height('100%') 508 }.title("pageOne") 509 .onBackPressed(() => { 510 const popDestinationInfo = this.pathStack.pop() // 弹出路由栈栈顶元素 511 console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo)) 512 return true 513 }) 514 .onReady((context: NavDestinationContext) => { 515 this.pathStack = context.pathStack 516 }) 517 } 518} 519 520function func1(data: Record<string, Object>): Record<string, Object> { 521 let linkToMsg: SubscribedAbstractProperty<string> = AppStorage.link('message'); 522 linkToMsg.set(JSON.stringify(data)) 523 console.info("invoke for test, handle callback set by setReceiveDataForResultCallback successfully"); 524 return data; 525} 526 527``` 528 529- 提供方扩展Ability, module配置文件/src/main/module.json5添加对应配置 530```json 531{ 532 "name": "UIExtensionProvider", 533 "srcEntry": "./ets/uiextensionability/UIExtensionProvider.ets", 534 "description": "1", 535 "label": "$string:EntryAbility_label", 536 "type": "sys/commonUI", 537 "exported": true, 538} 539``` 540 541### 示例2 (UEC内外部同时响应滚动时隔离处理) 542 543本示例展示了当UIExtensionComponent组件使用方和扩展的Ability同时使用[Scroll](ts-container-scroll.md)容器的场景，通过对UIExtensionComponent设置手势拦截处理，实现当UIExtensionComponent内部滚动时，外部组件不响应滚动。 544 545手势使用方式： 546组件内部滚动：手指在组件内部进行滚动操作； 547组件外部滚动：拖动外部滚动条进行滚动。 548 549实际运行时需先在设备中安装bundleName为"com.example.newdemo"，abilityName为"UIExtensionProvider"的Ability扩展。 550 551提供方扩展入口文件UIExtensionProvider.ets与[示例1](#示例1-加载uiextension)扩展入口文件UIExtensionProvider.ets代码一致。 552 553提供方扩展Ability, module配置文件与[示例1](#示例1-加载uiextension)扩展module配置文件module.json5代码一致。 554 555- 使用方组件使用示例: 556```ts 557@Entry 558@Component 559struct Second { 560 @State message1: string = 'Hello World 1' 561 @State message2: string = 'Hello World 2' 562 @State message3: string = 'Hello World 3' 563 @State visible: Visibility = Visibility.Hidden 564 @State wid: number = 300 565 @State hei: number = 300 566 private scroller: Scroller = new Scroller(); 567 private arr: number[] = [0, 1, 2, 3, 4, 5, 6] 568 569 build() { 570 Column() { 571 // 可滚动的容器组件 572 Scroll(this.scroller) { 573 Column() { 574 Text(this.message1).fontSize(30) 575 Text(this.message2).fontSize(30) 576 Text(this.message3).fontSize(30) 577 578 // 重复设置组件，构造滚动内容 579 ForEach(this.arr, (item: number) => { 580 UIExtensionComponent({ 581 bundleName: "com.example.newdemo", 582 abilityName: "UIExtensionProvider", 583 parameters: { 584 "ability.want.params.uiExtensionType": "sys/commonUI" 585 } 586 }) 587 .width(this.wid) 588 .height(this.hei) 589 // 设置手势拦截，UEC外部组件不响应滚动 590 .gesture(PanGesture().onActionStart(() => { 591 console.info('UIExtensionComponent PanGesture onAction') 592 })) 593 .border({ width: 5, color: Color.Blue }) 594 .onReceive((data) => { 595 console.info('Lee onReceive, for test') 596 this.message3 = JSON.stringify(data['data']) 597 }) 598 .onTerminated((info) => { 599 console.info('onTerminated: code =' + info.code + ', want = ' + JSON.stringify(info.want)); 600 }) 601 .onRemoteReady((proxy) => { 602 console.info('onRemoteReady, for test') 603 }) 604 }, (item: string) => item) 605 } 606 .width('100%') 607 } 608 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 609 .scrollBar(BarState.On) // 滚动条常驻显示 610 .scrollBarColor(Color.Gray) // 滚动条颜色 611 .scrollBarWidth(10) // 滚动条宽度 612 .friction(0.6) 613 .edgeEffect(EdgeEffect.None) 614 .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => { 615 console.info(xOffset + ' ' + yOffset) 616 }) 617 .onScrollEdge((side: Edge) => { 618 console.info('To the edge') 619 }) 620 .onScrollStop(() => { 621 console.info('Scroll Stop') 622 }) 623 } 624 .height('100%') 625 } 626} 627``` 628 629- 提供方扩展Ability入口页面文件extension.ets 630```ts 631@Entry 632@Component 633struct Extension { 634 @StorageLink('message') storageLink: string = ''; 635 private scroller: Scroller = new Scroller(); 636 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8] 637 638 build() { 639 Column() { 640 // 可滚动的容器组件 641 Scroll(this.scroller) { 642 Column() { 643 Text('Test demo') 644 .fontSize(20) 645 .fontWeight(FontWeight.Bold) 646 // 重复设置组件，构造滚动内容 647 ForEach(this.arr, (item: number) => { 648 Text(item.toString()) 649 .width('90%') 650 .height(150) 651 .backgroundColor(Color.Pink) 652 .borderRadius(15) 653 .fontSize(16) 654 .textAlign(TextAlign.Center) 655 .margin({ top: 10 }) 656 }, (item: string) => item) 657 } 658 } 659 660 } 661 .height('100%') 662 } 663} 664``` 665