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

4.1【HarmonyOS 鸿蒙开发】组件 ScrollView

作者：韩茹

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

鸿蒙巴士专栏作家

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

一、反对的 XML 属性

ScrollView 的共有 XML 属性继承自：StackLayout

ScrollView 的自有 XML 属性见下表：

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

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