1# 滚动组件通用接口 2 3<!--Kit: ArkUI--> 4<!--Subsystem: ArkUI--> 5<!--Owner: @yylong; @zcdqs--> 6<!--Designer: @yylong; @zcdqs--> 7<!--Tester: @liuzhenshuo--> 8<!--Adviser: @HelloCrease--> 9 10滚动组件通用属性和事件目前只支持[List](ts-container-list.md)、[Grid](ts-container-grid.md)、[Scroll](ts-container-scroll.md)和[WaterFlow](ts-container-waterflow.md)组件。 11 12> **说明：** 13> 14> 本模块从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15 16## 属性 17 18### scrollBar<sup>11+</sup> 19 20scrollBar(barState: BarState): T 21 22设置滚动条状态。 23 24**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 25 26**系统能力：** SystemCapability.ArkUI.ArkUI.Full 27 28**参数：** 29 30| 参数名 | 类型 | 必填 | 说明 | 31| -------- | ----------------------------------------- | ---- | -------------------------------------- | 32| barState | [BarState](ts-appendix-enums.md#barstate) | 是 | 滚动条状态。<br/>默认值：List、Grid、Scroll组件默认BarState.Auto，WaterFlow组件默认BarState.Off。 | 33 34**返回值：** 35 36| 类型 | 说明 | 37| --- | -------------- | 38| T | 返回当前滚动组件。 | 39 40### scrollBarColor<sup>11+</sup> 41 42scrollBarColor(color: Color | number | string): T 43 44设置滚动条的颜色。 45 46**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 47 48**系统能力：** SystemCapability.ArkUI.ArkUI.Full 49 50**参数：** 51 52| 参数名 | 类型 | 必填 | 说明 | 53| ------ | ------------------------------------------------------------ | ---- | -------------- | 54| color | [Color](ts-appendix-enums.md#color) \| number \| string | 是 | 滚动条的颜色。<br/>默认值：'\#182431'（40%不透明度）<br/>number为HEX格式颜色，支持rgb或者argb，示例：0xffffff。string为rgb或者argb格式颜色，示例：'#ffffff'。 | 55 56**返回值：** 57 58| 类型 | 说明 | 59| --- | -------------- | 60| T | 返回当前滚动组件。 | 61 62### scrollBarWidth<sup>11+</sup> 63 64scrollBarWidth(value: number | string): T 65 66设置滚动条的宽度，不支持百分比设置。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。如果滚动条的宽度超过滚动组件主轴方向的高度，则滚动条的宽度会变为默认值。 67 68**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 69 70**系统能力：** SystemCapability.ArkUI.ArkUI.Full 71 72**参数：** 73 74| 参数名 | 类型 | 必填 | 说明 | 75| ------ | -------------------------- | ---- | ----------------------------------------- | 76| value | number \| string | 是 | 滚动条的宽度。<br/>默认值：4<br/>单位：vp <br/>取值范围：设置为小于0的值时，按默认值处理。设置为0时，不显示滚动条。 | 77 78**返回值：** 79 80| 类型 | 说明 | 81| --- | -------------- | 82| T | 返回当前滚动组件。 | 83 84### edgeEffect<sup>11+</sup> 85 86edgeEffect(edgeEffect: EdgeEffect, options?: EdgeEffectOptions): T 87 88设置边缘滑动效果。 89 90**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94**参数：** 95 96| 参数名 | 类型 | 必填 | 说明 | 97| --------------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 98| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 是 | 滚动组件的边缘滑动效果，支持弹簧效果和阴影效果。<br/>默认值：Grid、Scroll、WaterFlow组件默认EdgeEffect.None，List组件默认EdgeEffect.Spring。| 99| options | [EdgeEffectOptions](#edgeeffectoptions11对象说明) | 否 | 组件内容大小小于组件自身时是否开启滑动效果，以及设置边缘效果生效的边缘。设置为{ alwaysEnabled: true }会开启滑动效果，{ alwaysEnabled: false }不开启。<br/>默认值：<br/>List、Grid、WaterFlow组件默认{ alwaysEnabled: false, EffectEdge: EffectEdge.START \| EffectEdge.END }，Scroll组件默认{ alwaysEnabled: true, EffectEdge: EffectEdge.START \| EffectEdge.END }。| 100 101**返回值：** 102 103| 类型 | 说明 | 104| --- | -------------- | 105| T | 返回当前滚动组件。 | 106 107### nestedScroll<sup>11+</sup> 108 109nestedScroll(value: NestedScrollOptions): T 110 111设置前后两个方向的嵌套滚动模式，实现与父组件的滚动联动。 112 113**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117**参数：** 118 119| 参数名 | 类型 | 必填 | 说明 | 120| ------ | ----------------------------------------------------- | ---- | -------------- | 121| value | [NestedScrollOptions](#nestedscrolloptions10对象说明) | 是 | 嵌套滚动选项。<br/>默认值：{ scrollForward: NestedScrollMode.SELF_ONLY, scrollBackward: NestedScrollMode.SELF_ONLY } | 122 123**返回值：** 124 125| 类型 | 说明 | 126| --- | -------------- | 127| T | 返回当前滚动组件。 | 128 129### enableScrollInteraction<sup>11+</sup> 130 131enableScrollInteraction(value: boolean): T 132 133设置是否支持滚动手势。 134 135**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 136 137**系统能力：** SystemCapability.ArkUI.ArkUI.Full 138 139**参数：** 140 141| 参数名 | 类型 | 必填 | 说明 | 142| ------ | ------- | ---- | ----------------------------------- | 143| value | boolean | 是 | 是否支持滚动手势。设置为true时可以通过手指或者鼠标滚动，设置为false时无法通过手指或者鼠标滚动，但不影响控制器[Scroller](ts-container-scroll.md#scroller)的滚动接口。<br/>默认值：true | 144 145**返回值：** 146 147| 类型 | 说明 | 148| --- | -------------- | 149| T | 返回当前滚动组件。 | 150 151### friction<sup>11+</sup> 152 153friction(value: number | Resource): T 154 155设置摩擦系数，手动划动滚动区域时生效，仅影响惯性滚动过程，对惯性滚动过程中的链式效果有间接影响。设置为小于等于0的值时，按默认值处理。 156 157**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 158 159**系统能力：** SystemCapability.ArkUI.ArkUI.Full 160 161**参数：** 162 163| 参数名 | 类型 | 必填 | 说明 | 164| ------ | ---------------------------------------------------- | ---- | --------------------------------------------------------- | 165| value | number \| [Resource](ts-types.md#resource) | 是 | 摩擦系数。<br/>默认值：非wearable设备为0.6，wearable设备为0.9。<br/>从API version 11开始，非wearable设备默认值为0.7。<br/>从API version 12开始，非wearable设备默认值为0.75。 <br/>取值范围：(0, +∞)，设置为小于等于0的值时，按默认值处理。| 166 167**返回值：** 168 169| 类型 | 说明 | 170| --- | -------------- | 171| T | 返回当前滚动组件。 | 172 173### flingSpeedLimit<sup>11+</sup> 174 175flingSpeedLimit(speedLimit: number): T 176 177限制跟手滑动结束后，Fling动效开始时的最大初始速度。 178 179**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 180 181**系统能力：** SystemCapability.ArkUI.ArkUI.Full 182 183**参数：** 184 185| 参数名 | 类型 | 必填 | 说明 | 186| ---------- | ------ | ---- | ------------------------------- | 187| speedLimit | number | 是 | Fling动效开始时的最大初始速度。<br/>默认值：9000<br/>单位：vp/s <br/>取值范围：(0, +∞)，设置为小于等于0的值时，按默认值处理。| 188 189**返回值：** 190 191| 类型 | 说明 | 192| --- | -------------- | 193| T | 返回当前滚动组件。 | 194 195### fadingEdge<sup>14+</sup> 196 197fadingEdge(enabled: Optional<boolean>, options?: FadingEdgeOptions): T 198 199设置是否开启边缘渐隐效果及设置边缘渐隐长度。 200 201> **说明：** 202> 203> fadingEdge是通过设置[overlay](ts-universal-attributes-overlay.md#overlay)属性和[blendMode](ts-universal-attributes-image-effect.md#blendmode11)属性（参数值为BlendMode.SRC_OVER，BlendApplyType.OFFSCREEN）实现的。当fadingEdge生效时，会覆盖原组件的.overlay()属性和.blendMode()属性。 204> 205> fadingEdge生效时，建议不在设置fadingEdge属性的组件上设置background相关属性，会影响渐隐的显示效果。 206> 207> fadingEdge生效时，设置fadingEdge属性的组件会裁剪到边界，在该组件上设置clip属性为false不生效。 208 209**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 210 211**系统能力：** SystemCapability.ArkUI.ArkUI.Full 212 213**参数：** 214 215| 参数名 | 类型 | 必填 | 说明 | 216| ------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 217| enabled | Optional<boolean> | 是 | 是否开启边缘渐隐效果。设置为true时开启边缘渐隐效果，设置为false时不开启边缘渐隐效果。<br/>默认值：false | 218| options | [FadingEdgeOptions](#fadingedgeoptions14对象说明) | 否 | 边缘渐隐参数对象。可以通过该对象定义边缘渐隐效果属性，比如设置渐隐长度。<br/>如果设置小于0的值则取默认值，默认长度为32vp。<br/>如果设置的长度超过容器高度的一半时，渐隐长度取容器高度的一半。 | 219 220**返回值：** 221 222| 类型 | 说明 | 223| --- | -------------- | 224| T | 返回当前滚动组件。 | 225 226### clipContent<sup>14+</sup> 227 228clipContent(clip: ContentClipMode | RectShape): T 229 230设置滚动容器的内容层裁剪区域。 231 232**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 233 234**系统能力：** SystemCapability.ArkUI.ArkUI.Full 235 236**参数：** 237 238| 参数名 | 类型 | 必填 | 说明 | 239| ------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 240| clip | [ContentClipMode](#contentclipmode14枚举说明) \| [RectShape](../js-apis-arkui-shape.md#rectshape) | 是 | 裁剪只针对滚动容器的内容，即其子节点，背景不受影响。通过RectShape传入自定义矩形区域时仅支持设置宽高和相对于组件左上角的[offset](../js-apis-arkui-shape.md#offset)，不支持圆角。<br></div>默认值：Grid、Scroll的默认值为ContentClipMode.BOUNDARY，List、WaterFlow的默认值为ContentClipMode.CONTENT_ONLY。 | 241 242**返回值：** 243 244| 类型 | 说明 | 245| --- | -------------- | 246| T | 返回当前滚动组件。 | 247 248### backToTop<sup>15+</sup> 249 250backToTop(backToTop: boolean): T 251 252设置滚动组件是否支持点击状态栏回到顶部。 253 254支持当前页面的滚动组件收到点击状态栏事件后，通过动画回到顶部。点击状态栏后，后台应用的滚动组件不受影响，不做回到顶部的动作。本属性不受[enableScrollInteraction](#enablescrollinteraction11)设置的影响。 255 256**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 257 258**系统能力：** SystemCapability.ArkUI.ArkUI.Full 259 260**参数：** 261 262| 参数名 | 类型 | 必填 | 说明 | 263| ------ | ------- | ---- | ---------------------------------------------- | 264| backToTop | boolean | 是 | 设置滚动组件是否支持点击状态栏回到顶部。设置为true支持点击状态栏通过动画回到顶部，设置为false不支持点击状态栏回到顶部。<br/>默认值：<br/>API version 18之前：false。 <br/>API version 18及以后：滚动方向是水平方向时为false，是垂直方向时为true。 | 265 266**返回值：** 267 268| 类型 | 说明 | 269| --- | -------------- | 270| T | 返回当前滚动组件。 | 271 272### scrollBarMargin<sup>20+</sup> 273 274scrollBarMargin(margin: ScrollBarMargin): T 275 276设置滚动条的边距。边距是在滚动条避让圆角距离的基础上计算的，如果滚动条区域小于滚动条的最小长度，则不显示滚动条。 277 278**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 279 280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 281 282**参数：** 283 284| 参数名 | 类型 | 必填 | 说明 | 285| ------ | ------- | ---- | ------------------------------------- | 286| margin | [ScrollBarMargin](ts-types.md#scrollbarmargin20对象说明) | 是 |滚动条起始、末尾边距。<br/>默认值：{start: LengthMetrics.vp(0), end: LengthMetrics.vp(0)} | 287 288**返回值：** 289 290| 类型 | 说明 | 291| --- | -------------- | 292| T | 返回当前滚动组件。 | 293 294### digitalCrownSensitivity<sup>18+</sup> 295 296digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>): T 297 298设置表冠响应事件灵敏度。 299 300组件收到[表冠事件](ts-universal-events-crown.md)的前提是该组件获焦，焦点控制可以通过[focusable](ts-universal-attributes-focus.md#focusable)、[defaultFocus](ts-universal-attributes-focus.md#defaultfocus9)、[focusOnTouch](ts-universal-attributes-focus.md#focusontouch9)进行管理。 301 302**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 303 304**系统能力：** SystemCapability.ArkUI.ArkUI.Full 305 306**参数：** 307 308| 参数名 | 类型 | 必填 | 说明 | 309| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 310| sensitivity | [Optional<CrownSensitivity>](ts-appendix-enums.md#crownsensitivity18) | 是 | 表冠响应灵敏度。<br/>默认值：CrownSensitivity.MEDIUM，响应速度适中。 | 311 312**返回值：** 313 314| 类型 | 说明 | 315| --- | -------------- | 316| T | 返回当前滚动组件。 | 317 318 319## 事件 320 321### onReachStart<sup>11+</sup> 322 323onReachStart(event: () => void): T 324 325滚动组件到达起始位置时触发。 326 327滚动组件初始化时会触发一次，滚动到起始位置时触发一次。边缘效果为弹簧效果时，划动经过起始位置时触发一次，回弹回起始位置时再触发一次。 328 329**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 330 331**系统能力：** SystemCapability.ArkUI.ArkUI.Full 332 333**参数：** 334 335| 参数名 | 类型 | 必填 | 说明 | 336| ------ | ------ | ---- | -------------------- | 337| event | () => void | 是 | 滚动组件到达起始位置时的回调。 | 338 339**返回值：** 340 341| 类型 | 说明 | 342| --- | -------------- | 343| T | 返回当前滚动组件。 | 344 345### onReachEnd<sup>11+</sup> 346 347onReachEnd(event: () => void): T 348 349滚动组件到达末尾位置时触发。 350 351滚动组件边缘效果为弹簧效果时，划动经过末尾位置时触发一次，回弹回末尾位置时再触发一次。 352 353**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 354 355**系统能力：** SystemCapability.ArkUI.ArkUI.Full 356 357**参数：** 358 359| 参数名 | 类型 | 必填 | 说明 | 360| ------ | ------ | ---- | -------------------- | 361| event | () => void | 是 | 滚动组件到达末尾位置时的回调。 | 362 363**返回值：** 364 365| 类型 | 说明 | 366| --- | -------------- | 367| T | 返回当前滚动组件。 | 368 369### onScrollStart<sup>11+</sup> 370 371onScrollStart(event: () => void): T 372 373滚动开始时触发。手指拖动滚动组件或拖动滚动组件的滚动条触发的滚动开始时，会触发该事件。使用[Scroller](ts-container-scroll.md#scroller)滚动控制器触发的带动画的滚动，动画开始时会触发该事件。 374 375触发该事件的条件： 376 3771. 滚动组件开始滚动时触发，支持键鼠操作等其他触发滚动的输入设置。 378 3792. 通过滚动控制器API接口调用后开始，带过渡动效。 380 381**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 382 383**系统能力：** SystemCapability.ArkUI.ArkUI.Full 384 385**参数：** 386 387| 参数名 | 类型 | 必填 | 说明 | 388| ------ | ------ | ---- | -------------------- | 389| event | () => void | 是 | 滚动开始时的回调。 | 390 391**返回值：** 392 393| 类型 | 说明 | 394| --- | -------------- | 395| T | 返回当前滚动组件。 | 396 397### onScrollStop<sup>11+</sup> 398 399onScrollStop(event: () => void): T 400 401滚动停止时触发。手拖动滚动组件或拖动滚动组件的滚动条触发的滚动，手离开屏幕后滚动停止时会触发该事件。使用[Scroller](ts-container-scroll.md#scroller)滚动控制器触发的带动画的滚动，动画停止时会触发该事件。 402 403触发该事件的条件： 404 4051. 滚动组件触发滚动后停止，支持键鼠操作等其他触发滚动的输入设置。 406 4072. 通过调用带过渡动画的滚动控制器API接口，动画停止时。 408 409**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 410 411**系统能力：** SystemCapability.ArkUI.ArkUI.Full 412 413**参数：** 414 415| 参数名 | 类型 | 必填 | 说明 | 416| ------ | ------ | ---- | -------------------- | 417| event | () => void | 是 | 滚动停止时的回调。 | 418 419**返回值：** 420 421| 类型 | 说明 | 422| --- | -------------- | 423| T | 返回当前滚动组件。 | 424 425### onWillScroll<sup>12+</sup> 426 427onWillScroll(handler: Optional<OnWillScrollCallback>): T 428 429滚动事件回调，滚动组件滚动前触发。 430 431回调当前帧将要滚动的偏移量和当前滚动状态和滚动操作来源，其中回调的偏移量为计算得到的将要滚动的偏移量值，并非最终实际滚动偏移。可以通过该回调返回值指定滚动组件将要滚动的偏移。[Scroll](./ts-container-scroll.md)组件的[onWillScroll](./ts-container-scroll.md#onwillscroll12)接口的参数类型是[ScrollOnWillScrollCallback](./ts-container-scroll.md#scrollonwillscrollcallback12)。 432 433**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 434 435**系统能力：** SystemCapability.ArkUI.ArkUI.Full 436 437**参数：** 438 439| 参数名 | 类型 | 必填 | 说明 | 440| ------ | ------ | ------ | ------| 441| handler | Optional<[OnWillScrollCallback](#onwillscrollcallback12)> | 是 | 滚动组件滑动前触发的回调。 | 442 443**返回值：** 444 445| 类型 | 说明 | 446| --- | -------------- | 447| T | 返回当前滚动组件。 | 448 449> **说明：** 450> 451> 调用不带动画的ScrollEdge和ScrollToIndex时，不触发onWillScroll。 452 453 454### onDidScroll<sup>12+</sup> 455 456onDidScroll(handler: OnScrollCallback): T 457 458滚动组件滑动时触发，返回当前帧滑动的偏移量和当前滑动状态。 459 460**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 461 462**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 463 464**系统能力：** SystemCapability.ArkUI.ArkUI.Full 465 466**参数：** 467 468| 参数名 | 类型 | 必填 | 说明 | 469| ------ | ------ | ------ | ------| 470| handler | [OnScrollCallback](#onscrollcallback12) | 是 | 滚动组件滑动时触发的回调。 | 471 472**返回值：** 473 474| 类型 | 说明 | 475| --- | -------------- | 476| T | 返回当前滚动组件。 | 477 478### onScroll<sup>(deprecated)</sup> 479 480onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void): T 481 482滚动组件滑动时触发。 483 484从API version 11开始使用。 485 486从API version 12开始废弃不再使用，Scroll组件的onScroll事件在布局之前触发，建议使用[onWillScroll](#onwillscroll12)替代；List、Grid和WaterFlow组件的onScroll事件在布局之后触发，建议使用[onDidScroll](#ondidscroll12)替代。 487 488**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 489 490**系统能力：** SystemCapability.ArkUI.ArkUI.Full 491 492**参数：** 493 494| 参数名 | 类型 | 必填 | 说明 | 495| ------ | ------ | ------ | ------| 496| event | (scrollOffset: number, scrollState: [ScrollState](ts-container-list.md#scrollstate枚举说明)) => void | 是 | 滚动组件滑动时的回调。<br/>scrollOffset：每帧滚动的偏移量，滚动组件的内容向上滚动时偏移量为正，向下滚动时偏移量为负。单位vp。<br/>scrollState：当前滑动状态。| 497 498**返回值：** 499 500| 类型 | 说明 | 501| --- | -------------- | 502| T | 返回当前滚动组件。 | 503 504 505### onWillStopDragging<sup>20+</sup> 506 507onWillStopDragging(handler: OnWillStopDraggingCallback): T 508 509滚动组件划动离手时触发，使用鼠标滚轮划动时不会触发。 510 511**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 512 513**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 514 515**系统能力：** SystemCapability.ArkUI.ArkUI.Full 516 517**参数：** 518 519| 参数名 | 类型 | 必填 | 说明 | 520| ------- | ----------------------------------------------------------- | ---- | ---------------------------- | 521| handler | [OnWillStopDraggingCallback](#onwillstopdraggingcallback20) | 是 | 滚动组件划动离手时触发的回调。 | 522 523**返回值：** 524 525| 类型 | 说明 | 526| ---- | ------------------ | 527| T | 返回当前滚动组件。 | 528 529 530## ItemDragInfo对象说明 531 532拖拽点信息对象。 533 534**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 535 536**系统能力：** SystemCapability.ArkUI.ArkUI.Full 537 538| 名称 | 类型 | 只读 | 可选 | 说明 | 539| ---------- | ---------- | -- | -- | ---------- | 540| x | number | 否 | 否 | 当前拖拽点的x坐标，单位vp。 | 541| y | number | 否 | 否 | 当前拖拽点的y坐标，单位vp。 | 542 543## NestedScrollOptions<sup>10+</sup>对象说明 544 545[nestedScroll](#nestedscroll11)属性参数对象。 546 547**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 548 549**系统能力：** SystemCapability.ArkUI.ArkUI.Full 550 551| 名称 | 类型 | 只读 | 可选 | 说明 | 552| ----- | ------ | ------ | -- | ----------------- | 553| scrollForward | [NestedScrollMode](ts-appendix-enums.md#nestedscrollmode10) | 否 | 否 | 滚动组件往末尾端滚动时的嵌套滚动选项。 | 554| scrollBackward | [NestedScrollMode](ts-appendix-enums.md#nestedscrollmode10) | 否 | 否 | 滚动组件往起始端滚动时的嵌套滚动选项。 | 555 556## EdgeEffectOptions<sup>11+</sup>对象说明 557 558[edgeEffect](#edgeeffect11)属性参数对象。 559 560**系统能力：** SystemCapability.ArkUI.ArkUI.Full 561 562| 名称 | 类型 | 只读 | 可选 | 说明 | 563| ----- | ------| ------- | -- | ----------------- | 564| alwaysEnabled | boolean | 否 | 否 | 组件内容大小小于组件自身时，设置是否开启滑动效果。设置为true开启滑动效果，设置为false关闭滑动效果。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 565| effectEdge<sup>18+</sup> | number | 否 | 是 | 设置边缘效果生效的边缘。<br/>如果设置[EffectEdge](#effectedge18枚举说明).START表示只有起始边生效。如果设置[EffectEdge](#effectedge18枚举说明).END表示只有末尾边生效。<br/>默认值为[EffectEdge](#effectedge18枚举说明).START \| [EffectEdge](#effectedge18枚举说明).END表示双边同时生效。当设置为其它异常值时，则默认双边同时生效。<br/>如果需要双边都不生效，可将edgeEffect设置为EdgeEffect.None。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 566 567## FadingEdgeOptions<sup>14+</sup>对象说明 568 569[fadingEdge](#fadingedge14)属性边缘渐隐参数对象。 570 571**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 572 573**系统能力：** SystemCapability.ArkUI.ArkUI.Full 574 575| 名称 | 类型 | 只读 | 可选 | 说明 | 576| ---------------- | ------------------------------------------------------------ | ---- | -- | ------------------------------------------------------------ | 577| fadingEdgeLength | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 是 | 设置边缘渐隐长度。 | 578 579## EffectEdge<sup>18+</sup>枚举说明 580 581表示当前边缘效果要生效的边缘。 582 583**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 584 585**系统能力：** SystemCapability.ArkUI.ArkUI.Full 586 587| 名称 | 值 | 说明 | 588| ----- | ---- | ------------ | 589| START | 1 | 起始边生效。 | 590| END | 2 | 末尾边生效。 | 591 592## ContentClipMode<sup>14+</sup>枚举说明 593 594表示滚动容器的内容裁剪模式。 595 596**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 597 598**系统能力：** SystemCapability.ArkUI.ArkUI.Full 599 600下图是组件配置了边距属性后的示意图，可理解每种枚举对应的裁剪区域。 601 602 603 604| 名称 | 值 | 说明 | 605| ------ | ------ | ---------------------------------------- | 606| CONTENT_ONLY | 0 | 按内容区裁剪，对应图中的绿色区域。 | 607| BOUNDARY | 1 | 按组件区域裁剪，对应图中的整个蓝色区域。 | 608| SAFE_AREA | 2 | 按组件配置的SafeArea区域裁剪，对应图中的整个黄色区域。 | 609 610## OnWillScrollCallback<sup>12+</sup> 611 612type OnWillScrollCallback = (scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => void | ScrollResult 613 614滚动组件滑动前触发的回调。 615 616**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 617 618**系统能力：** SystemCapability.ArkUI.ArkUI.Full 619 620**参数：** 621 622| 参数名 | 类型 | 必填 | 说明 | 623| ------ | ------ | ------ | ------| 624| scrollOffset | number | 是 | 每帧滑动的偏移量，滚动组件的内容向上滚动时偏移量为正，向下滚动时偏移量为负。<br/>单位vp。 | 625| scrollState | [ScrollState](ts-container-list.md#scrollstate枚举说明) | 是 | 当前滑动状态。 | 626| scrollSource | [ScrollSource](ts-appendix-enums.md#scrollsource12) | 是 | 当前滑动操作的来源。 | 627 628**返回值：** 629 630| 类型 | 说明 | 631| ----------------------------- | ------------------------------------ | 632| void \| [ScrollResult](#scrollresult12对象说明) | 返回ScrollResult时按照开发者指定的偏移量滑动；不返回时按回调参数scrollOffset滑动。 <br/>取值范围：(-∞, +∞)| 633 634## OnScrollCallback<sup>12+</sup> 635 636type OnScrollCallback = (scrollOffset: number, scrollState: ScrollState) => void 637 638滚动组件滑动时触发的回调。 639 640**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 641 642**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 643 644**系统能力：** SystemCapability.ArkUI.ArkUI.Full 645 646**参数：** 647 648| 参数名 | 类型 | 必填 | 说明 | 649| ------ | ------ | ------ | ------| 650| scrollOffset | number | 是 | 每帧滚动的偏移量，滚动组件的内容向上滚动时偏移量为正，向下滚动时偏移量为负。<br/>单位vp。 | 651| scrollState | [ScrollState](ts-container-list.md#scrollstate枚举说明) | 是 | 当前滑动状态。 | 652 653## ScrollResult<sup>12+</sup>对象说明 654 655[OnWillScrollCallback](#onwillscrollcallback12)返回值对象。 656 657**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 658 659**系统能力：** SystemCapability.ArkUI.ArkUI.Full 660 661| 名称 | 类型 | 只读 | 可选 | 说明 | 662| ------ | ------ | ------ | -- | ------| 663| offsetRemain | number | 否 | 否 | 将要滑动偏移量，单位vp。 | 664 665## ChildrenMainSize<sup>12+</sup>对象说明 666 667维护List组件或ListItemGroup组件的子组件在主轴方向的大小信息，仅支持一对一绑定到List组件或ListItemGroup组件。 668 669**说明：** 670> 671> - 提供的主轴方向大小信息必须与子组件实际在主轴方向的大小一致，子组件在主轴方向大小变化或者增删子组件时都必须通过ChildrenMainSize对象方法通知List组件或ListItemGroup组件。 672 673**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 674 675**系统能力：** SystemCapability.ArkUI.ArkUI.Full 676 677### constructor<sup>12+</sup> 678 679constructor(childDefaultSize: number) 680 681ChildrenMainSize有参构造函数。 682 683**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 684 685**系统能力：** SystemCapability.ArkUI.ArkUI.Full 686 687**参数：** 688 689| 参数名 | 类型 | 必填 | 说明 | 690| ---- | ----------------------------- | ---- | -------------------- | 691| childDefaultSize | number | 是 | 子组件在主轴方向的默认大小。<br/>单位：vp<br/>**说明：** <br/>必须是有限的非负数值，否则抛出异常。| 692 693**错误码**： 694 695以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 696 697| 错误码ID | 错误信息 | 698| ------- | -------- | 699| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameters types; 3. Parameter verification failed. | 700 701 702### childDefaultSize<sup>12+</sup> 703 704set childDefaultSize(value: number) 705 706修改子组件在主轴方向的默认大小。 707 708**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 709 710**系统能力：** SystemCapability.ArkUI.ArkUI.Full 711 712**参数：** 713 714| 参数名 | 类型 | 必填 | 说明 | 715| ---- | ----------------------------- | ---- | -------------------- | 716| value | number | 是 | 子组件在主轴方向的默认大小。<br/>单位：vp<br/>**说明：** <br/>必须是有限的非负数值，否则抛出异常。| 717 718**错误码**： 719 720以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 721 722| 错误码ID | 错误信息 | 723| ------- | -------- | 724| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameters types; 3. Parameter verification failed. | 725 726get childDefaultSize(): number 727 728获取子组件在主轴方向的默认大小。 729 730**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 731 732**系统能力：** SystemCapability.ArkUI.ArkUI.Full 733 734**返回值：** 735 736| 类型 | 说明 | 737| ------------------------------------------------------------ | ------------------------------------------------------------ | 738| number | 子组件在主轴方向的默认大小。<br/>单位：vp <br/>取值范围：[0, +∞)| 739 740### splice<sup>12+</sup> 741 742splice(start: number, deleteCount?: number, childrenSize?: Array\<number>): void 743 744批量增删改子组件在主轴方向的大小信息。 745 746**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 747 748**系统能力：** SystemCapability.ArkUI.ArkUI.Full 749 750**参数：** 751 752| 参数名 | 类型 | 必填 | 说明 | 753| ---- | ----------------------------- | ---- | -------------------- | 754| start | number | 是 | 从0开始计算的索引值，表示要开始修改子组件在主轴方向大小信息的位置。<br/>**说明：** <br/>1. 必须是有限的非负数值，否则抛出异常。<br/>2. 非整数会被截断为整数。<br/>3. 超过最大索引值不生效。<br/>取值范围：[0, +∞) | 755| deleteCount | number | 否 | 从start开始删除的大小信息的数量。<br/>**说明：** <br/>1. 必须是有限的非负数值，否则处理为0。<br/>2. 非整数会被截断为整数。<br/>3. start + deleteCount - 1可以超过最大索引值，会删除索引值start开始之后的所有子组件的大小信息。<br/>默认值为+∞。 <br/>取值范围：[0, +∞) | 756| childrenSize | Array\<number > | 否 | 要在start位置插入的所有子组件的主轴方向的大小。<br/>Array中各个数值单位：vp <br/>**说明：** <br/>1.数组中数值如果是有限的非负值，则认为是指定的大小，后续不随默认大小的变化而变化。<br/>2. 数组中数值如果不是有限的非负值，会被处理成默认大小，后续会随默认大小的变化而变化。<br/>默认值为空数组。 <br/>取值范围：[0, +∞) | 757 758 759**错误码**： 760 761以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 762 763| 错误码ID | 错误信息 | 764| ------- | -------- | 765| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameters types; 3. Parameter verification failed. | 766 767 768> **说明：** 769> 770> - 如果仅使用start参数，表示删除索引值start及之后的子组件的大小信息。 771> - 如果仅使用start和deleteCount参数，表示删除索引值start开始的deleteCount数量的子组件的大小信息。一般在删除子组件时使用。 772> - 如果使用3个参数，表示删除索引值start开始的deleteCount数量的子组件的大小信息，再在start位置插入childrenSize中所有的大小信息。一般在增加子组件或者批量更新子组件主轴方向大小的时候使用，如果仅是增加子组件，deleteCount为0，childrenSize的元素数量和增加子组件的个数应该相等；如果仅是批量更新子组件主轴方向的大小，childrenSize的元素数量应该和deleteCount相等，即为批量更新的数量。 773> - 如果想要通知某个子组件的大小为默认大小，childrenSize中对应的值不应该给一个有限的非负值，而应该给NaN，任意负值等能被处理成默认大小的值。 774 775### update<sup>12+</sup> 776 777update(index: number, childSize: number): void 778 779修改指定索引值对应的子组件的主轴方向的大小信息。 780 781**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 782 783**系统能力：** SystemCapability.ArkUI.ArkUI.Full 784 785**参数：** 786 787| 参数名 | 类型 | 必填 | 说明 | 788| ---- | ----------------------------- | ---- | -------------------- | 789| index | number | 是 | 从0开始计算的索引值，表示要开始修改子组件在主轴方向大小信息的位置。<br/>**说明：** <br/>1. 必须是有限的非负数值，否则抛出异常。<br/>2. 非整数会被截断为整数。<br/>3. 超过最大索引值不生效。 <br/>取值范围：[0, +∞)| 790| childSize | number | 是 | 要更新成的大小。<br/>单位：vp <br/>**说明：** <br/>1.数值如果是有限的非负值，则认为是指定的大小，后续不随默认大小的变化而变化。<br/>2. 数值如果不是有限的非负值，会被处理成默认大小，后续会随默认大小的变化而变化。 <br/>取值范围：[0, +∞)| 791 792**错误码**： 793 794以下错误码详细介绍请参考[通用错误码](../../errorcode-universal.md)。 795 796| 错误码ID | 错误信息 | 797| ------- | -------- | 798| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameters types; 3. Parameter verification failed. | 799 800## UIScrollableCommonEvent<sup>19+</sup> 801用于设置滚动事件回调。 802### setOnReachStart<sup>19+</sup> 803 804setOnReachStart(callback: Callback\<void> | undefined): void 805 806设置[onReachStart](./ts-container-scrollable-common.md#onreachstart11)事件的回调。 807 808方法入参为undefined的时候，重置对应的事件回调。 809 810**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 811 812**系统能力：** SystemCapability.ArkUI.ArkUI.Full 813 814**参数：** 815 816| 参数名 | 类型 | 必填 | 说明 | 817| ------ | ------ | ---- | -------------------------- | 818| callback | [Callback](./ts-types.md#callback12)\<void> \| undefined | 是 | onReachStart事件的回调函数。 | 819 820### setOnReachEnd<sup>19+</sup> 821 822setOnReachEnd(callback: Callback\<void> | undefined): void 823 824设置[onReachEnd](./ts-container-scrollable-common.md#onreachend11)事件的回调。 825 826方法入参为undefined时，会重置事件回调。 827 828**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 829 830**系统能力：** SystemCapability.ArkUI.ArkUI.Full 831 832**参数：** 833 834| 参数名 | 类型 | 必填 | 说明 | 835| ------ | ------ | ---- | -------------------------- | 836| callback | [Callback](./ts-types.md#callback12)\<void> \| undefined | 是 | onReachEnd事件的回调函数。 | 837 838 839### setOnScrollStart<sup>19+</sup> 840 841setOnScrollStart(callback: Callback\<void> | undefined): void 842 843设置[onScrollStart](./ts-container-scrollable-common.md#onscrollstart11)事件的回调。 844 845方法入参为undefined时，会重置事件回调。 846 847**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 848 849**系统能力：** SystemCapability.ArkUI.ArkUI.Full 850 851**参数：** 852 853| 参数名 | 类型 | 必填 | 说明 | 854| ------ | ------ | ---- | -------------------------- | 855| callback | [Callback](./ts-types.md#callback12)\<void> \| undefined | 是 | onScrollStart事件的回调函数。| 856 857 858### setOnScrollStop<sup>19+</sup> 859 860setOnScrollStop(callback: Callback\<void> | undefined): void 861 862设置[onScrollStop](./ts-container-scrollable-common.md#onscrollstop11)事件的回调。 863 864方法入参为undefined时，会重置事件回调。 865 866**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 867 868**系统能力：** SystemCapability.ArkUI.ArkUI.Full 869 870**参数：** 871 872| 参数名 | 类型 | 必填 | 说明 | 873| ------ | ------ | ---- | -------------------------- | 874| callback | [Callback](./ts-types.md#callback12)\<void> \| undefined | 是 | onScrollStop事件的回调函数。 | 875 876### setOnScrollFrameBegin<sup>19+</sup> 877 878setOnScrollFrameBegin(callback: OnScrollFrameBeginCallback | undefined): void 879 880设置[onScrollFrameBegin](./ts-container-scroll.md#onscrollframebegin9)事件的回调。 881 882方法入参为undefined时，会重置事件回调。 883 884**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 885 886**系统能力：** SystemCapability.ArkUI.ArkUI.Full 887 888**参数：** 889 890| 参数名 | 类型 | 必填 | 说明 | 891| ------ | ------ | ---- | -------------------------- | 892| callback | [OnScrollFrameBeginCallback](./ts-container-scroll.md#onscrollframebegincallback18) \| undefined | 是 | onScrollFrameBegin事件的回调函数。 | 893 894 895## OnWillStopDraggingCallback<sup>20+</sup> 896 897type OnWillStopDraggingCallback = (velocity: number) => void 898 899滚动组件划动离手时触发的回调。 900 901**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 902 903**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 904 905**系统能力：** SystemCapability.ArkUI.ArkUI.Full 906 907**参数：** 908 909| 参数名 | 类型 | 必填 | 说明 | 910| -------- | ------ | ---- | ------------------------------------------------------------ | 911| velocity | number | 是 | 划动离手速度，滚动组件的内容向上滚动时速度为正，向下滚动时速度为负。<br/>单位vp/s。 | 912 913## 示例 914 915### 示例1（支持滚动手势） 916该示例通过设置enableScrollInteraction属性，实现了使用手势滚动纵向列表，并在当前显示界面发生改变时回调索引。 917 918ListDataSource说明及完整代码参考[示例1添加滚动事件](./ts-container-list.md#示例1添加滚动事件)。 919 920<!--code_no_check--> 921```ts 922// xxx.ets 923import { ListDataSource } from './ListDataSource'; 924 925@Entry 926@Component 927struct ListExample { 928 private arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); 929 930 build() { 931 Column() { 932 List({ space: 20, initialIndex: 0 }) { 933 LazyForEach(this.arr, (item: number) => { 934 ListItem() { 935 Text('' + item) 936 .width('100%') 937 .height(100) 938 .fontSize(16) 939 .textAlign(TextAlign.Center) 940 .borderRadius(10) 941 .backgroundColor(0xFFFFFF) 942 } 943 }, (item: number) => item.toString()) 944 } 945 .enableScrollInteraction(true) 946 .listDirection(Axis.Vertical) // 排列方向 947 .scrollBar(BarState.Off) 948 .friction(0.6) 949 .divider({ 950 strokeWidth: 2, 951 color: 0xFFFFFF, 952 startMargin: 20, 953 endMargin: 20 954 }) // 每行之间的分界线 955 .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring 956 .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => { 957 console.info('first' + firstIndex); 958 console.info('last' + lastIndex); 959 console.info('center' + centerIndex); 960 }) 961 .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { 962 console.info(' start index: ' + start.index + 963 ' start item group area: ' + start.itemGroupArea + 964 ' start index in group: ' + start.itemIndexInGroup); 965 console.info(' end index: ' + end.index + 966 ' end item group area: ' + end.itemGroupArea + 967 ' end index in group: ' + end.itemIndexInGroup); 968 }) 969 .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { 970 console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset); 971 }) 972 .width('90%') 973 } 974 .width('100%') 975 .height('100%') 976 .backgroundColor(0xDCDCDC) 977 .padding({ top: 5 }) 978 } 979} 980``` 981 982 983 984### 示例2（设置边缘渐隐） 985该示例通过设置fadingEdge属性，实现了List组件开启边缘渐隐效果并设置边缘渐隐长度。 986 987ListDataSource说明及完整代码参考[示例1添加滚动事件](./ts-container-list.md#示例1添加滚动事件)。 988 989<!--code_no_check--> 990```ts 991// xxx.ets 992import { LengthMetrics } from '@kit.ArkUI'; 993import { ListDataSource } from './ListDataSource'; 994 995@Entry 996@Component 997struct ListExample { 998 private arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]); 999 scrollerForList: Scroller = new Scroller(); 1000 1001 build() { 1002 Column() { 1003 1004 List({ space: 20, initialIndex: 0, scroller: this.scrollerForList }) { 1005 LazyForEach(this.arr, (item: number) => { 1006 ListItem() { 1007 Text('' + item) 1008 .width('100%') 1009 .height(100) 1010 .fontSize(16) 1011 .textAlign(TextAlign.Center) 1012 .borderRadius(10) 1013 .backgroundColor(0xFFFFFF) 1014 } 1015 }, (item: number) => item.toString()) 1016 } 1017 .fadingEdge(true, { fadingEdgeLength: LengthMetrics.vp(80) }) 1018 } 1019 .width('100%') 1020 .height('100%') 1021 .backgroundColor(0xDCDCDC) 1022 .padding({ top: 5 }) 1023 } 1024} 1025``` 1026 1027 1028 1029### 示例3（设置裁剪区域） 1030该示例通过设置clipContent属性，改变组件的内容层裁剪区域。 1031 1032<!--code_no_check--> 1033```ts 1034// xxx.ets 1035import { LengthMetrics } from '@kit.ArkUI'; 1036 1037@Entry 1038@Component 1039struct ScrollExample { 1040 scroller: Scroller = new Scroller(); 1041 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 1042 @State clipContent: ContentClipMode | RectShape | undefined = undefined; 1043 1044 build() { 1045 Column() { 1046 Scroll(this.scroller) { 1047 Column() { 1048 ForEach(this.arr, (item: number) => { 1049 Text(item.toString()) 1050 .width(300) 1051 .height(80) 1052 .fontSize(20) 1053 .textAlign(TextAlign.Center) 1054 .backgroundColor(Color.Grey) 1055 }, (item: string) => item) 1056 } 1057 } 1058 .backgroundColor(Color.Blue) 1059 .clipContent(this.clipContent) 1060 .scrollBar(BarState.Off) 1061 .friction(0.6) 1062 .width(300) 1063 .height("50%") 1064 .padding(10) 1065 .safeAreaPadding(LengthMetrics.vp(10)) 1066 .initialOffset({ yOffset: 80 }) 1067 .margin({ top: 20 }) 1068 1069 Button('clipContent SAFE_AREA') 1070 .onClick(() => { 1071 this.clipContent = ContentClipMode.SAFE_AREA; 1072 }).margin({ top: 30 }) 1073 1074 Button('clipContent BOUNDARY') 1075 .onClick(() => { 1076 this.clipContent = ContentClipMode.BOUNDARY; 1077 }).margin({ top: 35 }) 1078 1079 Button('clipContent CONTENT_ONLY') 1080 .onClick(() => { 1081 this.clipContent = ContentClipMode.CONTENT_ONLY; 1082 }).margin({ top: 40 }) 1083 }.width('100%').height('100%').backgroundColor(0xDCDCDC) 1084 } 1085} 1086``` 1087 1088 1089 1090### 示例4（设置滚动条边距） 1091该示例通过设置scrollBarMargin属性，调整滚动组件的滚动条边距。 1092 1093ListDataSource说明及完整代码参考[示例1添加滚动事件](./ts-container-list.md#示例1添加滚动事件)。 1094 1095<!--code_no_check--> 1096```ts 1097// xxx.ets 1098import { ListDataSource } from './ListDataSource'; 1099import { LengthMetrics } from '@kit.ArkUI'; 1100 1101@Entry 1102@Component 1103struct ListExample { 1104 arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); 1105 @State scrollBarMargin: ScrollBarMargin = { start: LengthMetrics.vp(0), end: LengthMetrics.vp(0) }; 1106 1107 build() { 1108 Stack({ alignContent: Alignment.TopStart }) { 1109 Column() { 1110 List({ space: 20, initialIndex: 0 }) { 1111 LazyForEach(this.arr, (item: number, index?: number) => { 1112 ListItem() { 1113 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { 1114 Text('' + item) 1115 .width('100%') 1116 .height(80) 1117 .fontSize(20) 1118 .textAlign(TextAlign.Center) 1119 .borderRadius(10) 1120 .backgroundColor(Color.White) 1121 .flexShrink(1) 1122 } 1123 } 1124 }, (item: number) => item.toString()) 1125 }.width('90%') 1126 .friction(0.6) 1127 .scrollBar(BarState.On) 1128 .scrollBarMargin(this.scrollBarMargin) 1129 }.width('100%') 1130 1131 Button('scrollBarMargin') 1132 .onClick(() => { 1133 this.scrollBarMargin = { start: LengthMetrics.vp(45), end: LengthMetrics.vp(70) }; 1134 }).margin({ top: 5, left: 20 }) 1135 1136 Button('scrollBarMargin2') 1137 .onClick(() => { 1138 this.scrollBarMargin = { start: LengthMetrics.vp(15), end: LengthMetrics.vp(100) }; 1139 }).margin({ top: 200, left: 20 }) 1140 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 1141 } 1142} 1143``` 1144 1145
