【HarmonyOS 专题】07 简单了解 ScrollView 滑动组件

阿策小和尚

发布于 2022-03-29 17:46:31

5920

发布于 2022-03-29 17:46:31

和尚在前面学习 Image 时当前屏幕展示不全，需要用到 ScrollView 滑动组件，和尚今天进一步学习一下；

ScrollView

ScrollView 是一种可滑动的组件，可以通过滑动在有限的空间内展示更多的空间组件；ScrollView 继承自 StackLayout；与 Android 使用方法一样，在 ScrollView 使用时，内部仅支持一个元素，即需要将滑动展示的元素放在一个 Layout 布局内；

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="center"
        ohos:orientation="vertical">

        <Image
            ohos:height="300vp"
            ohos:width="300vp"
            ohos:background_element="$color:color_btn_start"
            ohos:image_src="$media:icon_hzw01"
            ohos:margin="10vp"
            ohos:scale_mode="inside"/>

        <Image
            ohos:height="300vp"
            ohos:width="300vp"
            ohos:background_element="$color:color_btn_start"
            ohos:image_src="$media:icon_hzw02"
            ohos:margin="10vp"
            ohos:scale_mode="inside"/>

        <Image
            ohos:height="300vp"
            ohos:width="300vp"
            ohos:background_element="$color:color_btn_start"
            ohos:image_src="$media:icon_hzw03"
            ohos:margin="10vp"
            ohos:scale_mode="inside"/>
    </DirectionalLayout>
</ScrollView>

1. orientation 滑动方向

ScrollView 与 Android 中滑动组件不同，并没有设置滑动方向的属性，但是可以通过 ScrollView 内部的 Layout 设置水平滑动或竖直滑动；注意，当设置水平滑动时，内部的 Layout 宽度尽量不要使用 match_parent 影响滑动触发；

<ScrollView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:background_element="#FFDEAD"
    ohos:padding="10vp">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:orientation="horizontal"
        >
        ...
    </DirectionalLayout>
</ScrollView>

2. rebound_effect 回弹效果

ScrollView 可以通过 rebound_effect 属性设置回弹效果，常用于自定义滑动列表；

<ScrollView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:background_element="#FFDEAD"
    ohos:rebound_effect="true">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:orientation="vertical"
        >
        ...
    </DirectionalLayout>
</ScrollView>

3. fluentScrollByX/Y 设置滑动距离

ScrollView 可以通过 fluentScrollBy 方式设置滑动距离，单位是 px；和尚测试每次点击按钮，ScrollView 向下滑动 300px；

ScrollView scrollView = (ScrollView) findComponentById(ResourceTable.Id_test_scroll);
Button button = (Button) findComponentById(ResourceTable.Id_test_scroll_btn);
button.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        scrollView.fluentScrollByY(300);
    }
});

4. fluentScrollYTo 设置固定滑动点

fluentScrollYTo / fluentScrollXTo 为设置固定的滑动点，单位是 px，fluentScrollByX/Y 是每次都会累加，而 fluentScrollYTo 只是一个固定的点位；

Button button2 = (Button) findComponentById(ResourceTable.Id_test_scroll_btn2);
button2.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        scrollView.fluentScrollYTo(500);
    }
});

5. doFling 设置滑动速度

ScrollView 还提供了 doFling 等多种设置滑动速度的方式，单位为 px；

Button button3 = (Button) findComponentById(ResourceTable.Id_test_scroll_btn2);
button3.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        scrollView.doFling(500);
    }
});

和尚对 ScrollView 高级的自定义方式还不够深入，后期会在自定义滑动列表组件时尝试更多回弹效果和速率方面的属性；如有错误，请多多指导！

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-02-27，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

android

本文分享自阿策小和尚微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

android

登录后参与评论

0 条评论

热度