customPlus 实现带进度条的下载按钮

光庆 9天前 267

发挥想象,还可以实现其他进度效果,如:

一个比较完整的下载例程:

import win.ui;
import fonts.fontAwesome
import win.dlg.message
/*DSG{{*/
var winform = win.form(text="aardio form";right=575;bottom=463)
winform.add(
plus={cls="plus";left=17;top=12;right=534;bottom=446;bgcolor=12639424;dl=1;dt=1;notify=1;z=1};
scrollbar={cls="scrollbar";left=536;top=8;right=560;bottom=448;dl=1;edge=1;z=2}
)
/*}}*/

winform.show();
 
itemModel = {
		{	// 项目背景
			type="rect",
			round=5,
			rectf={x=3;y=3;width=-3;height=-3},
			width=1,
			fillcolor=0xFFEEEEEE,
			itemhoverfillcolor=0xFFEEEEEE,
			itemselectedfillcolor=0xFFEEEEEE;////////////选中后的背景颜色
			},
		{
			// 头像背景色,
			type="rect",
			round=5,
			rectf={x=10;y=10;width=80;height=80},
			color=0xFFCCCCCC,
			width=1,
			fillcolor=0x88FFFFFF,
			},
		{
			name="logo",
			type="img",
			rectf={x=14;y=14;width=72;height=72},
			round=5,
			},
		{
			//标题背景
			type="rect",
			rectf={x=100;y=10;width=-10;height=25},
			round=3,
			fillcolor=0xFFEEEEEE,
			},
		{
			name="title",
			type="text",
			rectf={x=105;y=12;width=-10;height=20},
			font={name="Tahoma",point=11,color=0xFF5d492c},
			itemselectedfont={name="Tahoma",point=11,color=0xFFFF0000},
			align=0
			},
		{
			name="content",
			type="text",
			rectf={x=100;y=40;width=-65;height=-10},
			font={name="Tahoma",point=9,color=0xFF888888},
			text='居中显示\n这里是信息内容\n里是信息内容里是信息内容息内容里是里是信息内容里洒发',	
			},
		{
			name = "编辑",
			type="rect",
			rectf={x=-105;y=40;width=-10;height=42},
			round=4,
			click=true,
			fillcolor= 0xFF4CAF50,
			hoverfillcolor = 0xFF65318e
			},
		{
			name = "编辑前景",
			type="paint",
			rectf={x=-105;y=40;width=-10;height=42},
        	proc=function(paint,itemIndex,elemIndex,rectf,disabled,checked,hovered,itemSelected,itemHovered){
        	    	paint = toPaint(paint); /* 绑定paint智能提示 */
        			/*参数:godking.paint对象、当前项目索引、当前元素索引、当前绘制区域、项目是否禁用、元素是否选中、元素是否鼠标划过、项目是否选中、项目是否鼠标划过*/
        			var f = ..table.clone(rectf);
        			var v = itemList[itemIndex]["进度"];
        			f.width = rectf.width*v/100;
        			paint.fillRoundRectF(f,4,0xFFAADD55)
				}
			},
		{
			name = "down",
			type="text",
			rectf={x=-105;y=55;width=-10;height=17},
			align=1;
			font={name="FontAwesome",point=12,color=0xFFFFFFFF},
			text='\uF019 下载',	
			}		
}
 
itemList = {};
 
var str = /*************
[杀毒软件]
软件名称1=360杀毒  苗木
软件图标=常用的杀毒软件      软件大小:65.2 MB        推荐指数:★★★★✰
软件介绍=360出品的杀毒软件
软件大小=65.2 MB
软件链接=https://sfdl.360safe.com/360sd/360sd_x64_std_7.0.0.1060.exe
——————————————————————————————————————
软件名称1=360浏览器
软件图标=http://360.dingqijiao.cn/img/t018465913d6e100407.png
软件介绍=360出品的网页浏览软件
软件大小=98 MB
软件链接=https://down.360safe.com/se/360se15.3.6272.64.exe
——————————————————————————————————————
软件名称1=WPS办公
软件图标=was3.ico
软件介绍=金山公司出品的办公软件
软件大小=155 MB
软件链接=https://official-package.wpscdn.cn/wps/download/WPS_Setup_18912.exe
——————————————————————————————————————
软件名称1=永中文字
软件图标=yzz.ico
软件介绍=永中公司出品的办公软件
软件大小=125 MB
软件链接=https://dl.yozosoft.com/yozo/project/file/20240812_094642_267975/9.0.5004.101ZH.S1.exe
——————————————————————————————————————
软件名称1=WPS34324办公
软件图标=was3.ico
软件介绍=金山公司出品的534253245办公软件
软件大小=155 MB
软件链接=https://official-package.wpscdn.cn/wps/download/WPS_Setup_18912.exe
——————————————————————————————————————
软件名称1=永中4535345文字
软件图标=yzz.ico
软件介绍=永中公司345435出品的办公软件
软件大小=125 MB
软件链接=https://dl.yozosoft.com/yozo/project/file/20240812_094642_267975/9.0.5004.101ZH.S1.exe
——————————————————————————————————————
*************/

var pattern = "软件名称1=(\C+)\r\n软件图标=(\C+)\r\n软件介绍=(\S+)\r\n软件大小=(\d+.?\d+\sMB)\r\n软件链接=(\S+.exe)\r\n"
for s1,s2,s3,s4,s5 in string.gmatch( str, pattern ){
	..table.push(itemList,	{
			logo= "https://img.32r.com/logo/20240726/ec95c9dbbd90557db30c3072a2fbaf99.png";
			title="这里是标题文本"++s1++",左对齐",
			content='居中显示1\n这里是信息内容这里是信息内容这里是信息内容这里是信息内容',
			进度 = 0;
	})
 }
 
import godking.customPlus
var p = godking.customPlus(winform.plus/*plus*/,itemModel,itemList,{
		itemWidth=500,	/*项目宽度*/
		itemHeight=100,	/*项目高度*/
		autoSizeWidth=true,	/*自动根据项目列数及plus宽度调整项目宽度*/
		autoSizeHeight=true,	/*自动根据项目行数及plus高度调整项目高度*/
		colnum=0, 	/*项目列数,为0则根据项目宽度和plus宽度自动计算*/
		rownum=0, 	/*项目行数,为0则根据项目高度和plus高度自动计算*/
		padLeft=5,	/*plus左边空白距离*/
		padTop=5,	/*plus顶边空白距离*/
		padRight=5,	/*plus右边空白距离*/
		padBottom=5	/*plus底边空白距离*/
})
p.bindScrollbar(winform.scrollbar);

import thread.command;
var cmd = thread.command(winform);
cmd.subscribe("刷新进度",function(index,v){
    	itemList[index]["进度"] = v;
    	if v<100 itemList[index].down = v++"%";
    	else itemList[index].down = "下载完毕";
    	itemList[index].disabled = v<100;
    	p.update(index,false/*isPageItemIndex*/);
	}
)

p.onClick = function(itemIndex/*项目索引*/,elemIndex/*元素索引*/,elemID/*元素id*/,elemName/*元素name*/,pageIndex/*当前页项目索引*/,x/*鼠标X坐标*/,y/*鼠标Y坐标*/,disabled/*项目是否禁用*/,itemRect/*项目区域*/,elemRect/*元素区域*/){
    /*鼠标左键单击一个项目(含禁用项目,不含隐藏项目)时,触发该事件。*/
    if itemList[itemIndex].down = "下载完毕" return ..win.msgbox("已经下载完毕"); 
    thread.invoke( 
    	function(itemIndex,cmd){
    		for(i=0;100;1){
				cmd.刷新进度(itemIndex,i)
				thread.delay(100)
    		}    	    
    	},itemIndex,cmd
    )   	
}

win.loopMessage();

另一种效果:

import win.ui;
import fonts.fontAwesome
import win.dlg.message
/*DSG{{*/
var winform = win.form(text="aardio form";right=575;bottom=463)
winform.add(
plus={cls="plus";left=17;top=12;right=534;bottom=446;bgcolor=12639424;dl=1;dt=1;notify=1;z=1};
scrollbar={cls="scrollbar";left=536;top=8;right=560;bottom=448;dl=1;edge=1;z=2}
)
/*}}*/

winform.show();
 
itemModel = {
        {    // 项目背景
            type="rect",
            round=5,
            rectf={x=3;y=3;width=-3;height=-3},
            	width=1,
			fillcolor=0xFFEEEEEE,
			itemhoverfillcolor=0xFFEEEEEE,
			itemselectedfillcolor=0xFFEEEEEE;////////////选中后的背景颜色
            },
            {
            name = "编辑前景",
            type="paint",
            rectf={x=5;y=3;width=500;height=100},
            proc=function(paint,itemIndex,elemIndex,rectf,disabled,checked,hovered,itemSelected,itemHovered){
                    paint = toPaint(paint); /* 绑定paint智能提示 */
                    /*参数:godking.paint对象、当前项目索引、当前元素索引、当前绘制区域、项目是否禁用、元素是否选中、元素是否鼠标划过、项目是否选中、项目是否鼠标划过*/
                    var f = ..table.clone(rectf);
                    var v = itemList[itemIndex]["进度"];
                    f.width = rectf.width*v/100;
                    paint.fillRoundRectF(f,4,0xFFC4E0FC)
                }
            },
        {
            // 头像背景色,
            type="rect",
            round=5,
            rectf={x=10;y=10;width=80;height=80},
            color=0xFFCCCCCC,
            width=1,
            fillcolor=0x88FFFFFF,
            },
        {
            name="logo",
            type="img",
            rectf={x=14;y=14;width=72;height=72},
            round=5,
            },
        {
            //标题背景
            type="rect",
            rectf={x=100;y=10;width=-10;height=25},
            round=3,
            },
        {
            name="title",
            type="text",
            rectf={x=105;y=12;width=-10;height=20},
            font={name="Tahoma",point=11,color=0xFF5d492c},
            itemselectedfont={name="Tahoma",point=11,color=0xFFFF0000},
          
            align=0
            },
        {
            name="content",
            type="text",
            rectf={x=100;y=40;width=-65;height=-10},
            font={name="Tahoma",point=9,color=0xFF888888},
            text='居中显示\n这里是信息内容\n里是信息内容里是信息内容息内容里是里是信息内容里洒发',    
            },
        {
            name = "编辑",
            type="rect",
            rectf={x=-105;y=40;width=-10;height=42},
            round=4,
            click=true,
            fillcolor= 0xFF4CAF50,
            hoverfillcolor = 0xFF65318e
            },
        
        {
            name = "down",
            type="text",
            rectf={x=-105;y=55;width=-10;height=17},
            align=1;
            font={name="FontAwesome",point=12,color=0xFFFFFFFF},
            text='\uF019 下载',    
            }        
}
 
itemList = {};
 
var str = /*************
[杀毒软件]
软件名称1=360杀毒  苗木
软件图标=常用的杀毒软件      软件大小:65.2 MB        推荐指数:★★★★✰
软件介绍=360出品的杀毒软件
软件大小=65.2 MB
软件链接=https://sfdl.360safe.com/360sd/360sd_x64_std_7.0.0.1060.exe
——————————————————————————————————————
软件名称1=360浏览器
软件图标=http://360.dingqijiao.cn/img/t018465913d6e100407.png
软件介绍=360出品的网页浏览软件
软件大小=98 MB
软件链接=https://down.360safe.com/se/360se15.3.6272.64.exe
——————————————————————————————————————
软件名称1=WPS办公
软件图标=was3.ico
软件介绍=金山公司出品的办公软件
软件大小=155 MB
软件链接=https://official-package.wpscdn.cn/wps/download/WPS_Setup_18912.exe
——————————————————————————————————————
*************/

var pattern = "软件名称1=(\C+)\r\n软件图标=(\C+)\r\n软件介绍=(\S+)\r\n软件大小=(\d+.?\d+\sMB)\r\n软件链接=(\S+.exe)\r\n"
for s1,s2,s3,s4,s5 in string.gmatch( str, pattern ){
    ..table.push(itemList,    {
            logo= "https://img.32r.com/logo/20240726/ec95c9dbbd90557db30c3072a2fbaf99.png";
            title="这里是标题文本"++s1++",左对齐",
            content='居中显示1\n这里是信息内容这里是信息内容这里是信息内容这里是信息内容',
            进度 = 0;
    })
 }
 
import godking.customPlus
var p = godking.customPlus(winform.plus/*plus*/,itemModel,itemList,{
        itemWidth=500,    /*项目宽度*/
        itemHeight=100,    /*项目高度*/
        autoSizeWidth=true,    /*自动根据项目列数及plus宽度调整项目宽度*/
        autoSizeHeight=true,    /*自动根据项目行数及plus高度调整项目高度*/
        colnum=0,     /*项目列数,为0则根据项目宽度和plus宽度自动计算*/
        rownum=0,     /*项目行数,为0则根据项目高度和plus高度自动计算*/
        padLeft=5,    /*plus左边空白距离*/
        padTop=5,    /*plus顶边空白距离*/
        padRight=5,    /*plus右边空白距离*/
        padBottom=5    /*plus底边空白距离*/
})
p.bindScrollbar(winform.scrollbar);

import thread.command;
var cmd = thread.command(winform);
cmd.subscribe("刷新进度",function(index,v){
        itemList[index].disabled = v<100;
        if v<100 {
            itemList[index]["进度"] = v;
            var s = {"▏";"▎";"▍";"▌";"▋";"▊";"▆";"▅"};
        	itemList[index].down = s[v%8+1] ++ ' 下载...';
	        p.update(index,false/*isPageItemIndex*/);
        } else {
            itemList[index]["进度"] = 0;
        	itemList[index].down = '\uF019 已下载'; 
	        p.update(index,false/*isPageItemIndex*/);
	       	win.msgbox("已完成下载!");
  		}
    }
)

p.onClick = function(itemIndex/*项目索引*/,elemIndex/*元素索引*/,elemID/*元素id*/,elemName/*元素name*/,pageIndex/*当前页项目索引*/,x/*鼠标X坐标*/,y/*鼠标Y坐标*/,disabled/*项目是否禁用*/,itemRect/*项目区域*/,elemRect/*元素区域*/){
    /*鼠标左键单击一个项目(含禁用项目,不含隐藏项目)时,触发该事件。*/
    if itemList[itemIndex].down = "下载完毕" return ..win.msgbox("已经下载完毕"); 
    thread.invoke( 
        function(itemIndex,cmd){
            for(i=0;100;1){
                cmd.刷新进度(itemIndex,i)
                thread.delay(100)
            }      
        },itemIndex,cmd
    )       
}

win.loopMessage();


最新回复 (0)
返回