4.1【HarmonyOS鸿蒙开发】组件ScrollView

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

ScrollView是一种带滚动性能的组件，它采纳滑动的形式在无限的区域内显示更多的内容。

一、反对的XML属性

ScrollView的共有XML属性继承自：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为例。

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:alignment="center"    ohos:orientation="vertical">    <ScrollView        ohos:id="$+id:scrollview"        ohos:height="500vp"        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:mengmao"/>            <!-- 搁置任意须要展现的组件 -->            ...        </DirectionalLayout>    </ScrollView></DirectionalLayout>

预览一下成果：

<img src="https://img.chengxuka.com/ScrollViewyunxing1.gif" alt="ScrollViewyunxing1" style="zoom:50%;" />

三、设置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：适度滚动百分比，默认值40overscrollRate：适度滚动率，默认值0.6remainVisiblePercent：应放弃可见内容的最小百分比，默认值20

1、滚动指定的间隔，默认单位是px。

                //1.获取scrollview对象        ScrollView scrollView = (ScrollView) findComponentById(ResourceTable.Id_scrollview);        //2.点击        scrollView.setClickedListener(component -> {            //点击一下，沿y轴将内容平滑地滚动了指定数量的像素。            scrollView.fluentScrollByY(500);        });

预览成果：

<img src="https://img.chengxuka.com/ScrollViewyunxing2.gif" alt="ScrollViewyunxing2" style="zoom:50%;" />

每点击一下，y轴上就滚动500px。

2、滚动到指定的坐标地位。默认单位是px

 // 点击一下，沿y轴将内容平滑地滚动了指定数量的像素。            // scrollView.fluentScrollByY(500);            // 点击一下，沿y轴将内容平滑地滚动到指定的坐标地位。            scrollView.fluentScrollYTo(500);            // 留神以上两个办法的区别：fluentScrollByY(500)是滚动了500px，每次滚动的间隔是500px，再点击还是会滚动500px，            // 而fluentScrollYTo(500)，是固定的就滚动到500px这个地位。

预览成果：点击一下滚动到y轴500px的地位。再点击也是一样的，除非滑动。

<img src="https://img.chengxuka.com/ScrollViewyunxing3.gif" alt="ScrollViewyunxing3" style="zoom:50%;" />

留神以上两个办法的区别：

fluentScrollByY(500)是滚动了500px，每次滚动的间隔是500px，再点击还是会滚动500px，
而fluentScrollYTo(500)，是固定的就滚动到500px这个地位。

3、设置布局方向：ScrollView本身没有设置布局方向的属性，所以须要在其子布局中设置。以横向布局horizontal为例：

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

咱们在layout目录下，从新创立一个layout布局文件：demo1_scrollview.xml。

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:alignment="center"    ohos:orientation="vertical">    <ScrollView        ohos:id="$+id:scrollview2"        ohos:height="match_content"        ohos:width="250vp"        ohos:background_element="#FFDEAD"        ohos:padding="16vp"        ohos:layout_alignment="horizontal_center">        <DirectionalLayout            ohos:height="match_content"            ohos:width="match_content"            ohos:orientation="horizontal"            >            <Image                ohos:width="300vp"                ohos:height="match_content"                ohos:margin="10vp"                ohos:image_src="$media:wallper"/>            <Image                ohos:width="300vp"                ohos:height="match_content"                ohos:margin="10vp"                ohos:image_src="$media:wallper"/>            <Image                ohos:width="300vp"                ohos:height="match_content"                ohos:margin="10vp"                ohos:image_src="$media:wallper"/>        </DirectionalLayout>    </ScrollView></DirectionalLayout>

预览成果：

<img src="https://img.chengxuka.com/ScrollViewyunxing4.gif" alt="ScrollViewyunxing4" style="zoom:50%;" />

4、设置回弹成果。

在xml布局中设置：

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

在Java代码中设置：

scrollView.setReboundEffect(true);

预览成果：

<img src="https://img.chengxuka.com/ScrollViewyunxing5.gif" alt="ScrollViewyunxing5" style="zoom:50%;" />

5、设置缩放匹配成果。

指定滚动组件是否容许拉伸其组件以填充其视口。

在xml中设置：

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

在Java代码中设置：

scrollView.setMatchViewportEnabled(true);

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换QQ群：714518656

4、视频课：https://www.chengxuka.com