虚表 —— 虚表二次封装的toolbar库的使用演示-虚表专题-Aardio资源网

虚表 —— 虚表二次封装的toolbar库的使用演示

光庆 4月前 1400 v 1.2 2025-02-01

虚表功能太多，很多人其实都不会用。

经小肥羊建议，尝试对虚表做二次封装，将某些经常用、好用的功能，封装为一个个独立的小库，小巧方便，非常实用。

也希望有此想法的朋友，封装好了以后分享给我，我集成到虚表库中进行统一发布。

附件为 toolbar 库 V1.2 版，请自行下载。

单行演示代码：

Code AardioLine:60复制
	1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
import win.ui;
import godking.vlistEx.toolbar
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
vlistEx={cls="vlistEx";text="自定义控件";left=16;top=16;right=168;bottom=56;z=1}
)
/*}}*/
winform.show();
// 创建实例
var toolbar = godking.vlistEx.toolbar(winform.vlistEx,{
        bkcolor = 0xFFFFFF; /*背景颜色*/
        bkimage = null;
        cellwidth = 60;        /*单元格宽度*/
        cellheight = 80;    /*单元格高度*/
        imgpadding = 10;
        textpadding = 5;     
        font={name="宋体",h=12,color=0xFF000000};        /*正常字体*/
        hoverfont={name="宋体",h=12,color=0xFFFF0000};    /*鼠标划过字体*/
        lineColorH = 0xBBBBBB;
        lineColorV = 0xCCCCCC;
})
// 添加图片
import inet.http
import godking.paint
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250124/1737707732.png",5,5,0,0,0,0);
for(i=1;#imgs;1){
    toolbar.addImg("img"++i/*图片名称*/,imgs[i]/*图片数据*/);
}
//设置项目
toolbar.setItemList ({    
    "img1|img2|打开",
    "img3|img4|编辑",
    "img5|img10|视图",
    "img6|img11|阅览",
    "|",
    "img7|img12|打印",
    "img8|img13|帮助",
    "|",
    "img9|img14|关于",                
    "img15|img16|编辑",
    "img17|img18|视图",
    "img19|img11|阅览",
    "|",
    "img20|img12|打印",
    "img21|img13|帮助",
    "|",
    "img22|img14|关于",
    })
// 定义点击事件
toolbar.onClick = function(row/*行号*/,col/*列号*/,text/*项目文本*/){
    ..win.msgbox("您点击了第"++col++"个："++text);
}
win.loopMessage();

多行演示：

多行演示代码：

Code AardioLine:59复制
	1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
import win.ui;
import godking.vlistEx.toolbar
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
vlistEx={cls="vlistEx";text="自定义控件";left=16;top=16;right=168;bottom=56;z=1}
)
/*}}*/
winform.show();
// 创建实例
var toolbar = godking.vlistEx.toolbar(winform.vlistEx,{
        bkcolor = 0xFFFFFF; /*背景颜色*/
        bkimage = null;
        cellwidth = 60;        /*单元格宽度*/
        cellheight = 80;    /*单元格高度*/
        imgpadding = 10;
        textpadding = 5; 
        font={name="宋体",h=12,color=0xFF000000};        /*正常字体*/
        hoverfont={name="宋体",h=12,color=0xFFFF0000};    /*鼠标划过字体*/
        lineColorH = 0xBBBBBB;
        lineColorV = 0xCCCCCC;
})
// 添加图片
import inet.http
import godking.paint
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250124/1737707732.png",5,5,0,0,0,0);
for(i=1;#imgs;1){
    toolbar.addImg("img"++i/*图片名称*/,imgs[i]/*图片数据*/);
}
//设置项目
toolbar.setItemList ({    
    "img1|img2|打开",
    "img3|img4|编辑",
    "img5|img10|视图",
    "img6|img11|阅览",
    "||",
    "img7|img12|打印",
    "img8|img13|帮助"
    },
    {
    "img9|img14|关于",                
    "img15|img16|编辑",
    "||",
    "img20|img12|打印",
    "img21|img13|帮助",
    "||",
    "img22|img14|关于",
    })
// 定义点击事件
toolbar.onClick = function(row/*行号*/,col/*列号*/,text/*项目文本*/){
    ..win.msgbox("您点击了第"++row++"行，第"++col++"个："++text);
}
win.loopMessage();

竖向演示：

竖向演示代码：

Code AardioLine:48复制
	1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
import win.ui;
import godking.vlistEx.toolbar
/*DSG{{*/
var winform = win.form(text="aardio form";right=639;bottom=647)
winform.add(
vlistEx={cls="vlistEx";text="自定义控件";left=16;top=16;right=168;bottom=56;z=1}
)
/*}}*/
// 创建实例
var toolbar = godking.vlistEx.toolbar(winform.vlistEx,{
        bkcolor = 0xFFFFFF; /*背景颜色*/
        bkimage = null;
        cellwidth = 60;        /*单元格宽度*/
        cellheight = 80;    /*单元格高度*/
        imgpadding = 10;
        textpadding = 5;   
        font={name="宋体",h=12,color=0xFF000000};        /*正常字体*/
        hoverfont={name="宋体",h=12,color=0xFFFF0000};    /*鼠标划过字体*/
        lineColorH = 0xBBBBBB; 
        lineColorV = 0xCCCCCC; 
})
// 添加图片
import inet.http
import godking.paint
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250124/1737707732.png",5,5,0,0,0,0);
for(i=1;#imgs;1){
    toolbar.addImg("img"++i/*图片名称*/,imgs[i]/*图片数据*/);
}
//设置项目
toolbar.setItemList (    {"img1|img2|打开"},
                        {"img3|img4|编辑"},
                        {"img5|img10|视图"},
                        {"img6|img11|阅览"},
                        {"img7|img12|打印"},
                        {"img8|img13|帮助"},
                        {"img9|img14|关于"},                
                    )
// 定义点击事件
toolbar.onClick = function(row/*行号*/,col/*列号*/,text/*项目文本*/){
    ..win.msgbox("您点击了第"++row++"个："++text);
}
winform.show();
win.loopMessage();

图片背景演示：

图片背景演示代码：

Code AardioLine:51复制
	1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
import win.ui;
import godking.vlistEx.toolbar
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469;image=$"E:\壁纸\1 (2)_看图王.jpg")
winform.add(
vlistEx={cls="vlistEx";text="自定义控件";left=0;top=0;right=152;bottom=40;z=1}
)
/*}}*/
// 创建实例
var toolbar = godking.vlistEx.toolbar(winform.vlistEx,{
        bkcolor = 0xFFFFFF;     /*表格背景颜色*/
        bkimage = "E:\壁纸\1 (2)_看图王.jpg";          /*表格背景图片*/
        cellwidth = 60;          /*单元格宽度*/
        cellheight = 80;        /*单元格高度*/
        imgpadding = 10;        /*单元格图片空白边距*/
        textpadding = 5;        /*单元格文本空白边距*/
        font={name="宋体",h=12,color=0xFF000000};         /*正常字体*/
        hoverfont={name="宋体",h=12,color=0xFFFFFFFF};    /*鼠标划过字体*/
        lineColorH = 0xBBBBBB;
        lineColorV = 0xCCCCCC;
})
// 添加图片
import inet.http
import godking.paint
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250124/1737707732.png",5,5,0,0,0,0);
for(i=1;#imgs;1){
    toolbar.addImg("img"++i/*图片名称*/,imgs[i]/*图片数据*/);
}
//设置项目
toolbar.setItemList ({    
    "img1|img2|打开视图",
    "img3|img4|编辑",
    "img5|img10|视图",
    "img6|img11|阅览",
    "|",
    "img7|img12|打印",
    "img8|img13|帮助",
    "|",
    "img9|img14|关于"
    })
// 定义点击事件
toolbar.onClick = function(row/*行号*/,col/*列号*/,text/*项目文本*/){
    ..win.msgbox("您点击了第"++col++"个："++text);
}
winform.show();
win.loopMessage();

上传的附件：

toolbar.aardio (大小：6.65K，下载次数：219)

最新回复 (21)

axuanup 4月前

0 引用 2楼
nanyi 4月前

0 引用 3楼

牛阿，点赞了
zhhyit 4月前

0 引用 4楼

就是功能太多了，没有Demo的情况下，吾等小白，不知道如何下手😸😸
zhhyit 4月前

0 引用 5楼

godking.vlistEx.toolbar支不支持多行？例如一行放不下图标，支持多行的toolbar，这样的话，就可以制作多行多列的APP图标矩阵了
光庆 4月前

0 引用 6楼

zhhyit godking.vlistEx.toolbar支不支持多行？例如一行放不下图标，支持多行的toolbar，这样的话，就可以制作多行多列的APP图标矩阵了
可以，自己改一下就行
zhhyit 4月前

0 引用 7楼

光庆可以，自己改一下就行
光大太高看我了，我还在新手学习的路上，哈哈
光庆 4月前

1 引用 8楼

zhhyit 光大太高看我了，我还在新手学习的路上，哈哈
已修改。见附件库。
zhhyit 4月前

0 引用 9楼

不出手则已，一出手就是王炸！
可算是把这个知识点模块弄彻底了。

zhhyit 4月前

0 10楼

光庆已修改。见附件库。

Code AardioLine:73复制
	1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
import win.ui;
import godking.vlistEx;
/*DSG{{*/
var winform = win.form(text="图标矩阵"; right=600; bottom=400; bgcolor=0xFFFFFF)
winform.add(
    grid = { 
        cls="vlistEx"; left=10; top=10; right=590; bottom=390; 
        bgcolor=0xFFFFFF; db=1; dl=1; dr=1; dt=1; z=1 
    }
)
/*}}*/
// 定义6行5列的图标数据 (每行5个图标)
var iconData = {
    { "\1.png|\1_hover.png", "\2.png|\2_hover.png", "\3.png|\3_hover.png", "\4.png|\4_hover.png", "\5.png|\5_hover.png" },
    { "\6.png|\6_hover.png", "\7.png|\7_hover.png", "\8.png|\8_hover.png", "\9.png|\9_hover.png", "\10.png|\10_hover.png" },
    { "\11.png|\11_hover.png", "\12.png|\12_hover.png", "\13.png|\13_hover.png", "\14.png|\14_hover.png", "\15.png|\15_hover.png" },
    { "\16.png|\16_hover.png", "\17.png|\17_hover.png", "\18.png|\18_hover.png", "\19.png|\19_hover.png", "\20.png|\20_hover.png" },
    { "\21.png|\21_hover.png", "\22.png|\22_hover.png", "\23.png|\23_hover.png", "\24.png|\24_hover.png", "\25.png|\25_hover.png" },
    { "\26.png|\26_hover.png", "\27.png|\27_hover.png", "\28.png|\28_hover.png", "\29.png|\29_hover.png", "\30.png|\30_hover.png" }
}
// 设置数据表（6行5列）
winform.grid.setTable(
    iconData,         // 数据表（6行5列）
    null,             // 列标题（不显示）
    { 100, 100, 100, 100, 100 }, // 列宽（每列100像素）
    1                 // 水平居中
)
// 隐藏滚动条和表头
winform.grid.hideScroll(true, true)
winform.grid.setHeaderHeight(0)
// 设置行高与样式
winform.grid.setRowHeight(60)         // 行高60像素
winform.grid.lineWidthV = null        // 隐藏垂直分隔线
winform.grid.selectedBkColor = null   // 禁用选中背景色
winform.grid.padding = { top=0, bottom=20 } // 底部留白用于显示文本
// 设置所有列为按钮类型（图片居中缩放）
winform.grid.setColumnType(, 5/*_vlistEx_ColType_Button*/, 1)
// 定义图标标签（6行5列对应的文本）
var title = {
    { "图标1-1", "图标1-2", "图标1-3", "图标1-4", "图标1-5" },
    { "图标2-1", "图标2-2", "图标2-3", "图标2-4", "图标2-5" },
    { "图标3-1", "图标3-2", "图标3-3", "图标3-4", "图标3-5" },
    { "图标4-1", "图标4-2", "图标4-3", "图标4-4", "图标4-5" },
    { "图标5-1", "图标5-2", "图标5-3", "图标5-4", "图标5-5" },
    { "图标6-1", "图标6-2", "图标6-3", "图标6-4", "图标6-5" }
}
// 自定义绘制文本（在图标下方居中显示）
winform.grid.onDrawCellEnd = function(row, col, hdc, rect, bkcolor, text, font, colalign) {
    rect.top += 40 // 下移文本绘制位置
    ..gdi.drawTextCenter(
        hdc, 
        ..gdi.getFont(owner.hwnd), 
        title[row][col], // 根据行列获取对应文本
        rect, 
        4/*_DT_VCENTER*/ | 0x20/*_DT_SINGLELINE*/
    )
}
// 点击事件处理（支持多行多列）
winform.grid.onClick = function(row, col, x, y, buttonIndex) {
    win.msgbox("点击了第" + row + "行第" + col + "列：" + title[row][col])
}
winform.show();
win.loopMessage();

这个我实在写不出来，把光大你的godking.vlistEx整个类的代码喂给Deepseek，以上aardio代码是Deepseek写出来的，不是本人写的，测试了下，把图片地址换成真实地址可以用了，非常nice。

给大家分享下另一种思路，不要重复造轮子了，站在巨人的肩膀上前进！前进！

再次感谢光大的贡献和无私分享！

光庆 4月前

0 引用 11楼

zhhyit import win.ui; import godking.vlistEx; /*DSG{{*/ var winform&nbs ...
这就有点厉害了，AI能自动写了，赞赞赞赞
zhhyit 4月前

0 引用 12楼

光庆这就有点厉害了，AI能自动写了，赞赞赞赞
godking.vlistEx.toolbar能不能实现，鼠标划过APP图片有一个缩放的基础动画效果（1.2倍）（或者其他高级动画效果，比如果冻弹弹抖动），此时可以设置一种APP图片，不用切换2种APP图片，也让用户也能知道鼠标目前在哪个APP图标上面，请光大赐教。
光庆 4月前

0 引用 13楼

zhhyit godking.vlistEx.toolbar能不能实现，鼠标划过APP图片有一个缩放的基础动画效果（1.2倍）（或者其他高级动画效果，比如果冻弹弹抖动），此时可以设置一种APP图片，不用切换2种AP ...
https://aardio.online/thread-585.htm
zhhyit 4月前

0 引用 14楼

光庆 https://aardio.online/thread-585.htm
Got it
近我者赤 3月前

0 引用 15楼

大佬，多行的能加垂直滚动条不？

光庆 3月前

0 16楼

近我者赤大佬，多行的能加垂直滚动条不？

能：

Code AardioLine:70复制
	1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
import win.ui;
import godking.vlistEx.toolbar
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
vlistEx={cls="vlistEx";text="自定义控件";left=16;top=16;right=168;bottom=56;z=1}
)
/*}}*/
winform.show();
// 创建实例
var toolbar = godking.vlistEx.toolbar(winform.vlistEx,{
        bkcolor = 0xFFFFFF; /*背景颜色*/
        bkimage = null;
        cellwidth = 60;        /*单元格宽度*/
        cellheight = 80;    /*单元格高度*/
        imgpadding = 10;
        textpadding = 5; 
        font={name="宋体",h=12,color=0xFF000000};        /*正常字体*/
        hoverfont={name="宋体",h=12,color=0xFFFF0000};    /*鼠标划过字体*/
        lineColorH = 0xBBBBBB;
        lineColorV = 0xCCCCCC;
})
// 添加图片
import inet.http
import godking.paint
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250124/1737707732.png",5,5,0,0,0,0);
for(i=1;#imgs;1){
    toolbar.addImg("img"++i/*图片名称*/,imgs[i]/*图片数据*/);
}
//设置项目
toolbar.setItemList ({    
    "img1|img2|打开",
    "img3|img4|编辑",
    "img5|img10|视图",
    "img6|img11|阅览",
    "||",
    "img7|img12|打印",
    "img8|img13|帮助"
    },
    {
    "img9|img14|关于",                
    "img15|img16|编辑",
    "||",
    "img20|img12|打印",
    "img21|img13|帮助",
    "||",
    "img22|img14|关于",
    }  
        ,  {
    "img9|img14|关于",                
    "img15|img16|编辑",
    "||",
    "img20|img12|打印",
    "img21|img13|帮助",
    "||",
    "img22|img14|关于",
    })
// 定义点击事件
toolbar.onClick = function(row/*行号*/,col/*列号*/,text/*项目文本*/){
    ..win.msgbox("您点击了第"++row++"行，第"++col++"个："++text);
}
winform.vlistEx.width += winform.vlistEx.scrollbarWidth;
winform.vlistEx.height=150
winform.vlistEx.hideScroll(true/*隐藏横向滚动条*/,false/*隐藏纵向滚动条*/,false/*禁用滚轮和键盘滚动*/)
win.loopMessage();

近我者赤 3月前

0 引用 17楼
zhhyit 3月前

0 引用 18楼

光大，如何设置 Alt +a 这种快捷键，模拟点击某个图标，可不可以在 V list库文件里，针对图标设置个快捷键参数
光庆 3月前

0 引用 19楼

zhhyit 光大，如何设置 Alt +a 这种快捷键，模拟点击某个图标，可不可以在 V list库文件里，针对图标设置个快捷键参数
这个使用快捷键对应的库，注册需要的热键，在按下热键后，调用 vlist.onClick() 函数即可，只需要给 onClick 函数传递正确的row和col就行了。应该不麻烦。

发新帖

光庆

主题数
224

帖子数
559

精华数
0

注册排名
2

虚表 —— 虚表二次封装的toolbar库的使用演示

Got it

光庆

作者最近主题：