鸿蒙UI开发之滚动组件overscroll-decor安装和使用介绍

在鸿蒙UI开发中，滚动列表的交互体验一直是开发者关注的重点。今天要介绍的overscroll-decor，就是专门解决过度滚动（overscroll）动画效果的一个开源库。它能让你的RecyclerView、ListView、ScrollView、GridView等组件拥有类似iOS的丝滑回弹体验，而且几乎可以套用到所有Android本机可滚动视图上——当然，在鸿蒙环境下，它的用法大同小异。

功能特点

先聊聊这个库的亮点。几个关键点值得拿出来说：

• 兼容性广：支持Android API 14及以上版本，覆盖了绝大多数设备。
• 轻量级：体积小，没有任何额外依赖，对应用性能几乎零影响。
• 可扩展性强：允许开发者完全自定义过度滚动的行为和视觉效果，想怎么玩都行。
• 社区支持：作为开源项目，有活跃的社区和持续的更新维护，遇到问题不至于抓瞎。

下载安装

安装方式很简单，一条命令搞定：

ohpm install @ohos/overscroll-decor

主要接口列表

具体有哪些接口可用？下面这个表格列得清清楚楚，方便你快速查阅：

使用说明

接下来看看具体怎么用。所有滚动容器视图的使用方法都大同小异，这里以GridView为例，分四步走：

1、初始化：实例化OverScrollDecor.Model 对象

private model: OverScrollDecor.Model = new OverScrollDecor.Model()

2、属性设置：通过Model类对象设置UI属性来自定义所需风格

private aboutToAppear() {
   this.model
     .setUpOverScroll(true)
     .setOrientation(OverScrollDecor.ORIENTATION.VERTICAL)
     .setOverScrollBounceEffect(true)
     .setScrollBar(true)
     .setWidth("100%")
     .setHeight("80%")
 }

3、子组件绘制：

@Builder SpecificChild() {
   Column({ space: 10 }) {
     ......
   }.width('100%')
 }

4、界面绘制：

build() {
 Stack({ alignContent: Alignment.TopStart }) {
       ......
 OverScrollDecor({ model: this.model!!, child: () => { this.SpecificChild() } })
 ......
}

属性说明

最后再梳理一下默认属性，方便你快速上手时调整：

1. 滚动组件高：默认 px2vp(2340)，即 mHeight: number | string = px2vp(2340)
2. 滚动组件宽：默认 px2vp(lpx2px(720))，即 mWidth: number | string = px2vp(lpx2px(720))
3. 滚动组件外边距：默认16，即 mMargin: number = 16
4. 组件滚动方向：默认VERTICAL，即 mOrientation: ORIENTATION = 0
5. 滚动条设置：默认true，即 mScrollBar: boolean = true
6. 边缘滚动效果设置：默认false，即 mOverScrollBounceEffect: boolean = false
7. 滚动设置：默认true，即 mUpOverScroll: boolean = true

这些默认值基本能满足大多数场景，如果你需要更个性化的交互反馈，直接修改对应属性即可。整体而言，overscroll-decor上手成本很低，效果却很讨喜，值得在你的鸿蒙项目里试一试。