aardio - 虚表库全新升级，支持图片系列专题

卢光庆

已于 2024-06-14 20:01:44 修改

阅读量2k

点赞数 12

分类专栏： aardio 库文章标签： aardio 虚表

于 2023-04-04 09:37:13 首次发布

本文链接：https://blog.csdn.net/sdlgq/article/details/129944516

版权

aardio 同时被 2 个专栏收录

138 篇文章 267 订阅

订阅专栏

库

33 篇文章 17 订阅

订阅专栏

虚表库经过我本人（光庆）的不断升级，已经成为了一个非常好用的库，特别是对于aardio来说，没有典型的表格组件，我这个虚表就显得比较有用了。

上一个版本的虚表，只支持文字处理，不支持图片，整体效果偏素净。

这个版本，进行了全面升级，内核做了全面修改，着重加强了对图片的支持、文字图片混合排版。

这个版本，效果偏靓丽。

库文件下载安装:

http://chengxu.online → aardio资源下载 → vlistEx.rar

解压缩后目录放到 /lib/godking/ 目录即可。

注意：需将老版本 /lib/godking/vlistEx.aardio 删除

先看效果：

动态效果：

图片调用格式：

<img name="picname">

嵌入图片标识，分为两部分：

1、以 "<img name=" 开头

2、以 ">" 结尾

3、中间为图片参数。

==========================================

【图片参数】：

1、图片与文本混合排版，按左右顺序排列：

        abc<img name="pic1",w=30,h=20,scale=true>def

2、图片填满单元格，不参与混合排版：

        <img name="pic1",full=false,scale=false>

3、图片定点绘制，不参与混合排版：

        <img name="pic1",x=0,y=0,w=30,h=20,scale=true>

==========================================

【name】：

1、图片名称

2、使用 addImg(name,data) 添加

【x、y】：

1、图片距离单元格左边、顶边的像素值。

2、值>-1 且值<1 时，按单元格宽高比例计算。

3、比例不包含1，如果要实现比例1，可使用接近1的小数，如：0.99999

4、值≥0 时，为距离左边或顶边的值。

5、值<0 时，为距离右边或底边的值。

6、输入的x、y值不合法时，自动转为0。

7、若设置了 x 或 y，则视为定点绘图。

8、已自动进行dpi处理。

【full 】：

1、图片填满单元格

2、不参与其他文本、图片的混合排版

3、无需设置 x、y、w、h

4、可设置是否按比例缩放（缩放居中）

【scale】：

1、是否在规定的xywh或full范围内，按比例缩放绘制。

【w、h】：

1、图片的宽度、高度像素值

2、值>-1 且值<1 时，按单元格宽高比例计算。

3、比例不包含1，如果要实现比例1，可使用接近1的小数，如：0.99999

4、值<0 时，图片会发生镜像旋转，其左边或顶边可能受影响。

5、w、h 若有一个为0，则不显示该图片。

6、已自动进行dpi处理。

==========================================

图片、文本混合排版时，按定义的先后顺序，进行先后绘制。

使用文档：

1、使用图片前，先添加图片：

使用图片前，需要先添加指定名称的图片，引用时只需要提供图片名称即可。

图片添加时，可指定图片大小、是否覆盖等设置。

添加方法如下：

// 1、从文件添加一个名称为 “name1” 的图片：
mainForm.listview.addImg( "name1", "~\doc.png", false, 20, 20 );

// 2、从内存数据添加一个名称为 “name2” 的图片：
var buffer = ..string.load("/res/doc.png");
mainForm.listview.addImg( "name2", buffer );

2、将图片嵌入单元格内容或表头内容：

只需按图片调用格式，将文本和图片任意混合排版即可，支持单元格内容和表头内容。

var cellText = "文本<img name='name1',w=20,h=20,scale=true>图片<img name='name2',w=20,h=20,scale=true>混合排版"

效果如下：

其中图片宽度和高度，可以用0-1之间的数值，代表单元格有效（不包含padding）宽度、高度的比例值，如：

var cellText = "<img name='pro',w=0.3,h=20> 60%"

效果如下：

有了图片，就可以将单元格模拟为按钮、进度条等各种非常漂亮的组件了。

3、将图片作为单元格背景或前景：

作为背景图：

var cellText = "<img name='bk',full=true>我有背景图";

将图片放到单元格文本的开头位置，并设置 full=true 就作为单元格的背景图了。

背景图不需要设置w和h，需要的话设置一下 scale 即可。

效果：

作为前景图：

var cellText = "<img name='bk',full=true>我有背景图和前景图<img name='fk',full=true>";

将图片放到单元格文本末尾位置，并设置 full=true 就作为单元格的前景图了。

设置方法跟背景图一致。

效果如下，第一张为按比例缩放的心形png透明图，第二张为拉伸的左右渐变的透明图，第三张为拉伸的心形：

4、将图片作为表头排序图标：

表头排序图标，总是放在表头内容后面。设置方法如下：

mainForm.listview.setSortMark(" <img name='asc',w=10,h=20>" /*升序符号*/,
" <img name='desc',w=10,h=20>" /*降序符号*/,
" <img name='normal',w=10,h=20>" /*默认符号*/)

效果如下：

5、将图片作为 checkBox 图标：

可以通过设置 checkBox.checkedImg 和 checkBox.unCheckedImg 属性为对应的图片名称，来设置选中和非选中状态下的图片：

mainForm.listview.checkBox.checkedImg = "checked";
mainForm.listview.checkBox.unCheckedImg = "unchecked";

效果如下：

6、将图片作为树形节点图片：

通过设置 tree.nodeImg 属性，为树形节点设置图片。不设置图片时，默认在节点周围画方框。

mainForm.listview.tree.nodeImg = "icon"

效果如下：

7、图片定点放置

import win.ui;
import godking.vlistEx;
/*DSG{{*/
mainForm = win.form(text="vlistEx - table adapter";right=759;bottom=449)
mainForm.add(
listview={cls="vlistEx";left=10;top=10;right=749;bottom=440;acceptfiles=1;aw=1;db=1;dl=1;dr=1;dt=1;hscroll=1;vscroll=1;z=1}
)
/*}}*/

import inet.http
var img = inet.http.get("https://img-blog.csdnimg.cn/21d6c09c237442a08ab0a110d9bd8d12.png?x-oss-process=image/resize,m_fixed,h_224,w_224");
mainForm.listview.addImg("icon",img);
mainForm.listview.setRowHeight(80);
var t = {}
for(i=1;100;1){
	..table.push(t,{"[@rowindex]",
				"文本<img name='icon',w=20,h=20,scale=true>图片<img name='icon',w=20,h=20,scale=true>混合排版",
				"<img name='icon',full=true>图片填满单元格",
				"<img name='icon',full=true,scale=true>",
				"<img name='icon',x=0,y=0,w=20,h=20>
				<img name='icon',x=-20,y=0,w=20,h=20>
				<img name='icon',x=0,y=-20,w=20,h=20>
				<img name='icon',x=-20,y=-20,w=20,h=20>
				图片定点放置",
				})
}
mainForm.listview.setTable(t,{"编号","混合排版","填满单元格","居中缩放","定点绘制"}/*列标题*/,{50,160,160,160,160}/*列宽*/,1/*对齐方式*/,/*字典转为数组*/,/*字符串转为Utf8*/,/*是否克隆新表*/)
mainForm.show();
win.loopMessage();

一个比较完整的图片系列调用代码：

import win.ui;
import godking.vlistEx;
/*DSG{{*/
mainForm = win.form(text="vlistEx - table adapter";right=759;bottom=449)
mainForm.add(
listview={cls="vlistEx";left=10;top=10;right=749;bottom=440;acceptfiles=1;aw=1;db=1;dl=1;dr=1;dt=1;hscroll=1;vscroll=1;z=1}
)
/*}}*/

mainForm.listview.addImg("icon","E:\图片素材\png\png32_96个蛮实用的png格式图标\Credit card.png")
mainForm.listview.addImg("alert","E:\图片素材\png\png32_常用图标\alert.png")
mainForm.listview.addImg("on","C:\Users\Administrator\Desktop\on.png")
mainForm.listview.addImg("off","C:\Users\Administrator\Desktop\off.png")
mainForm.listview.addImg("pro","C:\Users\Administrator\Desktop\pro.png",,50,20)
mainForm.listview.addImg("bk","E:\图片素材\png\png_花边纸底纹\花边\frame3_bc_happytime.png",,50,20)
 
mainForm.listview.addImg("1","E:\图片素材\png\png32_96个蛮实用的png格式图标\copy doc.png")
mainForm.listview.addImg("2","E:\图片素材\png\png32_96个蛮实用的png格式图标\Picture Cast.png")
mainForm.listview.addImg("3","E:\图片素材\png\png32_96个蛮实用的png格式图标\splash green.png")
mainForm.listview.addImg("4","E:\图片素材\png\png32_96个蛮实用的png格式图标\window.png")
mainForm.listview.addImg("5","E:\图片素材\png\png32_96个蛮实用的png格式图标\unread mail.png")

mainForm.listview.headerAlign = 1 
mainForm.listview.checkBox.show = true
mainForm.listview.headerBkcolor = 0xDDEEFF;
var t = {}
var tree = 0;
for(i=1;10000;1){
	..table.push(t,{"[@rowindex]",
				"文本<img name='alert',w=20,h=20,scale=true>图片<img name='icon',w=20,h=20,scale=true>混合排版",
				"<img name='pro',w="+i/100*0.6+",h=20,scale=0> "++i++"%",
				"<img name='off',w=50,h=20,scale=1>",
				"<img name='bk',full=true>我有背景图",
				"[@treeLevel]" =tree; 
				})//使用行索引标识符
	if tree ==0 tree=math.random(0,1);
	elseif tree==5  tree=math.random(4,5);
	else  tree=math.random(tree-1,tree+1);
}
mainForm.listview.setTable(t)
mainForm.listview.tree.show = 1
mainForm.listview.tree.nodeSize=16
mainForm.listview.tree.nodeImg = "3"
mainForm.listview.refreshTree();
mainForm.listview.setColumns({"<img name='1',w=20,h=20,scale=1> 编号",
								"<img name='2',w=20,h=20,scale=1> 文本 + 图片",
								"<img name='3',w=20,h=20,scale=1> 模拟进度",
								"<img name='4',w=20,h=20,scale=1> 开关",
								"<img name='5',w=20,h=20,scale=1> 背景图"},{180,180,100,70,130},{0,0,0,1,1})
mainForm.show();
mainForm.listview.onClick = function(row/*行*/,col/*列*/){
	/*鼠标左键点击项目事件*/
	if col==4{
		if mainForm.listview.getCellImg(row,col)=='on' mainForm.listview.setCellImg(row,col,'off');
		else  mainForm.listview.setCellImg(row,col,'on');
	}
}
win.loopMessage();