关于harmonyos:41HarmonyOS鸿蒙开发组件ScrollView

作者：韩茹

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

鸿蒙巴士专栏作家

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

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”

在 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 的速度、滚动、回弹等罕用罕用办法如下：

办法	作用
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);

关于harmonyos:41HarmonyOS鸿蒙开发组件ScrollView

4.1【HarmonyOS 鸿蒙开发】组件 ScrollView

一、反对的 XML 属性

二、创立 ScrollView

三、设置 ScrollView