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

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

Scroll的核心用法

用法说明：

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

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().xOffsetconst y = this.scroller.currentOffset().yOffsetAlertDialog.show({message:`x:${x},y:${y}`})})}}}
}

Scroll的事件

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

onScroll

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

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

触发该事件的条件

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

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

onWillScroll

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

语法：onWillScroll(handler: ScrollOnWillScrollCallback)

触发该事件的条件

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

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的带动效方法