4.1【HarmonyOS鸿蒙开发】组件ScrollView

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>

预览一下效果：

三、设置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);
        });

预览效果：

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

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

 // 点击一下，沿y轴将内容平滑地滚动了指定数量的像素。
            // scrollView.fluentScrollByY(500);
            // 点击一下，沿y轴将内容平滑地滚动到指定的坐标位置。
            scrollView.fluentScrollYTo(500);

            // 注意以上两个方法的区别：fluentScrollByY(500)是滚动了500px，每次滚动的距离是500px，再点击还是会滚动500px，
            // 而fluentScrollYTo(500)，是固定的就滚动到500px这个位置。

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

注意以上两个方法的区别：

​ 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>

预览效果：

4、设置回弹效果。

在xml布局中设置：

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

在Java代码中设置：

scrollView.setReboundEffect(true);

预览效果：

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