关于鸿蒙开发中滚动容器Scroll的介绍

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

Scroll的核心用法

用法说明：

1. Scroll设置尺寸
2. 设置溢出的子组件【只支持一个子组件】
3. 滚动方向：支持横向和纵向，默认纵向

Scroll(){
    // 只支持一个子组件
    Column(){
        // 内容放在内部
        // 尺寸超过Scroll即可滚动
    }
}
.width('100%')
.height(200)
.scrollable(ScrollDirection.XXX)

scrollable(value: ScrollDirection) 

设置滚动方向。

取值：

• 纵向：ScrollDirection.Vertical【默认】
• 横向：ScrollDirection.Horizontal
• 不可滚动：ScrollDirection.None

Scroll的常见属性

名称	参数类型	描述
scrollable	ScrollDirection	设置滚动方向 纵向：ScrollDirection.Vertical【默认】 横向：ScrollDirection.Horizontal
scrollBar	BarState	设置滚动条状态 不显示：BarState.Off 常驻显示：BarState.On 按需显示【触摸时显示，2s后消失】：BarState.Auto【默认】
scrollBarColor	string number Color	设置滚动条的颜色 默认值：'#182431'（40%不透明度）
scrollBarWidth	string number	设置滚动条的宽度 默认值：4 单位：vp
edgeEffect	value：EdgeEffect	设置边缘滑动效果 无效果：EdgeEffect.None 弹簧：EdgeEffect.Spring 阴影：EdgeEffect.Fade

Scroll的控制器

核心步骤：

实例化 Scroller 的控制器

绑定给 Scroll 组件

控制器的方法 控制滚动，控制器属性 获取滚动距离。

struct ScrollDemo {
    scroller: Scroller = new Scroller()
    
    build() {
        Column() {
            Scroll(this.scroller) { ... }
            Row() {
                Button('返回顶部')
                    .onClick(()=>{
                        this.scroller.scrollEdge(Edge.Top)
                    })
                Button('获取滚动距离')
                    .onClick(()=>{
                        const x = this.scroller.currentOffset().xOffset
                        const y = this.scroller.currentOffset().yOffset
                        AlertDialog.show({
                            message:`x:${x},y:${y}`
                        })
                    })
            }
        }
    }
}

Scroll的事件

滚动事件回调，返回滚动时水平、竖直方向偏移量，单位vp。

onScroll

语法：onScroll(event: (xOffset: number, yOffset: number) => void)

Scroll(){
    // 内容
}
.onScroll((x,y)=>{
    //滚动时 一直触发
    // 可以结合 scroller的currentOffset方法 获取滚动距离
})

触发该事件的条件

1. 滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2. 通过滚动控制器API接口调用。
3. 越界回弹。

从API version12开始废弃不再使用，推荐使用onWillScroll事件替代。

onWillScroll

滚动事件回调，Scroll滚动前触发。

语法：onWillScroll(handler: ScrollOnWillScrollCallback)

触发该事件的条件

1. 滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2. 通过滚动控制器API接口调用。
3. 越界回弹。

ScrollOnWillScrollCallback的取值

参数名	类型	必填	说明
xOffset	number	是	每帧滚动时水平方向的偏移量，Scroll中的内容向左滚动时偏移量为正，向右滚动时偏移量为负。 单位：vp
yOffset	number	是	每帧滚动时竖直方向的偏移量，Scroll中的内容向上滚动时偏移量为正，向下滚动时偏移量为负。 单位：vp
scrollState	ScrollState	是	当前滚动状态
scrollSource	ScrollSource	是	当前滚动操作来源

ScrollState枚举说明

名称	枚举值	描述
ldle	0	空闲状态。滚动状态回归空闲时触发，控制器提供的无动画方法控制滚动时触发。
Scroll	1	滚动状态。手指拖动List，拖动滚动条和滚动鼠标滚轮时触发。
Fling	2	惯性滚动状态。动画控制的滚动都会触发。包括快速滑动松手后的惯性滚动，划到边缘回弹的滚动，快速拖动内置滚动条松手后的惯性滚动，使用滚动控制器提供的带动画的方法控制的滚动。

ScrollSource枚举说明

名称	枚举值	描述
DRAG	0	拖拽事件
FLING	1	拖拽结束之后的惯性滑动
EDGE_EFFECT	2	EdgeEffect.Spring的边缘滚动效果
OTHER_USER_INPUT	3	除拖拽外的其他用户输入，如鼠标滚轮、键盘事件等
SCROLL_BAR	4	滚动条的拖拽事件
SCROLL_BAR_FLING	5	滚动条拖拽结束后的带速度的惯性滑动
SCROLLER	6	Scroller的不带动效方法
SCROLLER_ANIMATION	7	Scroller的带动效方法