Harmony OS — ScrollView滑动视图

Posted 2021-07-16 王睿丶

文章目录

• • 1、ScrollView 是什么？
  • 2、简单实用
  • 3、设置 ScrollView
  • 4、了解更多

1、ScrollView 是什么？

简单：滑动视图
官方：ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。

2、简单实用

 <ScrollView
        ohos:id="$+id:scrollview"
        ohos:height="300vp"
        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:android"/>
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:AI"/>
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:AIOT"/>

            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:HarmonyOS"/>

        </DirectionalLayout>
    </ScrollView>

3、设置 ScrollView

（1）点击按钮，根据像素数平滑滚动。

       ScrollView scrollView = (ScrollView) findComponentById(ResourceTable.Id_scrollview);
        Button btnScroll= (Button) findComponentById(ResourceTable.Id_btnScroll);
        //根据像素数平滑滚动
        btnScroll.setClickedListener(component -> {
            scrollView.fluentScrollByY(300);
        });

<?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:orientation="vertical"
    ohos:left_padding="40vp"
    ohos:top_padding="40vp">

    <ScrollView
        ohos:id="$+id:scrollview"
        ohos:height="300vp"
        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:Android"/>
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:AI"/>
            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:AIOT"/>

            <Image
                ohos:width="300vp"
                ohos:height="match_content"
                ohos:top_margin="16vp"
                ohos:image_src="$media:HarmonyOS"/>

        </DirectionalLayout>
    </ScrollView>

    <Button
        ohos:id="$+id:btnScroll"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="#FFF10B0B"
        ohos:text_size="20vp"
        ohos:text_color="#FFFAF6F6"
        ohos:top_margin="15fp"
        ohos:text="Scroll By Y：300"/>

</DirectionalLayout>

（2）点击按钮，平滑滚动到指定位置

scrollView.fluentScrollYTo(500);

（3）设置水平方向

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

（4）设置回弹效果

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

scrollView.setReboundEffect(true);

（5）设置缩放匹配效果

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

scrollView.setMatchViewportEnabled(true);

4、了解更多

ScrollView 更多