HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（十一）利用Scroller实现自动滚动功能

HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（十一）利用Scroller实现自动滚动功能 上一节我们利用形状组件在图像列表中实现了高亮选中效果，那么在打开图像列表页面时，往往希望自动定位到已选中的图像，而不是让用户手工滑动屏幕寻找已选中的图像。这种列表元素的自动定位功能，用到了列表容器的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，支持设置滑动额外偏移量。
• 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转存为图片文件。