[[425812]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

1. ProgressBar進度條組件

組件說明：

常見app中，下載進度條，完成任務的進度條等都會用到。

常見屬性：

常見方法：

基本用法：

<ProgressBar 
        ohos:id="$+id:pb" 
        ohos:height="match_content" 
        ohos:width="300vp" 
        ohos:progress="0" 
        ohos:progress_hint_text="0%" 
        ohos:progress_hint_text_color="#000000" 
        ohos:progress_width="50vp" 
        ohos:progress_color="red" 
        ohos:max="100" 
        ohos:min="0"/>  

• ohos:progress="50"：表示進度條里面真正的進度，50表示一半是有顏色的，另外一半沒有顏色，表示進度條有了50%
• ohos:progress_hint_text="0%"：跟進度條里面的進度是沒有關(guān)系的，它只是設置進度條上面的提示文字
• 一般寫的時候，會保證 progress 和 progress_hint_text 的值是一致的
• ohos:progress_width="50vp"：表示進度條的粗細
• max、min 表示最大最小，最大一般為100，最小一般為0
• 運行，發(fā)現(xiàn)進度條上面的提示文字為 0%，而且真正的進度也是 0

把上面的進度條和提示文字都改為 80。

運行后：

一般在上傳或下載的時候經(jīng)常用到進度條，下載的文字的百分比會不斷地改變進度條里面的值。

2. ProgressBar案例——點擊進度條增加實際進度值

需求分析：

1. 每單擊一次進度條組件時，進度條就加 5% 的進度
2. 給進度條組件綁定一個單擊事件

• 案例：ProgressBarApplication
• 也可以在布局的下面添加一個按鈕，給按鈕綁定單擊事件，當按鈕每點一次，進度條的百分比就加5%

ability_main

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:alignment="center" 
    ohos:orientation="vertical"> 
 
    <ProgressBar 
        ohos:id="$+id:pb" 
        ohos:height="match_content" 
        ohos:width="300vp" 
        ohos:progress="0" 
        ohos:progress_hint_text="0%" 
        ohos:progress_hint_text_color="#000000" 
        ohos:progress_width="50vp" 
        ohos:progress_color="red" 
        ohos:max="100" 
        ohos:min="0"/> 
 
</DirectionalLayout> 

下面就直接給進度條去綁定單擊事件，當用鼠標點擊進度條ProgressBar后，就會執(zhí)行onClick方法。

MainAbilitySlice

package com.xdr630.progressbarapplication.slice; 
 
import com.xdr630.progressbarapplication.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Component; 
import ohos.agp.components.ProgressBar; 
 
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        //1.找到進度條組件 
        ProgressBar pb = (ProgressBar) findComponentById(ResourceTable.Id_pb); 
 
        //2.給進度條綁定一個單擊事件 
        pb.setClickedListener(this); 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    @Override 
    public void onClick(Component component) { 
        //把進度條里面的值 + 5 
        //獲取進度條里面原本的值 
        //兩種獲取進度條組件的方式： 
        //1.把onStart方法的pb移動到成員位置 
        //2.onClick方法的形參，也表示被點擊的組件對象 
        //下面就使用第二種來實現(xiàn) 
        //強轉(zhuǎn) 
        ProgressBar pb = (ProgressBar) component; 
        //獲取進度條里面原本的值 
        int progress = pb.getProgress(); 
        //把進度條里面的值 + 5 
        progress = progress + 5; 
        //再給進度條設置進度 
        pb.setProgressValue(progress); 
        //再修改下提示的文字 
        pb.setProgressHintText(progress + "%"); 
    } 
} 

運行，每點擊一次進度條組件，就會增加 5% 進度。

• 發(fā)現(xiàn)當點擊到100%時，再點擊一次，就會到 105%，而進度條的背景色沒有增加。
• 在 xml 文件中，給進度條組件設置的值最大100，最小0，按理說是不會超過 100 值的大小的。

bug 修復：當進度條的值超過 100 后，就不要去增加進度條的值了。當

運行后，進度值到了100%就不會再增加了。progress 大于等于 100 后，就直接 return，后面的代碼就不會執(zhí)行了 。

3. RoundProgressBar進度條

使用方式和ProgressBar是一樣的。

是ProgressBar的子類，只是顯示的方式不同。

查看 RoundProgressBar 組件，發(fā)現(xiàn)是繼承了 ProgressBar 組件的。

基本使用：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:alignment="center" 
    ohos:orientation="vertical"> 
 
    <RoundProgressBar 
        ohos:height="300vp" 
        ohos:width="300vp" 
        ohos:progress_hint_text="80%" 
        ohos:progress_hint_text_size="50vp" 
        ohos:progress_hint_text_color="#000000" 
        ohos:progress="80" 
        ohos:progress_width="20vp" 
        ohos:progress_color="red" 
        ohos:max="100" 
        ohos:min="0"/> 
</DirectionalLayout> 

[[425818]]

上面的案例也同樣可以使用RoundProgressBar組件來實現(xiàn)，基本一致的效果，只是顯示的方式不同而已。

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com