HarmonyOS之常用组件ProgressBar的功能和使用

一、简介

• ProgressBar 用于显示内容或操作的进度。
• ProgressBar 的共有 XML 属性继承自 Component，详情请参考我的博客：HarmonyOS之组件通用的XML属性总览。
• ProgressBar 的自有 XML 属性见下表：

二、创建 ProgressBar

• 在 layout 目录下的 xml 文件中创建一个 ProgressBar：

	<ProgressBar
	    ohos:id="$+id:progressbar"
	    ohos:progress_width="10vp"
	    ohos:height="60vp"
	    ohos:width="600vp"
	    ohos:max="100"
	    ohos:min="0"
	    ohos:progress="60"/>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

• 创建 ProgressBar 效果：

三、设置 ProgressBar

• 设置 ProgressBar 方向为垂直：

	<ProgressBar
	    ohos:orientation="vertical"
	    ohos:top_margin="20vp"
	    ohos:height="150vp"
	    ohos:width="60vp"
	    ohos:id="$+id:progressbar"
	    ohos:progress_width="10vp"
	    ohos:max="100"
	    ohos:min="0"
	    ohos:progress="60"/>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

• 垂直 ProgressBar 效果：

• 设置当前进度
• • 在 xml 中的设置：

	<ProgressBar
    	...
	    ohos:progress="60"/>

  

 

  
1
  
2
  
3
 

• • 在 Java 中设置：

	ProgressBar progressBar = (ProgressBar) findComponentById(ResourceTable.Id_progressbar);
	progressBar.setProgressValue(60);

  

 

  
1
  
2
 

• 设置最大和最小值
• • 在 xml 中设置：

	<ProgressBar
	    ...
	    ohos:max="400"
	    ohos:min="0"/>

  

 

  
1
  
2
  
3
  
4
 

• • 在 Java 中设置：

	progressBar.setMaxValue(400);
	progressBar.setMinValue(0);

  

 

  
1
  
2
 

• • 设置最大和最小值以及进度的效果：

• 设置 ProgressBar 进度颜色：

	<ProgressBar
	    ...
	    ohos:progress_element="#FF9900" />

  

 

  
1
  
2
  
3
 

• • 设置 ProgressBar 颜色效果：

• 设置 ProgressBar 底色颜色：

	<ProgressBar
    	...
	    ohos:background_instruct_element="#FFFFFF" />

  

 

  
1
  
2
  
3
 

• • 设置底色颜色效果：

• 设置 ProgressBar 分割线
• • 在 xml 中配置：

	<ProgressBar
	    ...
	    ohos:divider_lines_enabled="true"
	    ohos:divider_lines_number="5" />

  

 

  
1
  
2
  
3
  
4
 

• • 在 Java 代码中配置：

	progressBar.enableDividerLines(true);
	progressBar.setDividerLinesNumber(5);

  

 

  
1
  
2
 

• • 添加分割线效果：

• 设置 ProgressBar 分割线颜色：

	progressBar.setDividerLineColor(Color.MAGENTA);

  

 

  
1
 

• • 设置分割线颜色效果：

• 设置 ProgressBar 提示文字：

	<ProgressBar
	    ...
	    ohos:progress_hint_text="20%"
	    ohos:progress_hint_text_color="#FFCC99" />

  

 

  
1
  
2
  
3
  
4
 

• • 设置提示文字效果：

文章来源: blog.csdn.net，作者：Serendipity·y，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/Forever_wj/article/details/119323223