鸿蒙应用开发 | 滚动视图(ScrollView) 的功能和用法

女爷i 2022-09-04 01:45 488阅读 0赞

> 导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。

app开发很常见的数据太多，需要完整显示的时候用到滚动效果，今天来看看鸿蒙种的布局滚动ScrollView。

![图片][f9d4265662f4545c6ce8143948ab5510.png]

不多说，今天的内容不多，下面我们开始今天的文章，还是老规矩，通过如下几点来说：

> 1，简介2，属性 3，实战

### 简介 ###

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

比如一个手机界面 分为两部分 ，一部分是 功能菜单，下一部分是列表，为了显示更多的内容需要 在滚动下部列表的时候 上面的部分也向上滚动，这个时候就需要用到 ScrollView属性。

### 用到的属性 ###

ScrollView的共有XML属性继承自：StackLayout  
主要有两个特殊属性：

match\_viewport 是否拉伸匹配 ohos:match\_viewport="true"

rebound\_effect 回弹效果 ohos:rebound\_effect="true"

### 实战 ###

**1，创建项目，添加滚动布局**

<?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="match_content"
            ohos:width="match_content"
            ohos:rebound_effect="true"
            >
            
            
    
            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:left_margin="20vp"
                ohos:orientation="vertical"
                ohos:right_margin="20vp">
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:photo8"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:photo4"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:food5"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:photo8"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:photo4"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:food5"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:photo8"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:photo4"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="horizontal_center"
                    ohos:multiple_lines="true"
                    ohos:text="ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。"
                    ohos:text_size="17vp"
                    />
    
                <Image
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:image_src="$media:food5"
                    ohos:layout_alignment="center"
                    ohos:scale_mode="clip_center"/>
    
            </DirectionalLayout>
    
        </ScrollView>
    
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:top_margin="30vp"
            ohos:bottom_margin="60vp"
            ohos:orientation="horizontal"
            >
    
            <Button
                ohos:id="$+id:option_scroll"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:background_element="#000000"
                ohos:text="根据像素平滑滚动操作"
                ohos:text_color="#ffffff"
                ohos:text_size="17vp"/>
    
            <Button
                ohos:id="$+id:option_scroll2"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:left_margin="20vp"
                ohos:background_element="#000000"
                ohos:text="滚动到制定位置"
                ohos:text_color="#ffffff"
                ohos:text_size="17vp"/>
        </DirectionalLayout>
    
    </DirectionalLayout>

说明：添加一个默认的 ScrollView ，ScrollView中包含了一个线性布局 DirectionalLayout，布局中放置多个组件。

当内容超出屏幕长度后，通过ScrollView组件做滚动效果。

1，ScrollView 属性设置 ohos:rebound\_effect="true" 回弹效果

2，可以设置属性

ohos:match\_viewport="true" 拉伸匹配效果 ，该属性在ScrollView的子组件无法填充满ScrollView时使用，

默认为false，子组件按照自身设置大小展示，设置为true时，子组件填充满ScrollView。

效果如下：

![图片][d46c92ba40ed68a6461c66e84d3e1548.gif]

除了当前的xml布局中设置属性外，还有一些 通过代码控制的属性操作：

option_scroll.setClickedListener(component -> {
        scrollView.fluentScrollByY(300); // 根据像素数平滑滚动。
    });
    
    option_scroll2.setClickedListener(component -> {
        scrollView.fluentScrollYTo(500); // 平滑滚动到指定位置。
    });

更多属性：

![图片][3567fb3d65048ef324a1f0e34001deea.png]

本篇内容结束：

源码：[https://gitee.com/codegrowth/haomony-develop/tree/master/ScrollView][https_gitee.com_codegrowth_haomony-develop_tree_master_ScrollView]

关注公众号【**程序员漫话编程**】，后台回复 **”鸿蒙“** ，**即可获得上千鸿蒙开源组件。**

> 原创不易，有用就关注一下。要是帮到了你 就给个三连吧，多谢支持。  
>

**觉得不错的小伙伴，记得帮我** 点个赞和关注哟，笔芯笔芯~\*\*

> 作者：码工  
>

有问题请留言或者私信，可以 微信搜索：**程序员漫话编程**，关注公众号获得更多免费学习资料。

[f9d4265662f4545c6ce8143948ab5510.png]: /images/20220829/ea3b599aa6ab4790bee10e07238e97e5.png
[d46c92ba40ed68a6461c66e84d3e1548.gif]: /images/20220829/64864771d3914a31898ed5b2fd5171cd.png
[3567fb3d65048ef324a1f0e34001deea.png]: /images/20220829/96c24657939f4af1a9cbb39adce7c794.png
[https_gitee.com_codegrowth_haomony-develop_tree_master_ScrollView]: https://gitee.com/codegrowth/haomony-develop/tree/master/ScrollView