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

最新推荐文章于 2025-04-15 22:43:59 发布
最新推荐文章于 2025-04-15 22:43:59 发布
阅读量126 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： harmonyos 华为
原文链接：https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/119548833

简介
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"
        >
        <!--ohos:rebound_effect="true" 设置回弹效果-->
        <!-- ohos:match_viewport="true" 设置拉伸匹配效果 该属性在ScrollView的子组件无法填充满ScrollView时使用，
        默认为false，子组件按照自身设置大小展示，设置为true时，子组件填充满ScrollView。-->
 
        <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。

效果如下：

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

 

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

更多属性：

图片

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/119548833

scratchpads
关注
鸿蒙开发-横向滚动视图的实现
beargrey的博客
05-16 1311
在鸿蒙里可以使用overflow: scroll实现纵向的滚动，然而这个样式在鸿蒙里目前仅支持纵向滚动，是不支持横向滚动的。所以这里笔者使用了list组件来实现横向滚动，下面是预览图。 下面贴代码 js部分 export default { data: { arrs:[] }, onInit(){ for(let i = 0;i<=100;i++){ this.arrs.push("第"+i+"项") .
【鸿蒙实战开发】HarmonyOS UI 开发
HarmonyOS007的博客
07-27 1270
在 HarmonyOS 中，你可以自定义 UI 组件以满足特定的应用需求。自定义 UI 组件允许你创建自己的界面元素，这些元素可以包含特定的样式、行为和功能。定义 HTML 结构： 首先，定义组件的 HTML 结构。这包括使用 HTML 标记和元素来描述组件的外观和布局。</div>应用 CSS 样式： 使用 CSS 来为组件定义样式，包括颜色、字体、边框等。cssCopy code编写 JavaScript 逻辑： 使用 JavaScript 来添加组件的交互行为和逻辑。
ScrollView
03-07
titanium ScrollView
Android 中文 API (100) —— ScrollView
weixin_34194551的博客
01-27 231
前言 　　春节即至，谨代表Android中文翻译组全体同仁祝大家身体健康，工作顺利！从第一篇译稿2010年8月27发布至今天2011年1月27整5个月，共发布100篇译文，3个合集，在新的一年里，翻译组仍将坚持Android相关的翻译工作，秉承开源、合作、共享和坚持的信念打持久战，感谢大家的关心和支持！ 　　本章内容是android.widget.ScrollView，版本为Android 2...
ScrollView（滚动视图）详解和按钮点击事件
最新发布
百锦再的博客
04-15 1万+
的布局容器，允许内容超出屏幕时通过滑动查看。：注册表单、长文章、设置页面等需要滚动的界面。是 Android 中用于实现。简洁且内存安全，适合简单逻辑。如果需要水平滚动，使用。
iOS学习笔记——滚动视图（scrollView）
热门推荐
hengshujiyi的专栏
03-20 6万+
原始地址：http://blog.youkuaiyun.com/u012889435/article/details/17523705 滚动视图：在根视图中添加UIScrollViewDelegate协议，声明一些对象属性 [objc] view plaincopy @interface BoViewController : UIV
视图篇——UIScrollView学习要点
code life
03-16 419
ScrollView原理       视图的滚动过程，其实是在不断修改原点坐标。当手指触摸后，ScrollView会暂时拦截触摸事件，使用一个计时器。假如在计时器到点后没有发生手指移动事件，那么ScrollView发送tracking events到被点击的subView；若是在计时器到点后发生了移动事件，那么ScrollView取消tracking自己促发滚动。 其子类可以重载 t
scrollview
u014412933的专栏
05-12 779
一、创建  1. CGRect bounds = [ [ UIScreen mainScreen ] applicationFrame ] ;    2. UIScrollView* scrollView = [ [UIScrollView alloc ] initWithFrame:bounds ];  当你创建完滚动视图后，你可以将另一个视图的内容粘合到滚动视图的空白页上。这回创建一个滚
【OpenHarmony】 鸿蒙 UI开发之滚动组件overscroll-decor
CTrup的博客
12-20 671
类似iOS风格的边缘滚动效果视图。支持下列视图：RecyclerView, ListView, GridView, ViewPager, ScrollView, HorizontalScrollView, Any View - Text, Image…this.model。
HarmonyOS NEXT鸿蒙（开发进阶）基于RN框架实现高性能瀑布流页面
adaedwa187545的博客
10-21 1186
本文针对应用开发中相当常见的瀑布流页面场景，基于按需渲染、组件复用等技术，使用RN框架实现了高性能瀑布流页面。本文提供详细的开发步骤，帮助开发人员高效实现高性能瀑布流页面。
【鸿蒙开发实战教程】HarmonyOS UI 开发
HarmonyOS_001的博客
06-17 1543
在 HarmonyOS 中，你可以自定义 UI 组件以满足特定的应用需求。自定义 UI 组件允许你创建自己的界面元素，这些元素可以包含特定的样式、行为和功能。创建自定义 UI 组件通常包括以下步骤：●定义 HTML 结构： 首先，定义组件的 HTML 结构。这包括使用 HTML 标记和元素来描述组件的外观和布局。</div>●应用 CSS 样式： 使用 CSS 来为组件定义样式，包括颜色、字体、边框等。
ScrollView-基本设置
weixin_30257433的博客
09-24 572
一: 掌握两点: 1. ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{flex:1}都会导致错误，你可以使用元素查看器来查找问题的原因。 2. Sc...
滚动视图ScrollView
Azadoo的博客
02-19 275
注意 ： 子元素标签只能有一个！ 垂直滚动: ScrollView <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/too
ScrollView 平台
qq_44742109的博客
02-28 378
ScrollView是一个跨平台的概念，用于提供滚动功能，以便用户可以查看超出屏幕尺寸的内容。每个平台都有其特定的实现方式和API，但核心思想都是相同的：允许用户通过滚动来访问更大的内容区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值