2. 虚表专题
  3. 虚表 —— 虚表二次封装的toolbar库的使用演示

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

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

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

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

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

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


单行演示代码：

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();

多行演示：

多行演示代码：

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();

竖向演示：

竖向演示代码：

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();

图片背景演示：

图片背景演示代码：

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();


上传的附件：
最新回复 (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楼
    光庆 已修改。见附件库。 
    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楼
    近我者赤 大佬，多行的能加垂直滚动条不？

    能：

    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就行了。应该不麻烦。
返回
发新帖
作者最近主题：