自学鸿蒙应用开发(15)- ScrollView

本文介绍在鸿蒙应用中ScrollView组件的基本用法。

ScrollView

增加ScrollView组件

如下代码中第2行~第10行和第137行所示,可以很简单地在布局中增加ScrollView组件。

<?xml version="1.0" encoding="utf-8"?>    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:id="$+id:scrollview"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="#FFFFFF"    ohos:top_margin="32vp"    ohos:bottom_padding="16vp"    ohos:layout_alignment="horizontal_center">            ohos:height="match_content"        ohos:width="match_parent"        ohos:left_margin="40vp"        ohos:right_margin="40vp"        ohos:orientation="vertical">                    ohos:height="40vp"            ohos:weight="3"            ohos:width="match_parent"            />                    xmlns:ohos="http://schemas.huawei.com/res/ohos"            ohos:height="match_content"            ohos:width="match_parent"            ohos:layout_alignment="center"            ohos:orientation="vertical">             ohos:id="$+id:image" ohos:width="match_content" ohos:height="match_content" ohos:layout_alignment="center" ohos:image_src="$media:DevEco" />  ohos:id="$+id:text_field" ohos:width="match_parent" ohos:height="30vp" ohos:text_size="20fp" ohos:text_alignment="center" ohos:hint="Please input text and press [Click me!] button." ohos:background_element="$graphic:background_text_field" />  ohos:id="$+id:hello_button" ohos:width="match_content" ohos:height="match_content" ohos:text_size="27fp" ohos:text="Click me!" ohos:layout_alignment="center" ohos:background_element="$graphic:background_button" ohos:margin="15vp" ohos:right_padding="8vp" ohos:left_padding="8vp" />  ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="center" ohos:orientation="horizontal">  ohos:id="$+id:text_pick_type" ohos:height="match_content" ohos:width="match_content" ohos:text="时间类型:" ohos:text_size="20fp"/>  ohos:id="$+id:btn_switch" ohos:text_state_off="12H" ohos:text_color="#FFFFFF" ohos:text_state_on="24H" ohos:text_size="20fp" ohos:height="match_content" ohos:width="match_content" />   ohos:id="$+id:time_picker" ohos:24_hour_mode="false" ohos:height="match_content" ohos:width="match_parent" ohos:layout_alignment="horizontal_center" ohos:text_am="AM" ohos:text_pm="PM" ohos:normal_text_size="20fp" ohos:selected_text_size="25fp"/>  ohos:id="$+id:hour_progress" ohos:progress_width="10vp" ohos:height="60vp" ohos:width="match_parent" ohos:left_margin="40vp" ohos:right_margin="40vp" ohos:progress_color="#FF0000" ohos:max="100" ohos:min="0" ohos:progress="60"/>  ohos:id="$+id:minute_progress" ohos:progress_width="10vp" ohos:height="60vp" ohos:width="match_parent" ohos:left_margin="40vp" ohos:right_margin="40vp" ohos:progress_color="#00FF00" ohos:max="100" ohos:min="0" ohos:progress="60"/>  ohos:id="$+id:second_progress" ohos:progress_width="10vp" ohos:height="60vp" ohos:width="match_parent" ohos:left_margin="40vp" ohos:right_margin="40vp" ohos:progress_color="#0000FF" ohos:max="100" ohos:min="0" ohos:progress="60"/>  ohos:id="$+id:round_progress" ohos:height="200vp" ohos:width="200vp" ohos:layout_alignment="horizontal_center" ohos:progress_width="20vp" ohos:start_angle="45" ohos:max_angle="270" ohos:progress="20" ohos:progress_color="#FF00FF"/>                     ohos:height="0vp"            ohos:weight="5"            ohos:width="match_parent"            />    

代码中组件id被指定为scrollview,如果有需要可以在代码中使用它获取ScrollView组件。

展示ScrollView的效果

本文只是简单展示ScrollView的效果,因此没有对它进行任何操作。如果有需要可以参照本文后面的文档链接。

下面代码中的第29行~第51行,根据TimePicker状态分别更新3个ProgressBar和RoundProgressBar的内容,通过视频可以看到,无论画面滚动到哪个位置,用户的操作体验都是一样的。​​​​​​​

package com.example.helloharmony.slice;import com.example.helloharmony.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.*;import ohos.agp.window.dialog.ToastDialog;import java.time.LocalTime;import java.time.temporal.ChronoUnit;
public class ComponentAbilitySlice extends AbilitySlice {    @Override    public void onStart(Intent intent) {        super.onStart(intent);        super.setUIContent(ResourceTable.Layout_ability_component);        //获取TimePicker组件        TimePicker picker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);        //获取ProgressBar组件        updateProgressValue(picker);        //为TimePicker设定事件响应        ComponentAbilitySlice this_slice = this;        picker.setTimeChangedListener(            new TimePicker.TimeChangedListener() {                @Override                public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {                    this_slice.updateProgressValue(timePicker);                }            }        );    }    @Override    public void onActive() {        super.onActive();    }    @Override    public void onForeground(Intent intent) {        super.onForeground(intent);    }
    private void updateProgressValue(TimePicker picker){        int seconds = (picker.getHour() * 60 + picker.getMinute()) * 60 + picker.getSecond();        setProgressValue(ResourceTable.Id_hour_progress, picker.getHour(), 24);        setProgressValue(ResourceTable.Id_minute_progress, picker.getMinute(), 60);        setProgressValue(ResourceTable.Id_second_progress, picker.getSecond(), 60);        setProgressValue(ResourceTable.Id_round_progress, seconds, 86400);    }
    private void setProgressValue(int id, int value, int span){        ProgressBar progress = (ProgressBar)findComponentById(id);        progress.setProgressValue(progress.getMin() + value * (progress.getMax() - progress.getMin()) / span);    }}
 

画面显示如下:

图片

参考文档

ScrollView组件

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-scrollview-0000001060965602

新书介绍

《实战Python设计模式》是作者最近出版的新书,拜托多多关注!

图片

本书利用Python 的标准GUI 工具包tkinter,通过可执行的示例对23 个设计模式逐个进行说明。这样一方面可以使读者了解真实的软件开发工作中每个设计模式的运用场景和想要解决的问题;另一方面通过对这些问题的解决过程进行说明,让读者明白在编写代码时如何判断使用设计模式的利弊,并合理运用设计模式。

对设计模式感兴趣而且希望随学随用的读者通过本书可以快速跨越从理解到运用的门槛;希望学习Python GUI 编程的读者可以将本书中的示例作为设计和开发的参考;使用Python 语言进行图像分析、数据处理工作的读者可以直接以本书中的示例为基础,迅速构建自己的系统架构。


觉得本文有帮助?请分享给更多人。

关注微信公众号【面向对象思考】轻松学习每一天!

面向对象开发,面向对象思考!

图片

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…