一、簡介

• ProgressBar 用于顯示內容或操作的進度。
• ProgressBar 的共有 XML 屬性繼承自 Component，詳情請參考我的博客：HarmonyOS之組件通用的XML屬性總覽。
• ProgressBar 的自有 XML 屬性見下表：

屬性名稱中文描述取值取值說明使用案例

divider_lines_enabled	分割線	boolean類型	可以直接設置true/false，也可以引用boolean資源	ohos:divider_lines_enabled=“true” ohos:divider_lines_enabled="$boolean:true"
divider_lines_number	分割線數量	integer類型	可以直接設置整型數值，也可以引用integer資源	ohos:divider_lines_number=“1” ohos:divider_lines_number="$integer:one"
infinite	是否使用不確定模式	boolean類型	可以直接設置true/false，也可以引用boolean資源	ohos:infinite=“true" ohos:infinite=”$boolean:true"
infinite_element	不確定模式圖樣 配置前提：infinite需設置為true	Element類型	僅可引用media/graphic下的圖片資源	ohos:infinite_element="$ media:media_src" ohos:infinite_element="$graphic:graphic_src"
max	最大值	integer類型	可以直接設置整型數值，也可以引用integer資源	ohos:max=“1" ohos:max=”$integer:one"
max_height	最大高度	float類型	表示尺寸的float類型 可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源	ohos:max_width=“100” ohos:max_width=“20vp” ohos:max_width="$float:size_value"
min	最小值	integer類型	可以直接設置整型數值，也可以引用integer資源	ohos:min=“1" ohos:min=”$integer:one"
orientation	排列方向	horizontal	表示ProgressBar水平顯示	ohos:orientation=“horizontal”
orientation	排列方向	vertical	表示ProgressBar垂直顯示	ohos:orientation=“vertical”
progress	當前進度	integer類型	可以直接設置整型數值，也可以引用integer資源	ohos:progress=“10" ohos:progress=”$integer:ten"
background_instruct_element	背景	Element類型	可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源	ohos:background_instruct_element="#000000" ohos:background_instruct_element="$ color:black" ohos:background_instruct_element="$ media:media_src" ohos:background_instruct_element="$ graphic:graphic_src"
progress_width	進度條寬度	float類型	表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源	ohos:progress_width=“100" hos:progress_width=“20vp" ohos:progress_width=”$float:size_value”
progress_color	進度條顏色	color類型	可以直接設置色值，也可以引用color資源	ohos:progress_color="#FF262626" ohos:progress_color="$color:black"
progress_element	進度條背景	Element類型	可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源	ohos:progress_element="#000000" ohos:progress_element=“$color:black"<br>ohos:progres{s}_{e}lement="$media:media_src" ohos:progress_element=”$graphic:graphic_src"
progress_hint_text	進度提示文本	string類型	可以直接設置文本字串，也可以引用string資源（推薦使用）	ohos:progress_hint_text=“test" ohos:progress_hint_text=”$string:test_str"
progress_hint_text_alignment	進度提示文本對齊方式	left	表示文本靠左對齊	可以設置取值項如表中所列，也可以使用“|”進行多項組合 ohos:progress_hint_text_alignment="top" ohos:progress_hint_text_alignment=“top|left”
progress_hint_text_alignment	進度提示文本對齊方式	top	表示文本靠頂部對齊	-
progress_hint_text_alignment	進度提示文本對齊方式	right	表示文本靠右對齊	-
progress_hint_text_alignment	進度提示文本對齊方式	bottom	表示文本靠底部對齊	-
progress_hint_text_alignment	進度提示文本對齊方式	horizontal_center	表示文本水平居中對齊	-
progress_hint_text_alignment	進度提示文本對齊方式	vertical_center	表示文本垂直居中對齊	-
progress_hint_text_alignment	進度提示文本對齊方式	center	表示文本居中對齊	-
progress_hint_text_color	進度提示文本顏色	color類型	可以直接設置色值，也可以引用color資源	ohos:progress_hint_text_color="#FFFFFFFF" ohos:progress_hint_text_color="$color:black"
vice_progress	當前副進度	integer類型	可以直接設置整型數值，也可以引用integer資源	ohos:vice_progress=“1" ohos:vice_progress=”$integer:one"
vice_progress_element	副進度條背景	Element類型	可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源	ohos:vice_progress_element="#000000" ohos:vice_progress_element="$ color:black" ohos:vice_progress_element="$ media:media_src" ohos:vice_progress_element="$graphic:graphic_src"
step	進度的步長	integer類型	可以直接設置整型數值，也可以引用integer資源，默認值為1，若step設置為10，進度值則為10的倍數	ohos:step=“1" ohos:step=”$integer:one"
progress_hint_text_size	進度提示文本大小	float類型	表示尺寸的float類型，可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源	ohos:progress_hint_text_size=“100" ohos:progress_hint_text_size=“20fp" ohos:progress_hint_text_size=”$float:size_value”

二、創建 ProgressBar

• 在 layout 目錄下的 xml 文件中創建一個 ProgressBar：

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

• 創建 ProgressBar 效果：

三、設置 ProgressBar

• 設置 ProgressBar 方向為垂直：

<ProgressBarohos: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"/>

• 垂直 ProgressBar 效果：

• 設置當前進度
• • 在 xml 中的設置：

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

• • 在 Java 中設置：

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

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

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

• • 在 Java 中設置：

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

• • 設置最大和最小值以及進度的效果：

• 設置 ProgressBar 進度顏色：

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

• • 設置 ProgressBar 顏色效果：

• 設置 ProgressBar 底色顏色：

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

• • 設置底色顏色效果：

• 設置 ProgressBar 分割線
• • 在 xml 中配置：

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

• • 在 Java 代碼中配置：

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

• • 添加分割線效果：

• 設置 ProgressBar 分割線顏色：

progressBar.setDividerLineColor(Color.MAGENTA);

• • 設置分割線顏色效果：

• 設置 ProgressBar 提示文字：

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

• • 設置提示文字效果：

總結

以上是生活随笔為你收集整理的HarmonyOS之常用组件ProgressBar的功能和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。