HarmonyOS APP组件分享(六)

系统 OpenHarmony
文章由鸿蒙社区产出,想要了解更多内容请前往:51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

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

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

https://harmonyos.51cto.com

HarmonyOS APP - ProgressBar体验与分享

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:orientation="vertical" 
  7.     ohos:background_element="#FF5A5858"
  8. <Text 
  9.     ohos:height="match_content" 
  10.     ohos:width="match_content" 
  11.     ohos:text="创建ProgressBar效果" 
  12.     ohos:text_size="22fp" 
  13.     ohos:text_color="red"/> 
  14.     <ProgressBar 
  15.         ohos:progress_width="10vp" 
  16.         ohos:height="60vp" 
  17.         ohos:width="800px" 
  18.         ohos:max="100" 
  19.         ohos:min="0" 
  20.         ohos:progress="60"/> 
  21.     <Text 
  22.         ohos:height="match_content" 
  23.         ohos:width="match_content" 
  24.         ohos:text="垂直ProgressBar效果。" 
  25.         ohos:text_size="22fp" 
  26.         ohos:text_color="red"/> 
  27.     <Text 
  28.         ohos:height="match_content" 
  29.         ohos:width="match_content" 
  30.         ohos:text="设置ProgressBar颜色效果。" 
  31.         ohos:text_size="22fp" 
  32.         ohos:text_color="red"/> 
  33.     <ProgressBar 
  34.         ohos:orientation="vertical" 
  35.         ohos:top_margin="20vp" 
  36.         ohos:height="150vp" 
  37.         ohos:width="60vp" 
  38.         ohos:progress_width="10vp" 
  39.         ohos:max="100" 
  40.         ohos:min="0" 
  41.         ohos:progress="60" 
  42.         ohos:background_instruct_element="#FFFFFF" 
  43.         ohos:progress_element="#FF9900"/> 
  44.     <Text 
  45.         ohos:height="match_content" 
  46.         ohos:width="match_content" 
  47.         ohos:text="添加分割线效果。" 
  48.         ohos:text_size="22fp" 
  49.         ohos:text_color="red"/> 
  50.     <ProgressBar 
  51.         ohos:progress_width="10vp" 
  52.         ohos:height="60vp" 
  53.         ohos:width="800px" 
  54.         ohos:max="100" 
  55.         ohos:min="0" 
  56.         ohos:progress="40" 
  57.         ohos:divider_lines_enabled="true" 
  58.         ohos:divider_lines_number="5"/> 
  59.     <Text 
  60.         ohos:height="match_content" 
  61.         ohos:width="match_content" 
  62.         ohos:text="设置提示文字效果。" 
  63.         ohos:text_size="22fp" 
  64.         ohos:text_color="red"/> 
  65.     <ProgressBar 
  66.         ohos:progress_width="10vp" 
  67.         ohos:height="60vp" 
  68.         ohos:width="800px" 
  69.         ohos:max="100" 
  70.         ohos:min="0" 
  71.         ohos:progress="40" 
  72.         ohos:divider_lines_enabled="true" 
  73.         ohos:divider_lines_number="5" 
  74.         ohos:progress_hint_text="40%" 
  75.         ohos:progress_hint_text_color="#FFCC99" /> 
  76. </DirectionalLayout> 

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_progressBar_component

HarmonyOS APP - RoundProgressBar体验与分享

RoundProgressBar用于显示环形进度

代码如下:

  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:orientation="vertical" 
  7.     ohos:background_element="#FF000000"
  8.  
  9.     <DirectionalLayout 
  10.         ohos:height="0px" 
  11.         ohos:width="match_parent" 
  12.         ohos:weight="1"
  13.         <RoundProgressBar 
  14.             ohos:id="$+id:round_progress_bar" 
  15.             ohos:height="200vp" 
  16.             ohos:width="200vp" 
  17.             ohos:progress_width="10vp" 
  18.             ohos:progress="20" 
  19.             ohos:progress_color="#47CC47" 
  20.             ohos:layout_alignment="center"/> 
  21.     </DirectionalLayout> 
  22.     <DirectionalLayout 
  23.         ohos:height="0px" 
  24.         ohos:width="match_parent" 
  25.         ohos:weight="1"
  26.         <RoundProgressBar 
  27.             ohos:height="200vp" 
  28.             ohos:width="200vp" 
  29.             ohos:progress_width="10vp" 
  30.             ohos:progress="20" 
  31.             ohos:progress_color="#47CC47" 
  32.             ohos:start_angle="45" 
  33.             ohos:max_angle="270" 
  34.             ohos:progress_hint_text="加载中。。。" 
  35.             ohos:progress_hint_text_color="#007DFF" 
  36.             ohos:layout_alignment="center" /> 
  37.     </DirectionalLayout> 
  38.  
  39. </DirectionalLayout> 

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_RoundProgressBar_component

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

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

https://harmonyos.51cto.com

 

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

2021-03-17 09:35:09

鸿蒙HarmonyOS应用开发

2021-03-30 09:45:07

鸿蒙HarmonyOS应用开发

2021-03-26 09:35:35

鸿蒙HarmonyOS应用开发

2021-01-11 11:36:23

鸿蒙HarmonyOSApp开发

2021-03-18 09:36:02

鸿蒙HarmonyOS应用

2021-03-22 09:48:32

鸿蒙HarmonyOS应用开发

2012-04-28 21:25:58

APP

2022-02-10 15:14:50

HarmonyOS操作系统鸿蒙

2011-03-31 14:49:35

2010-07-28 12:41:18

Flex组件

2021-01-14 09:50:26

鸿蒙HarmonyOSAPP

2020-11-05 10:05:25

App

2022-10-11 23:53:08

组件架构开发

2013-12-16 09:36:08

App项目

2011-09-07 14:20:42

Android Wid组件

2012-04-24 09:59:05

APP移动社交

2022-06-07 09:40:16

Linux应用服务器

2024-01-09 08:07:09

JSThreeJSCSS

2013-01-10 12:57:23

产品经理App产品设计

2015-03-24 20:07:18

APP推广APP运营
点赞
收藏

51CTO技术栈公众号