进度条 - progressbar

# 进度条控件: progressbar progressbar即进度条控件,显示某种操作的进度及百分比。通过修改进度条控件的参数可以修改进度条的呈现形式,默认为无限圆形进度条。 ## indeterminate {boolean} 是否为无限进度条,默认为==true==。可选的值为: - ==true== 显示无限进度条 - ==false== 显示有限进度条 ## progress {number} 进度条的进度,为一个整数,默认范围是0~100。 ## min {number} 进度条的最小进度,默认为0。 ## max {number} 进度条的最大进度,默认为100。 ## progressDrawable {string} 定义用于在progress模式下绘制进度条的drawable。 ## progressBackgroundTint {string} 对progress的背景应用颜色。不修改当前的着色模式。 ## progressBackgroundTintMode "add" | "multiply" | "screen" | "src_atop" | "src_in" | "src_over" 将progressBackgroundTint指定的色调应用到进度背景的混合模式。 ## progressTint {string} 将颜色应用于整个可绘制的进度。不修改当前的着色模式。 ## progressTintMode "add" | "multiply" | "screen" | "src_atop" | "src_in" | "src_over" 将progressTint指定的色调应用到进度背景的混合模式。 ## secondaryProgress {number} 设置次要进度的值。如果进度条处于indeterminate(无限进度条)模式,则不执行任何操作。 ## secondaryProgressTint {string} 对secondaryProgress应用色调(如果存在)。不修改当前的着色模式。 ## secondaryProgressTintMode "add" | "multiply" | "screen" | "src_atop" | "src_in" | "src_over" 将secondaryProgressTint指定的色调应用到辅助进度指示器的混合模式。 ## style {string} 设置进度条的宽度、布局样式。可选的值有: @style/Base.Widget.AppCompat.ProgressBar.Horizontal 水平直线进度条 @style/Base.Widget.AppCompat.ProgressBar 圆形进度条 例子 --- ``` "ui"; ui.layout( <vertical padding="16"> <text text="处理中..." textColor="black" textSize="16sp"/> <progressbar /> <text text="直线无限进度条" textColor="black" textSize="16sp" marginTop="24"/> <progressbar indeterminate="true" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/> <text text="直线进度条" textColor="black" textSize="16sp" marginTop="24"/> <progressbar progress="30" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/> <text text="可调节进度条" textColor="black" textSize="16sp" marginTop="24"/> <seekbar progress="20"/> <horizontal gravity="center" marginTop="24"> <text id="progress_value" textColor="black" textSize="16sp" margin="8" text="0"/> <progressbar id="progress" w="*" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/> </horizontal> <button id="download">开始下载</button> </vertical> ); var downloadId = null; ui.download.click(()=>{ if(downloadId != null){ stopDownload(); }else{ startDownload(); } }); function stopDownload(){ ui.download.text("开始下载"); clearInterval(downloadId); downloadId = null; } function startDownload(){ if(ui.progress.getProgress() == 100){ ui.progress.setProgress(0); } ui.download.text("停止下载"); downloadId = setInterval(()=>{ var p = ui.progress.getProgress(); p++; if(p > 100){ stopDownload(); return; } ui.progress.setProgress(p); ui.progress_value.setText(p.toString()); }, 200); } ```