★ FEATURED ARTICLE 写易语言程序的人几乎都绕不过“超级列表框”这个组件。我最早接触E语言时第一个感觉是“这不就是个表格嘛”后来才发现这玩意儿在E语言里承担的角色远比表格重要。无论是做订单管理、日志查看、文件列表还是简单的数据查询界面超级列表框都是最主力的展示控件绝大多数桌面工具软件的核心交互都建立在它之上。这篇文章我准备从一个实战项目的角度来拆解超级列表框不光告诉你命令怎么用更重要的是告诉你为什么索引从0开始、为什么大数据量会卡、为什么排序不能直接调API以及我在实际开发中踩过的那些坑和验证过的解决方案。适合刚学会E语言基础语法、正在做第一个管理类小工具的读者也适合已经写过几个小工具但总觉得列表用得不顺手的朋友。1. 项目定位为什么超级列表框是E语言实战第一课1.1 它解决的是什么问题先想清楚一个问题程序里要展示几十条甚至上万条结构化数据用什么控件文本框肯定不行一行一行拼接文本既难看又没法交互用标签更不行界面能堆多少控件超级列表框本质上是把“数据行”和“数据列”抽象成可视化的行和列让你能滚动浏览、点击选中、定位操作甚至给每一行做不同的状态标记。我做过的几个E语言小项目里超级列表框的使用场景大致有这么几类数据管理类比如订单列表、用户列表、库存明细每一行代表一条记录双击可查看详情或修改。日志类程序运行日志、导出记录实时往列表尾部追加内容。文件浏览类文件名、大小、修改时间相当于简化版资源管理器。查询报表类按条件筛选出结果再列表展示。你会发现这些场景有几个共同点数据量大、字段多、需要用户交互。超级列表框正是为这类需求设计的。它不是表格控件而是“列表视图”控件它不负责存储业务数据只负责把数据呈现出来这个定位很重要。很多新手上来就把超级列表框当成数据库用往里面塞了几千行数据后界面卡到飞起然后抱怨控件太垃圾其实是思路错了。1.2 三种显示模式与选型超级列表框的“类型”属性决定它长什么样。在属性面板里可以看到几种取值报表列表框、大图标列表框、小图标列表框。我这里直接说结论90%的实战项目用报表列表框就够了因为你要展示的是“多列数据”不是“一堆图标”。类型显示效果典型场景报表列表框0多行多列带列标题类似表格订单、日志、人员信息大图标列表框1一行一个大图标图标下方文字文件管理器图标视图小图标列表框2小图标横向排列文字在图标的右边设置项列表、快捷方式列表我习惯在窗口创建完毕事件里用代码设置类型而不是在属性面板里改因为代码写清楚了后头维护的人一看就知道这是什么意图。例如超级列表框1.类型 0 0报表列表框这里有个细节报表列表框才有“列”图标型是没有列概念的所以如果你设置完类型后发现“列”相关的属性不见了别慌切回报表类型再配。图标模式如果要显示图片还需要配合“图片组”属性先把多张图片加入图片组再在插入表项时指定图片索引。实战中图标模式更多用于文件浏览类工具而数据管理类项目几乎清一色报表模式。2. 核心细节拆解表项模型、索引和常用命令2.1 表项、列、子表项一个类Excel的三层结构超级列表框的数据模型可以这么理解一个表项行就是一条记录表项下面的列叫做“子表项”。也就是说“插入表项”只是插入了一行插入之后这一行的第一列会被填入文字其他列需要你用“置表项文本”逐列赋值。我打个比方超级列表框像一张Excel表格。表项就是行号列就是表头而“子表项”就是你填进每个格子里的内容。“插入表项”命令相当于新建了一行但只默认在第一列写字剩下几列必须靠“置表项文本”挨个填。很多新手写代码时只写了插入表项忘了后面几列的赋值运行起来就只看到一列有数据其他列全空白。核心命令就三个索引 超级列表框1.插入表项 (, “第一列内容”, , ) 返回新表项的索引 超级列表框1.置表项文本 (索引, 1, “第二列内容”) 第2列 超级列表框1.置表项文本 (索引, 2, “第三列内容”) 第3列注意“插入表项”第一个参数是插入位置如果省略或写 -1就表示追加到末尾。千万别想当然地从1开始数索引从0开始第一行的索引是0。这个顺带引出了下一个大坑。2.2 索引从0开始最经典的越界与倒删超级列表框的索引从0开始也就是说第一行表项的索引是0第100行的索引是99。这个设计跟数组一样底层实现就是数组管理表项。我曾见过一个项目在循环里用“计次循环首 (表项数, i) ”然后直接拿 i 去访问表项结果第一行被跳过了还时不时报索引错误。原因是循环变量 i 从1开始但表项索引从0开始正确的写法是计次循环首 (超级列表框1.取表项数 (), i) 当前索引 i 1 用当前索引来读取、删除 计次循环尾 ()索引问题最典型的翻车现场是“删除全部表项”。很多人会写计次循环首 (超级列表框1.取表项数 (), i) 超级列表框1.删除表项 (i 1) 正向删除大错特错 计次循环尾 ()这么写删到一半索引就乱了。比如第一行删掉后原来的第二行变成了第一行索引全都前移了一位等于有的行没删掉有的行被跳过了。正确做法是从尾部往前删或者直接使用“删除所有表项”命令。我常用的方式如果真 (超级列表框1.取表项数 () 0) 超级列表框1.删除所有表项 ()如果必须循环删除且保留某些行那么用倒序按“取表项数 i”来作为删除索引这样删除前面的数据不会影响后面还没处理的行。这一点在批量清理、条件删除时尤其重要。2.3 常用基础属性整行选择、列宽与状态图片超级列表框的属性里有几个直接影响交互体验的我建议从一开始就设置好。第一个是“整行选择”。这个属性默认为假就是只有点击第一列才能选中行改成真之后点击这一行的任何位置都会高亮整行。做数据管理界面这个建议设成真用户体验完全不同。代码里对应的是超级列表框1.整行选择 真第二个是“列”。在报表模式下你需要先插入列否则连表头都没有。属性面板里可以手动加列但代码初始化更灵活超级列表框1.插入列 (, “订单号”, 100, , , ) 超级列表框1.插入列 (, “客户名”, 80, , , )插入列的参数含义分别是位置、标题、宽度、对齐方式、图片索引、显示状态。位置传 -1 就追加到末尾。宽度单位不是像素而是“坐标”但平时你不用纠结设置一个看着舒服的值即可。第三个是“状态图片”。很多项目需要给行打标记比如正常、警告、错误。超级列表框支持每行关联一个状态图片就是小图标。做法是先创建一个“状态图片组”往里面添加几张小图标然后在插入表项的时候把状态图片索引填进去。后续想改变某行状态用命令超级列表框1.置状态图片索引 (索引, 1) 1 对应图片组里的第二张图这样做有个好处用户扫一眼列表就能看到哪些行有问题不用逐行看文本。配合“背景颜色”一起用效果更好。3. 实战从零搭一个订单管理列表3.1 界面与列结构初始化我以一个订单管理列表为例把上面的知识点串起来。假设我们要做一个订单管理小工具列表要显示“序号、订单号、客户名、金额、状态”五列。窗口上放一个超级列表框、一个编辑框搜索词、一个按钮模拟加载数据。先在窗口的“创建完毕”事件里初始化列和超级列表框属性超级列表框1.类型 0 超级列表框1.整行选择 真 超级列表框1.插入列 (, “序号”, 40, , , ) 超级列表框1.插入列 (, “订单号”, 120, , , ) 超级列表框1.插入列 (, “客户名”, 90, , , ) 超级列表框1.插入列 (, “金额”, 70, , , ) 超级列表框1.插入列 (, “状态”, 60, , , )这里要提醒一点插入列的顺序决定了表头顺序如果先插“订单号”再插“序号”那界面上表头顺序也会跟着乱。我一般把列定义放在一个独立子程序里比如“初始化列表”这样后续调整列宽、列顺序不用翻事件代码。列宽也需要仔细调太窄了内容显示不全太宽了又浪费空间这个只能在真机上反复试不同分辨率的电脑表现差异很大。3.2 批量插入数据命令参数与“可视假”技巧模拟一批订单数据循环插入。最自然的写法变量 索引, 整数型 计次循环首 (100, i) 索引 超级列表框1.插入表项 (, 到文本 (i), , ) 超级列表框1.置表项文本 (索引, 1, “SO” 到文本 (1000 i)) 超级列表框1.置表项文本 (索引, 2, “客户” 到文本 (i)) 超级列表框1.置表项文本 (索引, 3, 到文本 (i × 3.14)) 超级列表框1.置表项文本 (索引, 4, “待处理”) 计次循环尾 ()这段代码看起来没毛病但如果你一次性要插入上万行会发现程序界面像睡着了一样。原因在于每插入一行控件就要重新计算布局、刷新滚动条、重绘界面。要解决这个问题最实用的办法就是先“让控件不可见”批量插入后再“恢复可见”。如下超级列表框1.可视 假 计次循环首 (10000, i) 插入数据 计次循环尾 () 超级列表框1.可视 真你别小看这一行“可视假”实测下来一万条数据从几十秒的卡顿降到一秒左右。原理很简单不可见时控件不需要响应绘制请求插入的每一行都只是在内存里维护数组等全部准备好了一次性画出来。这个方法可以说是超级列表框大数据量操作的第一神技。另外一个实用技巧是插入表项时指定插入位置。如果只是追加数据那位置参数省略即可不要传0或者传具体数字否则每次插入都往头部插数据顺序完全颠倒而且插入头部的性能比追加末尾差很多。这也解释了为什么有些项目插入顺序明明是正的显示出来却反了。3.3 排序实现内存数组重排后再重建列表超级列表框自身没有排序方法至少官方支持库里没有直接可用的升序降序命令。市面上有人调用系统API给ListView发消息但那是另一条路而且涉及API参数和消息常量复杂度高可维护性差。我的建议是把数据放进内存数组排序后重建列表。思路是这样的定义一个自定义数据类型比如“订单数据”里面存订单号、客户名、金额、状态。用一个“订单数据”数组装载所有记录。对数组按你想要的字段排序用冒泡排序、插入排序或者快速排序都行。清空超级列表框重新把数组内容插入一遍。为什么不在界面上直接排序因为超级列表框的“排序”属性只对文本排序实际使用中你会发现排序结果不稳定尤其是金额这类数字字段按文本排序会出现“10”排在“9”前面这种诡异结果。所以请把逻辑算清楚用真正的数值比较排序完再把结果显示出来。如果数组量在一千以内冒泡排序也能接受上万级数据建议用快速排序。我这里给一个快速排序的示意流程具体实现你可以按需改写子程序 快速排序_订单, 公开 参数订单数组、左边界、右边界 典型快排以金额字段为基准排序完成后就是清空列表并重新展示。这里注意重新展示时也要用“可视假”包一下免得重复触发重绘。这套“数据源在数组、界面只做展示”的思路是处理列表程序的一个分水岭想明白了后面做筛选、统计、导出都会顺畅很多。3.4 筛选实现遍历表项控制可视筛选要比排序简单思路是遍历所有表项判断目标列是否包含关键词包含就显示不包含就隐藏。超级列表框每条表项都有“可视”属性可以单独控制。示例计次循环首 (超级列表框1.取表项数 (), i) 当前索引 i 1 内容 超级列表框1.取表项文本 (当前索引, 1) 订单号列 如果真 (寻找文本 (内容, 编辑框_搜索.内容, , 假) ≠ -1) 超级列表框1.置表项可视 (当前索引, 真) 否则 超级列表框1.置表项可视 (当前索引, 假) 如果真结束 计次循环尾 ()这里有个体验问题如果数据量很大而关键词很窄隐藏行之后滚动条的长度会变得很小看起来就像“只有几条数据”其实是其他行被隐藏了。有的用户会疑惑“我的数据去哪了”所以我一般会在列表上方加一个标签显示“当前显示 X / 共 Y 条”这样用户心里有底。还要注意筛选后如果要“取消筛选”就是把所有表项的可视都设置回真千万不要去删除那些被隐藏的行否则数据全没了。另一个细节是判断关键词是否包含时用“寻找文本”会比“如果真文本关键词”更符合搜索习惯。用户输入一个字就能匹配到所有包含这个字的行。如果要做不区分大小写可把两个文本都转成大写再比较也就是使用“到大写”命令这个在处理订单号、英文状态时很有用。4. 常见问题与排查技巧实录4.1 插入后列内容不显示这几乎是超级列表框新手遇到的第一个问题。代码写了“插入表项”并设置了文本但运行时只有第一列有内容其他列全部空白。排查逻辑很简单确认当前类型是“报表列表框”图标模式根本没有列确认列已经插入如果列数为0置表项文本就是空操作确认赋值顺序是先插入表项拿到索引再对索引置文本确认调用的列索引不超出“插入列”的列数量。我见过一个项目列索引填了0然后说“最后一列怎么都不显示”。记住列索引也是从0开始的0代表第一列置表项文本用0等于给第一列重复赋值当然最后一列没数据。这类问题定位不难但容易让人困惑建议在初始化列表后加一句“输出调试文本”打印一下当前列数和表项数用数据说话不要瞎猜。4.2 大数据量插入卡死这个问题我在前文已经给了核心解法就是“可视假”批量插入后再显示。但如果你已经用了这个办法还是卡那就需要考虑是不是插入方式太频繁了。比如你在循环里每次插入后都调用“超级列表框1.刷新显示()”这个刷新操作是重量级的高频调用得不偿失。正确做法是不要手动刷新让控件自己决定何时重绘。还有一个常见来源是循环里做了大量字符串拼接。字符串拼接在E语言里是出了名的慢性子尤其是往一个文本变量上反复加内容。解决方法是使用“快速文本对象”或者尽量少在循环里做拼接把数据先组装好再插入。4.3 删除表项越界与顺序错乱删除表项出现“索引超出范围”九成是正向循环删除造成的前面已经说过倒删的写法这里再补一个断言小技巧在删除前用“输出调试文本”打印当前索引和表项数方便定位。比如如果真 (当前索引 0 或 当前索引 ≥ 超级列表框1.取表项数 ()) 输出调试文本 (“越界” 到文本 (当前索引)) 返回 () 如果真结束批量删除还有一个比较容易忽视的点如果你要根据条件删除某些行删除操作会导致索引变化所以不要在一个循环里既判断又删除最简单的方案是先用一个数组记录要删除的索引循环结束后统一从后往前删除那些已经记录的索引。4.4 排序、筛选后状态丢失怎么办很多人在超级列表框上做了“状态图片”或“背景色”标记结果排序之后就乱了。原因很简单你只对文本进行了重排没有把状态图片索引、背景颜色这些视觉属性跟着一起重新设置。我个人的建议是如果状态信息重要就不要只画在界面上要放进数据数组里。比如自定义数据类型里加一个“状态索引”字段排序交换数组元素时这个字段跟随移动重建列表时再统一置状态图片。这么做从根上避免“视觉和数据脱节”的问题。重建列表时的顺序也很重要先插入表项再逐个设置文本、状态图片、背景颜色不要先设状态再插入表项那样会因为对象不存在而无效。4.5 问题速查表问题现象可能原因解决办法只有第一列有数据列未插入或列索引使用错误先插入列列索引从0开始插入上万行卡顿每次插入都触发重绘批量插入前后设置可视假删除时索引越界正向循环删除索引前移倒序删除或记录索引后统一删排序后金额顺序不对按文本排序而非数值排序在数组里按数值排序后重建列表排序后状态图片错乱只重排序文本状态没联动用数据结构保存状态字段筛选后找不到隐藏行表项可视被设为假使用“重新显示所有表项”按钮列宽不合适未按内容长度调整动态估算列宽或手动统一这张表是我在多个项目里反复遇到的问题汇总可以说80%的超级列表框问题都能在表里找到答案。如果你碰到的问题不在表里大概率是你往列表里塞了不该塞的数据结构或者逻辑放错了位置。5. 性能优化与扩展实践5.1 分页加载让万级数据不再卡就算用了“可视假”一次性加载几万条数据也只是“勉强能用”因为滚动依然不够顺滑用户体验不好。更专业的做法是分页加载只加载前100条当用户滚动到接近底部时再自动追加下一批数据。实现起来也不复杂给超级列表框绑定“滚动条被改变”事件判断当前滚动位置。如果纵向滚动条的当前值加上一页的高度已经接近最大滚动值就触发一次加载。这样做的深层原因是超级列表框的所有行都在内存里行数越多占内存越多各种查找、重绘的性能都会下降。分页加载把行数控制在几百以内性能和资源占用都是最优区间。这也是为什么很多成熟的管理软件默认只显示几十条记录用户搜索之后再加载结果。5.2 数据与界面分离的设计思路从实用角度看我推荐大家把列表相关的数据全部放到程序集变量或全局变量里用自定义数据类型数组来管理。界面上的超级列表框只是一个“视图”它永远由数据数组刷新而来。这样做带来的好处非常直观排序时只需要对数组排序再全量刷新一次界面筛选时只需要遍历数组生成一个“临时结果数组”再刷新界面导出CSV时直接遍历数组完全不需要触碰控件。数据与界面分离之后代码的调试效率高很多因为程序逻辑跑在哪一层都能靠输出文本判断。如果项目再大一点甚至可以把“刷新列表”封装成一个独立子程序参数是数据数组。调用前修改数据调用后界面自动同步这个思路和现代MVVM设计模式异曲同工虽然E语言不讲究这些东西但是用起来真香。5.3 我的几个工程习惯最后说几个我从多个实际项目里总结出来的习惯你直接抄作业就行。第一动态修改数据后统一刷新。不要在插入一半数据时去做列表排序或筛选那是给自己挖坑。我一般把操作分成“改数据”和“刷界面”两步所有增删改只动数据数组最后统一“重建列表”。第二状态图片和背景色配套使用。比如状态是“待处理”用黄色背景状态是“已完成”用绿色背景同时配一个不同的小图标。颜色能被快速扫视图标则可以作为文字之外的冗余提示这个对可读性提升很大。第三给列表留一个“导出”能力。哪怕只是导出成CSV文件代码也很简单遍历数组拼接文本就行。这个功能在用户看来很酷在他们眼里“能把数据导出来”代表了专业。实际开发中你永远不知道用户什么时候会提出“我要把这份数据发给领导”早点把导出函数写好到时候就是一行调用的事。这些习惯看起来不起眼但它们让超级列表框的使用从“能显示数据”上升到了“好维护、好扩展”的层次。如果你正在做自己的E语言工具不妨从今天起就按这个思路重构一下列表相关的代码等数据量上来了你会庆幸自己提前改了设计。
阅读完成 · 觉得有帮助？
