HarmonyOS实战— ProgressBar进度条组件基本使用

开发 OpenHarmony
常见app中,下载进度条,完成任务的进度条等都会用到,一般在上传或下载的时候经常用到进度条,下载的文字的百分比会不断地改变进度条里面的值。

[[425812]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

1. ProgressBar进度条组件

组件说明:

常见app中,下载进度条,完成任务的进度条等都会用到。

常见属性:

常见方法:

基本用法:

  1. <ProgressBar 
  2.         ohos:id="$+id:pb" 
  3.         ohos:height="match_content" 
  4.         ohos:width="300vp" 
  5.         ohos:progress="0" 
  6.         ohos:progress_hint_text="0%" 
  7.         ohos:progress_hint_text_color="#000000" 
  8.         ohos:progress_width="50vp" 
  9.         ohos:progress_color="red" 
  10.         ohos:max="100" 
  11.         ohos:min="0"/>  
  • ohos:progress="50":表示进度条里面真正的进度,50表示一半是有颜色的,另外一半没有颜色,表示进度条有了50%
  • ohos:progress_hint_text="0%":跟进度条里面的进度是没有关系的,它只是设置进度条上面的提示文字
  • 一般写的时候,会保证 progress 和 progress_hint_text 的值是一致的
  • ohos:progress_width="50vp":表示进度条的粗细
  • max、min 表示最大最小,最大一般为100,最小一般为0
  • 运行,发现进度条上面的提示文字为 0%,而且真正的进度也是 0

把上面的进度条和提示文字都改为 80。

运行后:

一般在上传或下载的时候经常用到进度条,下载的文字的百分比会不断地改变进度条里面的值。

2. ProgressBar案例——点击进度条增加实际进度值

需求分析:

  1. 每单击一次进度条组件时,进度条就加 5% 的进度
  2. 给进度条组件绑定一个单击事件
  • 案例:ProgressBarApplication
  • 也可以在布局的下面添加一个按钮,给按钮绑定单击事件,当按钮每点一次,进度条的百分比就加5%

ability_main

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:alignment="center" 
  7.     ohos:orientation="vertical"
  8.  
  9.     <ProgressBar 
  10.         ohos:id="$+id:pb" 
  11.         ohos:height="match_content" 
  12.         ohos:width="300vp" 
  13.         ohos:progress="0" 
  14.         ohos:progress_hint_text="0%" 
  15.         ohos:progress_hint_text_color="#000000" 
  16.         ohos:progress_width="50vp" 
  17.         ohos:progress_color="red" 
  18.         ohos:max="100" 
  19.         ohos:min="0"/> 
  20.  
  21. </DirectionalLayout> 

下面就直接给进度条去绑定单击事件,当用鼠标点击进度条ProgressBar后,就会执行onClick方法。

MainAbilitySlice

  1. package com.xdr630.progressbarapplication.slice; 
  2.  
  3. import com.xdr630.progressbarapplication.ResourceTable; 
  4. import ohos.aafwk.ability.AbilitySlice; 
  5. import ohos.aafwk.content.Intent; 
  6. import ohos.agp.components.Component; 
  7. import ohos.agp.components.ProgressBar; 
  8.  
  9. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
  10.     @Override 
  11.     public void onStart(Intent intent) { 
  12.         super.onStart(intent); 
  13.         super.setUIContent(ResourceTable.Layout_ability_main); 
  14.  
  15.         //1.找到进度条组件 
  16.         ProgressBar pb = (ProgressBar) findComponentById(ResourceTable.Id_pb); 
  17.  
  18.         //2.给进度条绑定一个单击事件 
  19.         pb.setClickedListener(this); 
  20.     } 
  21.  
  22.     @Override 
  23.     public void onActive() { 
  24.         super.onActive(); 
  25.     } 
  26.  
  27.     @Override 
  28.     public void onForeground(Intent intent) { 
  29.         super.onForeground(intent); 
  30.     } 
  31.  
  32.     @Override 
  33.     public void onClick(Component component) { 
  34.         //把进度条里面的值 + 5 
  35.         //获取进度条里面原本的值 
  36.         //两种获取进度条组件的方式: 
  37.         //1.把onStart方法的pb移动到成员位置 
  38.         //2.onClick方法的形参,也表示被点击的组件对象 
  39.         //下面就使用第二种来实现 
  40.         //强转 
  41.         ProgressBar pb = (ProgressBar) component; 
  42.         //获取进度条里面原本的值 
  43.         int progress = pb.getProgress(); 
  44.         //把进度条里面的值 + 5 
  45.         progress = progress + 5; 
  46.         //再给进度条设置进度 
  47.         pb.setProgressValue(progress); 
  48.         //再修改下提示的文字 
  49.         pb.setProgressHintText(progress + "%"); 
  50.     } 

运行,每点击一次进度条组件,就会增加 5% 进度。

  • 发现当点击到100%时,再点击一次,就会到 105%,而进度条的背景色没有增加。
  • 在 xml 文件中,给进度条组件设置的值最大100,最小0,按理说是不会超过 100 值的大小的。

bug 修复:当进度条的值超过 100 后,就不要去增加进度条的值了。当

运行后,进度值到了100%就不会再增加了。progress 大于等于 100 后,就直接 return,后面的代码就不会执行了 。

3. RoundProgressBar进度条

使用方式和ProgressBar是一样的。

是ProgressBar的子类,只是显示的方式不同。

查看 RoundProgressBar 组件,发现是继承了 ProgressBar 组件的。

基本使用:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:alignment="center" 
  7.     ohos:orientation="vertical"
  8.  
  9.     <RoundProgressBar 
  10.         ohos:height="300vp" 
  11.         ohos:width="300vp" 
  12.         ohos:progress_hint_text="80%" 
  13.         ohos:progress_hint_text_size="50vp" 
  14.         ohos:progress_hint_text_color="#000000" 
  15.         ohos:progress="80" 
  16.         ohos:progress_width="20vp" 
  17.         ohos:progress_color="red" 
  18.         ohos:max="100" 
  19.         ohos:min="0"/> 
  20. </DirectionalLayout> 

[[425818]]

上面的案例也同样可以使用RoundProgressBar组件来实现,基本一致的效果,只是显示的方式不同而已。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-02-17 14:51:39

HarmonyOSJSPAI开发canvas画布

2021-12-30 16:10:52

鸿蒙HarmonyOS应用

2021-09-13 15:17:28

鸿蒙HarmonyOS应用

2021-09-06 15:31:01

鸿蒙HarmonyOS应用

2015-07-31 11:19:43

数字进度条源码

2021-09-06 14:58:23

鸿蒙HarmonyOS应用

2009-12-25 17:58:12

WPF进度条

2022-04-24 14:56:53

容器组件StackTS

2009-07-21 14:49:55

XmlHttpRequ文件上传进度条

2022-09-09 14:47:50

CircleArkUI

2011-07-05 15:16:00

QT 进度条

2021-09-27 14:44:48

鸿蒙HarmonyOS应用

2009-08-17 13:56:29

C#进度条的使用

2012-01-17 13:58:17

JavaSwing

2009-06-06 18:54:02

JSP编程进度条

2023-12-11 17:15:05

应用开发波纹进度条ArkUI

2020-04-07 09:43:17

vue.js进度组件开发

2015-08-03 11:39:20

拟物化进度条

2010-01-25 18:27:54

Android进度条

2020-12-14 13:32:40

Python进度条参数
点赞
收藏

51CTO技术栈公众号