HarmonyOS之常用组件ScrollView的功能和使用

Posted 2021-07-03 Forever_wj

一、ScrollView 功能

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

二、支持的 XML 属性

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

属性名称	中文描述	取值	取值说明	使用案例
match_viewport	是否拉伸匹配	boolean类型	可以直接设置true/false，也可以引用boolean资源	ohos:match_viewport=“true" ohos:match_viewport=”$boolean:true"
rebound_effect	回弹效果	boolean类型	可以直接设置true/false，也可以引用boolean资源	ohos:rebound_effect=“true" ohos:rebound_effect=”$boolean:true"

三、创建 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 的速度、滚动、回弹等常用接口如下：

方法	作用
doFling(int velocityX, int velocityY) doFlingX(int velocityX) doFlingY(int velocityY)	设置X轴和Y轴滚动的初始速度，单位（px）
fluentScrollBy(int dx, int dy) fluentScrollByX(int dx) fluentScrollByY(int dy)	沿坐标轴将内容平滑地移动指定数量的像素，单位（px）
fluentScrollTo(int x, int y) fluentScrollXTo(int x) fluentScrollYTo(int y)	根据指定坐标平滑滚动到指定位置，单位（px）
setReboundEffect(boolean enabled)	设置是否启用回弹效果，默认false
setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent) setReboundEffectParams(ReboundEffectParams reboundEffectParams) setOverscrollPercent(int overscrollPercent) setOverscrollRate(float overscrollRate) setRemainVisiblePercent(int remainVisiblePercent)	配置回弹效果 overscrollPercent：过度滚动百分比，默认值40 overscrollRate：过度滚动率，默认值0.6 remainVisiblePercent：应保持可见内容的最小百分比，默认值20

• 根据像素数平滑滚动：

	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);

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