鸿蒙NEXT版仿抖音快手App的实现自动滚动功能

上一节我们利用形状组件在图像列表中实现了高亮选中效果，那么在打开图像列表页面时，往往希望自动定位到已选中的图像，而不是让用户手工滑动屏幕寻找已选中的图像。这种列表元素的自动定位功能，用到了列表容器的Scroller参数。

Scroller是鸿蒙提供的可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动。同一个滚动控制器不可以控制多个容器组件，目前Scroller支持绑定到List、Scroll、Grid、WaterFlow等允许滚动的容器组件上。

Scroller与滚动有关的方法说明如下：

scrollTo：滑动到指定位置。

scrollEdge：滚动到容器边缘，不区分滚动轴方向，Edge.Top和Edge.Start表现相同，Edge.Bottom和Edge.End表现相同。Scroll组件默认有动画，Grid、List、WaterFlow组件默认无动画。

scrollPage：滚动到下一页或者上一页。

scrollToIndex：滑动到指定Index，支持设置滑动额外偏移量。第一个参数填要滚动到的索引项；第二个参数表示是否平滑滚动，填true表示展示滚动动画，填false表示不展示滚动动画。

scrollBy：滑动指定距离。

以上的方法说明有点容易混淆，其实滚动操作主要分为下列三类，按照各类操作调用对应的方法即可：

1、滑动到容器顶部或者滑动到容器底部，此时可调用scrollEdge方法。

2、滑动到某个列表项，此时调用scrollToIndex方法，指定列表项的序号即可。

3、从当前位置往某个方向滑动若干偏移，此时调用scrollTo或scrollBy均可，这两个方法都能指定横轴上的滑动偏移和纵轴上的滑动偏移。

就本项目而言，滑动到图像列表已选中的图像，无疑要调用scrollToIndex方法。那么首先声明一个滚动器对象，如下所示：

private scroller: Scroller = new Scroller(); // 滚动器

接着让列表容器绑定该滚动器，列表容器的布局代码框架如下所示：

List({ space: 0, initialIndex: 0, scroller: this.scroller }) {
  ForEach(this.frameArray, (item: FrameThumbnail) => {
    ListItem() {
      // 这里省略每个列表项的布局代码
    }
  })
}
.listDirection(Axis.Horizontal)
.width('100%').height(100)

然后在触发滚动操作的地方调用以下代码，即可让滚动器执行某个列表项的定位滚动：

setTimeout(() => {
  this.scroller.scrollToIndex(seq, true, ScrollAlign.END)
}, 500)

下一篇文章会介绍如何把位图数据PixelMap转存为图片文件。