一、ScrollView 功能

• ScrollView 是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。

二、支持的 XML 属性

• ScrollView 的共有 XML 属性继承自 StackLayout，StackLayout 详情请参考我的博客：HarmonyOS之常用布局StackLayout的使用。
• ScrollView 的自有 XML 属性见下表：

三、创建 ScrollView

• 在 layout 目录下的 xml 文件中创建 ScrollView，ScrollView 的展示需要布局支持，以 DirectionalLayout 为例，如下所示：

<ScrollView
	    ohos:id="$+id:scrollview"
	    ohos:height="300vp"
	    ohos:width="300vp"
	    ohos:background_element="#FFDEAD"
	    ohos:top_margin="32vp"
	    ohos:bottom_padding="16vp"
	    ohos:layout_alignment="horizontal_center">
	    <DirectionalLayout
	        ohos:height="match_content"
	        ohos:width="match_content">
	        <Image
	            ohos:width="300vp"
	            ohos:height="match_content"
	            ohos:top_margin="16vp"
	            ohos:image_src="$media:plant"/>
	        <!-- 放置任意需要展示的组件 -->
	        ...
	    </DirectionalLayout>
	</ScrollView>

• ScrollView 效果如下：

三、设置 ScrollView

• ScrollView 的速度、滚动、回弹等常用接口如下：

• 根据像素数平滑滚动：

btnScroll.setClickedListener(component -> {
	    scrollView.fluentScrollByY(300);
	});

• 根据像素数平滑滚动效果如下：

• 平滑滚动到指定位置：

scrollView.fluentScrollYTo(500);

• 平滑滚动到指定位置效果如下：

• 设置布局方向：ScrollView 自身没有设置布局方向的属性，所以需要在其子布局中设置，以横向布局 horizontal 为例：

<ScrollView
	    ...
	    >
	    <DirectionalLayout
	        ...
	        ohos:orientation="horizontal">
	        ...
	    </DirectionalLayout>
	</Scrollview>

• 设置布局方向为横向布局效果如下：

• 设置回弹效果
• • 在 xml 中设置：

<ScrollView
	    ...
	    ohos:rebound_effect="true">
	        ...
	</ScrollView>

• • 在 Java 代码中设置：

scrollView.setReboundEffect(true);

• 开启回弹效果如下：

• 设置缩放匹配效果
• • 在 xml 中设置：

<ScrollView
	    ...
	    ohos:match_viewport="true">
	        ...
	</ScrollView>

• • 在 Java 代码中设置：

scrollView.setMatchViewportEnabled(true);

• 设置缩放匹配效果如下：