鸿蒙Scroll滚动组件的用法（附带示例）

Scroll 是可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

Scroll 的属性比较丰富，并且每个属性均有自己的作用，可以通过多个属性的组合使用来实现我们想要的滚动容器。

Scroll的参数

Scroll 的参数是一个 Scroller（控制器），Scroller 可以将 Scroll 组件绑定至容器组件，然后控制容器组件的滚动。同一个控制器不可以控制多个容器组件。目前支持将 Scroll 组件绑定到 List、Scroll、ScrollBar、Grid、WaterFlow 上。

要使用 Scroller，只需导入对象即可：

scroller: Scroller = new Scroller()

Scroller 有多种方法，说明如下：

• scrollTo：滑动到指定位置；
• scrollEdge：滚动到容器边缘；
• scrollPage：滚动到下一页或上一页；
• currentOffset：返回当前的滚动偏移量；
• scrollToIndex：滑动到指定 Index；
• scrollBy：滑动指定距离；
• isAtEnd：查询组件是否滚动到底部；
• getItemRect：获取子组件的大小位置。

Scroll的属性

Scroll的属性有以下几种：
1) scrollable：设置滚动方向。参数如下：

• ScrollDirection.Vertical：竖直方向滚动；
• ScrollDirection.Horizontal：水平方向滚动；
• ScrollDirection.None：不可滚动。

2) scrollBar：设置滚动条状态。参数如下：

• BarState.Off：不显示；
• BarState.on：常驻显示；
• BarState.Auto：按需显示（触摸时显示，2秒后消失）。

3) scrollBarColor：设置滚动条的颜色。

4) scrollBarWidth：设置滚动条的宽度，不支持百分比设置。

5) scrollSnap：设置 Scroll 组件的限位滚动模式。
① 参数如下：

• snapAlign：设置 Scroll 组件限位滚动时的对齐方式。

② 属性如下：

• ScrollSnapAlign.NONE：默认无项目滚动对齐效果。
• ScrollSnapAlign.START：视图中的第一项将在列表的开头对齐。
• ScrollSnapAlign.CENTER：视图中的中间项将在列表中心对齐。
• ScrollSnapAlign.END：视图中的最后一项将在列表末尾对齐。
• enableSnapToStart：在Scroll组件限位滚动模式下，该属性设置为false后，允许Scroll在开头和第一个限位点间自由滑动。
• enableSnapToEnd：在Scroll组件限位滚动模式下，该属性设置为false后，允许Scroll在最后一个限位点和末尾间自由滑动。

6) edgeEffect：设置边缘滑动效果。可选参数如下：

• value：设置Scroll组件的边缘滑动效果，支持弹簧效果和阴影效果。取值如下：
  • EdgeEffect.Spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
  • EdgeEffect.Fade：阴影效果，滑动到边缘后会有圆弧状的阴影。
  • EdgeEffect.None：滑动到边缘后无效果，是默认值。
• alwaysEnabled：组件内容大小小于组件自身时，设置是否开启滑动效果，参数类型为布尔型，默认值为true。

7) enableScrollInteraction：设置是否支持滚动手势。当设置为 false 时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。

Scroll的事件

通过 Scroll 的事件，可以设置 Scroll 执行的动作。其事件有以下几种：

• onScrollFrameBegin：每帧开始滚动时触发。
• onScroll：滚动事件回调。
• onScrollEdge：滚动到边缘事件回调。
• onScrollStart：滚动开始时触发。
• onScrollStop：滚动停止时触发。
• onReachStart：Scroll到达起始位置时触发。
• onReachEnd：Scroll到达末尾位置时触发。

Scroll组件的示例

示例代码如下：

import { router } from '@kit.ArkUI';
import { Navbar as MyNavbar } from '../components/navBar';

@Entry
@Component
struct ScrollCom {
  @State desc: string = '';
  scroller: Scroller = new Scroller;
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

  // 加载页面时接收传递过来的参数
  onPageShow(): void {
    // 获取传递过来的参数对象
    const params = router.getParams() as Record<string, string>;
    // 获取传递的值
    if (params) {
      this.desc = params.desc as string;
      this.title = params.value as string;
    }
  }

  build() {
    Column() {
      MyNavbar({ title: this.title });
      Divider().width('100%').strokeWidth(2).color(Color.Black);

      Row() {
        Text(`组件描述：${this.desc}`)
      }

      Scroll(this.scroller) {
        Column() {
          ForEach(this.arr, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(100)
              .backgroundColor('#ffffff')
              .borderWidth(1)
              .borderColor('#000000')
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
          })
        }
        .width('100%')
        .backgroundColor('#dcdcdc')
      }
      .backgroundColor('#333333')
      .height('80%')
      .edgeEffect(EdgeEffect.Spring)
      .scrollSnap({
        snapAlign: ScrollSnapAlign.START,
        snapPagination: 200,
        enableSnapToStart: true,
        enableSnapToEnd: true
      })
      .width('100%')
      .height('100%')
    }
  }
}

代码效果如下图所示：