A9:用 plus 控件实现进度条
2026-01-27 本文已影响0人
大龙10
一、进度条
-
在窗体上拖放一个 plus 控件。 然后切换窗体设计器到 "代码模式",添加一句代码 winform.plus.setProgressRange(1,100) 指定进度条的最小值、最大值就可以自动切换到进度条模式了。
-
进度条可以是横向的(宽度大于高度),也可以是竖向的(高度大于宽度),plus 控件会根据设计时的宽高比自动判断进度条的方向,不需要设置其他参数。
-
如果未配置进度条的颜色或图像,plus 控件会在预设的配色方案中随机选择并配置背景色与前景色。 进度条默认以背景色、前景色区分进度。
-
我们也可以在窗体设计器的「属性面板」自行配置背景色或前景色,也可以指定背景图像或前景图像,进度条如果使用图像则必须指定为"expand"模式(九宫格贴图模式 )。
-
进度条也可以显示文本,文本的限制范围被限制在前景显示范围内,文本的显示区域外边距为前景边框 + 文本边距。
二、扇形进度条
- 如果使用 winform.plus.setPieRange(1,100); 设定进度条的进度范围就可以创建圆形的进度条。
- 进度条以前景与背景区分进度,如果调用此函数时尚未指定前景与前景则会自预设配色方案中随机选择配色。
- 如果配置扇形进度条前景图、背景图,则图像的显示模式应当设置为 "center" ( 即绝对居中 )。
三、程序
//用 plus 控件创建圆环进度条
//plus 控件使用指南: https://www.aardio.com/zh-cn/doc/library-guide/std/win/ui/ctrl/plus.html
import win.ui;
/*DSG{{*/
var winform = win.form(text="圆形进度条";right=759;bottom=469)
winform.add(
button={cls="button";text="测试进度条动画";left=159;top=356;right=325;bottom=409;z=3};
plus={cls="plus";left=161;top=282;right=707;bottom=316;bgcolor=0x626163;forecolor=0x97F8E5;hide=1;notify=1;z=2};
plus5={cls="plus";left=293;top=70;right=421;bottom=198;color=0x008000;db=1;dl=1;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=1}
)
/*}}*/
winform.plus5.setPieRange(
1,360, //设置进度区间,自动切换到扇形进度条模式,如果未指定配色则随机选择预设配色方案
90 //可选用第 3 个参数指定要抠除的中心圆百分比,以实现圆环(甜甜圈)效果。
);
winform.plus5.progressPos = 1;//设置当前进度
winform.plus5.foreground = 0x80ffff00;//也可以改为图像,图像应设为center显示模式以居中对齐
winform.plus5.background = 0x60ff00ff;//也可以改为图像,图像应设为center显示模式以居中对齐
winform.setInterval(
function(){
winform.plus5.text = winform.plus5.progressPercentage + "%";
winform.plus5.progressPos = winform.plus5.progressPos+1
},10
)
//设置进度区间,可自动切换到进度条显示模式,如果未指定配色则随机选择预设配色方案
winform.plus.setProgressRange(1,50);
//设置当前进度
winform.plus.progressPos = 1;
winform.button.oncommand = function(id,event){
winform.button.disabledText = "测试一下"
winform.plus.startProgress(50);
win.delay(5000);
winform.plus.stopProgress();
winform.button.disabledText = null;
}
winform.show()
win.loopMessage();
四、资料
//教程: https://www.aardio.com/zh-cn/doc/library-guide/std/win/ui/ctrl/plus.html#pie