- 【鴻蒙專欄，從入門到實戰系列】：
https://blog.csdn.net/qq_41684621/category_10128500.html
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%"：跟進度條里面的進度是沒有關系的，它只是設置進度條上面的提示文字 -
一般寫的時候，會保證
progress和progress_hint_text的值是一致的 -
ohos:progress_width="50vp"：表示進度條的粗細 -
max、min表示最大最小，最大一般為100，最小一般為0 -
運行，發現進度條上面的提示文字為
0%，而且真正的進度也是0
-
把上面的進度條和提示文字都改為
80
-
運行后：
-
一般在上傳或下載的時候經常用到進度條，下載的文字的百分比會不斷地改變進度條里面的值
2. ProgressBar案例——點擊進度條增加實際進度值
需求分析：
- 每單擊一次進度條組件時，進度條就加
5%的進度 - 給進度條組件綁定一個單擊事件
- 案例：
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后，就會執行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方法的形參，也表示被點擊的組件對象
//下面就使用第二種來實現
//強轉
ProgressBar pb = (ProgressBar) component;
//獲取進度條里面原本的值
int progress = pb.getProgress();
//把進度條里面的值 + 5
progress = progress + 5;
//再給進度條設置進度
pb.setProgressValue(progress);
//再修改下提示的文字
pb.setProgressHintText(progress + "%");
}
}
- 運行，每點擊一次進度條組件，就會增加
5%進度
- 發現當點擊到
100%時，再點擊一次，就會到105%，而進度條的背景色沒有增加 - 在 xml 文件中，給進度條組件設置的值最大
100，最小0，按理說是不會超過100值的大小的
bug修復：當進度條的值超過100后，就不要去增加進度條的值了。當
- 運行后，進度值到了
100%就不會再增加了。progress大於等於100后，就直接return，后面的代碼就不會執行了 。
3. RoundProgressBar進度條
-
使用方式和
ProgressBar是一樣的 -
是
ProgressBar的子類，只是顯示的方式不同
-
查看
RoundProgressBar組件，發現是繼承了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>
- 上面的案例也同樣可以使用
RoundProgressBar組件來實現，基本一致的效果，只是顯示的方式不同而已