编程语言
易语言界面组件高级应用：常用组件优化、事件处理与自定义组件
介绍易语言界面组件的高级应用，涵盖超级列表框排序搜索与虚拟列表优化、组合框自动完成与多列模拟、树型框递归遍历及右键菜单、编辑框正则验证、图片框缩放旋转。内容包含组件事件处理（键盘组合键、鼠标坐标转换）、布局优化（锚定与停靠）以及自定义组件的继承与属性事件封装。最后通过员工薪资管理系统案例演示了虚拟列表数据库交互等实战优化方案。
介绍易语言界面组件的高级应用，涵盖超级列表框排序搜索与虚拟列表优化、组合框自动完成与多列模拟、树型框递归遍历及右键菜单、编辑框正则验证、图片框缩放旋转。内容包含组件事件处理（键盘组合键、鼠标坐标转换）、布局优化（锚定与停靠）以及自定义组件的继承与属性事件封装。最后通过员工薪资管理系统案例演示了虚拟列表数据库交互等实战优化方案。
💡学习目标：1. 掌握常用组件的高级属性（如超级列表框的排序、搜索，组合框的自动完成）；2. 学会处理组件事件的高级场景（如组合键、鼠标拖拽、滚轮缩放）；3. 掌握组件布局的优化方法（锚定与停靠）；4. 初步了解自定义组件的开发流程（继承、封装、添加属性/事件）；5. 通过真实案例（员工薪资管理系统的高级界面优化）巩固所学知识。 ⚠️学习重点：超级列表框的高级操作、组件事件的组合处理、锚定与停靠的布局优化、自定义组件的属性和事件封装。
超级列表框是易语言中功能最强大的列表组件，常用于显示和操作大量结构化数据。
超级列表框支持单列排序和多列排序，还可以通过代码实现搜索功能。
.版本 2 .支持库 eGrid .子程序 初始化超级列表框_排序搜索，, 公开 .参数 超级列表框组件，超级列表框，参考 ' 设置超级列表框的基本属性 超级列表框组件。类型 ＝ 2 ' 报表列表框 超级列表框组件。整行选择 ＝ 真 超级列表框组件。可排序 ＝ 真 ' 启用列标题排序 超级列表框组件。显示垂直滚动条 ＝ 真 超级列表框组件。显示水平滚动条 ＝ 真 ' 插入列标题并设置宽度 超级列表框组件。插入列 (0, '员工编号', 120) 超级列表框组件。插入列 (1, '员工姓名', 150) 超级列表框组件。插入列 (2, '员工部门', 100) 超级列表框组件。插入列 (3, '员工职位', 100) 超级列表框组件。插入列 (4, '基础薪资', 120) 超级列表框组件。插入列 (5, '总薪资', 120)
.版本 2 .支持库 eGrid .子程序 超级列表框搜索，, 公开 .参数 超级列表框组件，超级列表框，参考 .参数 搜索条件，文本型，, 搜索条件（支持模糊搜索） .参数 搜索列索引，整数型，, 搜索的列索引（默认值 0：员工编号） ' 清空当前选中的表项 超级列表框组件。全选表项 (假) ' 遍历所有表项进行搜索 .局部变量 表项索引，整数型 计次循环首 (超级列表框组件。取表项数 (), 表项索引) ' 获取当前表项的指定列内容 .局部变量 列内容，文本型 列内容 ＝ 超级列表框组件。取标题 (表项索引 － 1, 搜索列索引) ' 判断列内容是否包含搜索条件（不区分大小写） 如果真 (寻找文本 (列内容，搜索条件，, 假) ≠ -1) ' 选中符合条件的表项 超级列表框组件。选择表项 (表项索引 － 1, 真) 如果真结束 计次循环首结束
当超级列表框需要显示大量数据（如 10 万条以上）时，直接添加所有表项会导致界面卡顿。使用虚拟列表可以解决这个问题。 💡虚拟列表原理：只在界面上显示当前可见区域的表项，当滚动条滚动时，动态加载可见区域的数据。
.版本 2 .支持库 eGrid .子程序 初始化超级列表框_虚拟，, 公开 .参数 超级列表框组件，超级列表框，参考 .参数 数据总条数，整数型，, 数据总条数 .参数 可见行数，整数型，, 可见区域的行数 ' 设置超级列表框的基本属性 超级列表框组件。类型 ＝ 2 ' 报表列表框 超级列表框组件。整行选择 ＝ 真 超级列表框组件。可排序 ＝ 真 超级列表框组件。显示垂直滚动条 ＝ 真 超级列表框组件。显示水平滚动条 ＝ 真 超级列表框组件。虚拟列表 ＝ 真 ' 启用虚拟列表 ' 插入列标题并设置宽度 超级列表框组件。插入列 (0, '员工编号', 120) 超级列表框组件。插入列 (1, '员工姓名', 150) 超级列表框组件。插入列 (2, '员工部门', 100) ' 设置虚拟列表的参数 超级列表框组件。虚拟列表。总数据条数 ＝ 数据总条数 超级列表框组件。虚拟列表。可见行数 ＝ 可见行数 超级列表框组件。虚拟列表。行高 ＝ 25 ' 设置行高
.版本 2 .支持库 eGrid .子程序 _虚拟超级列表框_获取虚拟数据，, 公开，虚拟列表的数据获取事件 .参数 表项索引数组，整数型，数组，, 需要获取数据的表项索引数组 .参数 列标题数组，文本型，数组，, 列标题数组 .参数 标题数组，文本型，数组，, 用于存储获取到的标题数据 ' 遍历需要获取数据的表项索引 .局部变量 索引，整数型 计次循环首 (取数组成员数 (表项索引数组), 索引) ' 模拟获取数据（实际开发中应从数据库或文件中读取） .局部变量 表项索引，整数型 表项索引 ＝ 表项索引数组 [索引] ' 设置各列的标题 标题数组 [索引 － 1] [1] ＝ 'YG202X' ＋ 到文本 (表项索引 ＋ 1) 标题数组 [索引 － 1] [2] ＝ '员工' ＋ 到文本 (表项索引 ＋ 1) 标题数组 [索引 － 1] [3] ＝ '技术部' 计次循环首结束
组合框是一个结合了编辑框和列表框功能的组件，常用于用户选择或输入预定义选项。
.版本 2 .支持库 eGrid .子程序 初始化组合框_自动完成，, 公开 .参数 组合框组件，组合框，参考 .参数 选项数组，文本型，数组，, 预定义选项数组 ' 设置组合框的基本属性 组合框组件。类型 ＝ 1 ' 可输入的下拉列表框 组合框组件。允许编辑 ＝ 真 组合框组件。自动完成 ＝ 真 ' 启用自动完成功能 组合框组件。自动完成模式 ＝ 0 ' 建议后附加（默认值） ' 添加预定义选项 .局部变量 索引，整数型 计次循环首 (取数组成员数 (选项数组), 索引) 组合框组件。加入项目 (选项数组 [索引]) 计次循环首结束
在易语言中，默认的组合框不支持多列显示，但我们可以通过自定义绘制或使用第三方组件来实现。这里介绍一种使用树型框模拟多列组合框的方法。
.版本 2 .支持库 eGrid .子程序 初始化模拟多列组合框，, 公开 .参数 编辑框组件，编辑框，参考，用于输入和显示选中项 .参数 树型框组件，树型框，公开，用于显示多列选项 .参数 选项二维数组，文本型，数组，, 多列选项的二维数组（第一行为列标题） ' 设置编辑框的基本属性 编辑框组件。只读 ＝ 真 ' 设置为只读，只允许通过树型框选择 ' 设置树型框的基本属性 树型框组件。可多选 ＝ 假 树型框组件。显示线 ＝ 假 树型框组件。列数 ＝ 取数组成员数 (选项二维数组 [1]) ' 设置树型框的列数 树型框组件。宽度 ＝ 编辑框组件。宽度 树型框组件。高度 ＝ 200 树型框组件。可视 ＝ 假 ' 初始时隐藏 ' 添加多列选项到树型框 .局部变量 行索引，整数型 .局部变量 列索引，整数型 行索引 ＝ 2 判断循环首 (行索引 ≤ 取数组成员数 (选项二维数组)) ' 添加节点 .局部变量 节点句柄，整数型 节点句柄 ＝ 树型框组件。插入子节点 (, 选项二维数组 [行索引] [1]) ' 设置节点的各列内容 列索引 ＝ 2 判断循环首 (列索引 ≤ 取数组成员数 (选项二维数组 [1])) 树型框组件。置节点标题 (节点句柄，列索引 － 1, 选项二维数组 [行索引] [列索引]) 列索引 ＝ 列索引 ＋ 1 判断循环尾 () 行索引 ＝ 行索引 ＋ 1 判断循环尾 ()
树型框是一个用于显示层级结构数据的组件，常用于文件管理、组织架构管理等场景。
.版本 2 .支持库 eGrid .子程序 树型框节点递归遍历，, 公开 .参数 树型框组件，树型框，公开 .参数 父节点句柄，整数型，可空，父节点句柄（为空时遍历根节点） .局部变量 子节点句柄数组，整数型，数组 .局部变量 子节点句柄，整数型 .局部变量 索引，整数型 ' 如果父节点句柄为空，遍历根节点 .如果 (父节点句柄 ＝ 0 或 父节点句柄 ＝ 空) 子节点句柄数组 ＝ 树型框组件。取根节点 () .否则 ' 获取父节点的所有子节点 子节点句柄数组 ＝ 树型框组件。取子节点 (父节点句柄) .如果结束 ' 遍历所有子节点 计次循环首 (取数组成员数 (子节点句柄数组), 索引) 子节点句柄 ＝ 子节点句柄数组 [索引] ' 输出当前节点的标题 调试输出 ('当前节点标题：', 树型框组件。取节点标题 (子节点句柄)) ' 递归遍历当前节点的子节点 树型框节点递归遍历 (树型框组件，子节点句柄) 计次循环首结束
.版本 2 .支持库 eGrid .支持库 shellEx ' 程序集数据段定义的菜单组件 .程序集变量 节点操作菜单，菜单 .程序集变量 添加子节点菜单项，菜单 .程序集变量 删除节点菜单项，菜单 .程序集变量 修改节点菜单项，菜单 .子程序 初始化树型框右键菜单，, 公开 ' 创建节点操作菜单 节点操作菜单。创建 ('节点操作') ' 创建菜单项 添加子节点菜单项。创建 ('添加子节点', 节点操作菜单) 删除节点菜单项。创建 ('删除节点', 节点操作菜单) 修改节点菜单项。创建 ('修改节点', 节点操作菜单)
.版本 2 .支持库 eGrid .支持库 shellEx .子程序 _树型框_右键菜单，, 公开 .参数 节点句柄，整数型，, 右键点击的节点句柄 .参数 x, 整数型，, 右键点击的 x 坐标（屏幕坐标） .参数 y, 整数型，, 右键点击的 y 坐标（屏幕坐标） ' 显示右键菜单 节点操作菜单。弹出 (x, y)
编辑框是一个用于用户输入文本的组件，常用于输入用户名、密码、备注等信息。
正则表达式可以用于验证输入文本的格式是否符合要求（如邮箱、手机号、身份证号等）。在易语言中，我们可以使用精易模块的'正则表达式'支持库。
.版本 2 .支持库 spec .支持库 EThread .支持库 shellEx .子程序 编辑框正则表达式验证，逻辑型，公开，使用精易模块的正则表达式验证输入文本的格式 .参数 编辑框组件，编辑框，参考，要验证的编辑框组件 .参数 正则表达式，文本型，, 正则表达式 .参数 验证失败提示信息，文本型，, 验证失败时的提示信息 .局部变量 正则对象，类正则表达式 ' 精易模块的正则表达式类 ' 初始化正则对象 正则对象。初始化 (正则表达式，, ) ' 验证编辑框的内容 .如果 (正则对象。匹配文本 (编辑框组件。内容，, ) ＝ 假) ' 验证失败，显示提示信息 信息框 (验证失败提示信息，0, '错误') ' 聚焦到编辑框并全选内容 编辑框组件。获取焦点 () 编辑框组件。起始选择位置 ＝ 0 编辑框组件。被选择字符数 ＝ 取文本长度 (编辑框组件。内容) 返回 (假) .如果结束 ' 验证成功 返回 (真)
图片框是一个用于显示图片的组件，常用于显示 Logo、产品图片等。
.版本 2 .支持库 spec .支持库 EThread .支持库 shellEx .子程序 图片框图片缩放，, 公开，使用精易模块的图片处理函数缩放图片 .参数 图片框组件，图片框，参考，要显示缩放后图片的图片框组件 .参数 原图片字节集，字节集，, 原图片的字节集 .参数 缩放比例，双精度小数型，, 缩放比例（大于 1 为放大，小于 1 为缩小） .局部变量 缩放后图片字节集，字节集 ' 使用精易模块的图片缩放函数 缩放后图片字节集 ＝ 图片_缩放 (原图片字节集，缩放比例，缩放比例) ' 显示缩放后图片 图片框组件。图片 ＝ 缩放后图片字节集
.版本 2 .支持库 eGrid .子程序 _编辑框_按下某键，, 公开 .参数 键代码，整数型，, 按下的键的代码 .参数 功能键状态，整数型，, 功能键的状态（Ctrl=8、Alt=4、Shift=2） ' 判断是否按下了 Ctrl+C 组合键 .如果 (键代码 ＝ 67 且 位与 (功能键状态，8) ＝ 8) ' 执行复制操作 复制操作 () .否则 .如果 (键代码 ＝ 86 且 位与 (功能键状态，8) ＝ 8) ' 执行粘贴操作 粘贴操作 () .如果结束 .如果结束
.版本 2 .支持库 eGrid .子程序 _图片框_鼠标左键按下，, 公开 .参数 横向位置，整数型，, 鼠标左键按下时的横向位置（组件坐标） .参数 纵向位置，整数型，, 鼠标左键按下时的纵向位置（组件坐标） .参数 功能键状态，整数型，, 功能键的状态 ' 输出组件坐标 调试输出 ('组件坐标：', 横向位置，',', 纵向位置) ' 转换为窗口坐标 .局部变量 窗口坐标，坐标 窗口坐标.x ＝ 横向位置 ＋ 图片框。左边 窗口坐标.y ＝ 纵向位置 ＋ 图片框。顶边 调试输出 ('窗口坐标：', 窗口坐标.x, ',', 窗口坐标.y) ' 转换为屏幕坐标 .局部变量 屏幕坐标，坐标 屏幕坐标.x ＝ 窗口坐标.x ＋ _启动窗口。左边 屏幕坐标.y ＝ 窗口坐标.y ＋ _启动窗口。顶边 调试输出 ('屏幕坐标：', 屏幕坐标.x, ',', 屏幕坐标.y)
在易语言中，我们可以使用组件的'锚定'和'停靠'属性来优化组件的布局，使程序在不同分辨率的屏幕上都能正常显示。
锚定属性可以设置组件的哪些边与窗口的边保持固定距离。例如：
停靠属性可以设置组件固定在窗口的某一侧（上、下、左、右、中）。例如：
在易语言中，我们可以通过'继承已有组件'的方法来创建自定义组件。例如，我们可以继承'图片框'组件，添加'图片缩放'和'图片旋转'的功能。
.版本 2 .组件高级图片框，图片框，, , , , , , , , , , .成员属性 缩放比例，双精度小数型，公开，, 图片的缩放比例，默认值为 1.0 .成员属性 旋转角度，整数型，公开，, 图片的旋转角度，默认值为 0（范围 0-360） .子程序 _高级图片框_属性被改变，, , , , , , , , , , 当组件的属性被改变时触发的事件 .参数 属性名称，文本型，, 被改变的属性名称 ' 判断属性名称是否是'缩放比例' .如果 (属性名称 ＝ '缩放比例') ' 重新显示图片（使用新的缩放比例） .如果真 (取字节集长度 (图片) ＞ 0) 图片 ＝ 图片_缩放 (图片，缩放比例，缩放比例) .如果真结束 .否则 .如果 (属性名称 ＝ '旋转角度') ' 重新显示图片（使用新的旋转角度） .如果真 (取字节集长度 (图片) ＞ 0) 图片 ＝ 图片_旋转 (图片，旋转角度) .如果真结束 .如果结束 .如果结束
.版本 2 .组件高级图片框，图片框，, , , , , , , , , , .成员事件 图片加载完成事件，, 公开，, 当图片加载完成时触发的事件 .成员事件 图片缩放完成事件，, 公开，, 当图片缩放完成时触发的事件 .成员事件 图片旋转完成事件，, 公开，, 当图片旋转完成时触发的事件 .子程序 _高级图片框_图片被改变，, , , , , , , , , , 当图片属性被改变时触发的事件 ' 触发图片加载完成事件 发送用户消息 (取窗口句柄 (), 取用户自定义事件 ('图片加载完成事件'), 0, 0)
.版本 2 .支持库 eGrid .子程序 初始化员工信息超级列表框_虚拟，, 公开 .参数 超级列表框组件，超级列表框，参考 .局部变量 数据库连接，对象 ' 精易模块的 MySQL 数据库连接对象 .局部变量 SQL 语句，文本型 .局部变量 查询结果集，对象 ' 精易模块的 MySQL 查询结果集对象 .局部变量 数据总条数，整数型 .局部变量 可见行数，整数型 ' 连接数据库（实际开发中应根据数据库配置修改） 数据库连接。创建 ('MySQL.Connect', 'localhost', 'root', '123456', '员工薪资管理系统') ' 计算数据总条数 SQL 语句 ＝ 'SELECT COUNT(*) FROM 员工信息表' 查询结果集 ＝ 数据库连接。执行查询 (SQL 语句) 数据总条数 ＝ 查询结果集。读整数 (1) ' 计算可见行数 可见行数 ＝ 取整 (超级列表框组件。高度 ÷ 25) ' 行高为 25 ' 初始化虚拟列表 初始化超级列表框_虚拟 (超级列表框组件，数据总条数，可见行数)
.版本 2 .支持库 eGrid .子程序 _员工信息超级列表框_获取虚拟数据，, 公开 .参数 表项索引数组，整数型，数组 .参数 列标题数组，文本型，数组 .参数 标题数组，文本型，数组 .局部变量 数据库连接，对象 .局部变量 SQL 语句，文本型 .局部变量 查询结果集，对象 .局部变量 索引，整数型 .局部变量 表项索引，整数型 ' 连接数据库（实际开发中应根据数据库配置修改） 数据库连接。创建 ('MySQL.Connect', 'localhost', 'root', '123456', '员工薪资管理系统') ' 遍历需要获取数据的表项索引 计次循环首 (取数组成员数 (表项索引数组), 索引) 表项索引 ＝ 表项索引数组 [索引] ' 查询指定表项索引的数据（MySQL 的 LIMIT 语句：LIMIT 起始索引，条数） SQL 语句 ＝ 'SELECT * FROM 员工信息表 LIMIT ' ＋ 到文本 (表项索引) ＋ ', 1' 查询结果集 ＝ 数据库连接。执行查询 (SQL 语句) ' 设置各列的标题 标题数组 [索引 － 1] [1] ＝ 查询结果集。读文本 ('员工编号') 标题数组 [索引 － 1] [2] ＝ 查询结果集。读文本 ('员工姓名') 标题数组 [索引 － 1] [3] ＝ 查询结果集。读文本 ('员工部门') 标题数组 [索引 － 1] [4] ＝ 查询结果集。读文本 ('员工职位') 标题数组 [索引 － 1] [5] ＝ '¥' ＋ 到文本 (取小数位 (查询结果集。读数值 ('基础薪资'), 2)) 标题数组 [索引 － 1] [6] ＝ '¥' ＋ 到文本 (取小数位 (查询结果集。读数值 ('总薪资'), 2)) 计次循环首结束
.版本 2 .支持库 eGrid .子程序 初始化员工编号组合框_自动完成，, 公开 .参数 组合框组件，组合框，参考 .局部变量 数据库连接，对象 .局部变量 SQL 语句，文本型 .局部变量 查询结果集，对象 .局部变量 员工编号数组，文本型，数组 ' 连接数据库（实际开发中应根据数据库配置修改） 数据库连接。创建 ('MySQL.Connect', 'localhost', 'root', '123456', '员工薪资管理系统') ' 查询所有员工编号 SQL 语句 ＝ 'SELECT 员工编号 FROM 员工信息表' 查询结果集 ＝ 数据库连接。执行查询 (SQL 语句) ' 将查询结果添加到员工编号数组中 .局部变量 索引，整数型 索引 ＝ 1 判断循环首 (查询结果集。是否到记录尾 () ＝ 假) 加入成员 (员工编号数组，查询结果集。读文本 ('员工编号')) 查询结果集。到下一条 () 索引 ＝ 索引 ＋ 1 判断循环尾 () ' 初始化自动完成组合框 初始化组合框_自动完成 (组合框组件，员工编号数组)
💡本章总结：本章主要介绍了易语言界面组件的高级应用，包括常用组件的高级属性与事件（超级列表框的虚拟列表、组合框的自动完成、树型框的节点操作、编辑框的正则表达式验证、图片框的图片处理）、组件事件的高级处理（组合键、鼠标坐标转换、滚轮事件）、组件布局的优化（锚定与停靠）、自定义组件的初步开发（继承、属性封装、事件封装），以及真实案例员工薪资管理系统的高级界面优化。 ⚠️注意事项：在使用虚拟列表时，要确保数据获取事件的处理速度足够快，否则会导致界面卡顿；在使用自定义组件时，要确保继承的基础组件的属性和事件的正确性；在使用锚定与停靠属性时，要注意组件的重叠和冲突问题。 ✅学习成果：通过本章的学习，读者已经掌握了易语言界面组件的高级应用，可以开发出界面美观、功能强大、性能高的易语言程序，并为后续学习数据库操作和面向对象编程（初步）奠定基础。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online