IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 系统运维 -> 鸿蒙应用开发 | 滚动视图(ScrollView) 的功能和用法 -> 正文阅读

[系统运维]鸿蒙应用开发 | 滚动视图(ScrollView) 的功能和用法

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

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

图片


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

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"
        >
        <!--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); // 平滑滚动到指定位置。
});

更多属性:

图片

本篇内容结束:

源码:https://gitee.com/codegrowth/haomony-develop/tree/master/ScrollView???????

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

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

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

作者:码工
?

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

  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章      下一篇文章      查看所有文章
加:2021-08-10 13:50:40  更:2021-08-10 13:51:45 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/15 6:21:41-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码