企业官网建设流程全解析

用aardio的customPlus库5分钟打造动态图标菜单

在桌面应用开发中，一个直观美观的导航菜单往往能大幅提升用户体验。aardio作为轻量级Windows桌面开发工具，通过customPlus库让开发者无需深入GDI+绘图细节，就能快速实现专业级的自绘UI组件。本文将手把手教你用5分钟构建一个支持悬停高亮、点击反馈的现代化图标菜单。

1. 环境准备与基础配置

首先确保已下载最新版aardio开发环境（当前版本35.72）。customPlus库需要配合paint库使用，将两个库文件放入lib/godking/目录：

lib/ └── godking/ ├── customPlus.aardio └── paint.aardio

基础窗体创建只需几行代码：

import win.ui; var winform = win.form(text="图标菜单演示"; right=400; bottom=600) winform.add( plus={cls="plus"; left=20; top=20; right=380; bottom=580; z=1} ) winform.show()

关键配置参数说明：

2. 菜单项模板设计

通过itemModel定义每个菜单项的可视元素，我们采用三层结构：

1. 背景层：圆角矩形底色
2. 图标层：FontAwesome矢量图标
3. 文本层：菜单标题文字

itemModel = { { // 背景层 type="rect", round=8, rectf={x=0; y=0; width=0; height=0}, fillcolor=0xFFF5F5F5, itemhoveredfillcolor=0xFFE3F2FD, itemselectedfillcolor=0xFFBBDEFB }, { // 图标层 name="icon", type="text", rectf={x=20; y=20; width=40; height=40}, font={name="FontAwesome"; point=24; color=0xFF2196F3}, itemhoveredfont={color=0xFF0D47A1} }, { // 文本层 name="title", type="text", rectf={x=80; y=25; width=-20; height=30}, font={name="微软雅黑"; point=14; color=0xFF424242}, itemhoveredfont={color=0xFF212121} } }

状态交互逻辑优先级（从高到低）：

1. 禁用状态（disabledXXX）
2. 选中状态（checkedXXX）
3. 元素悬停（hoveredXXX）
4. 项目选中（itemselectedXXX）
5. 项目悬停（itemhoveredXXX）
6. 默认状态

3. 动态菜单数据绑定

利用FontAwesome的600+免费图标，我们可以轻松创建专业级菜单：

import fonts.fontAwesome itemList = [ { icon="\uF015", // 首页图标 title="控制面板" }, { icon="\uF1C0", // 数据库图标 title="数据管理", disabled=true // 禁用状态示例 }, { icon="\uF013", // 齿轮图标 title="系统设置" }, { icon="\uF2B9", // 用户图标 title="账户中心" } ]

图标编码参考：

4. 交互事件处理

为菜单添加点击响应和动态更新能力：

var p = godking.customPlus(winform.plus, itemModel, itemList, { itemWidth=360, itemHeight=80, colnum=1, autoSizeCol=true }) p.onClick = function(itemIndex, elemIndex, elemID, elemName) { if(itemList[itemIndex].disabled) return // 取消之前选中项 for(i=1; #itemList; 1){ if itemList[i].checked { itemList[i].checked = false p.update(i) } } // 设置当前选中项 itemList[itemIndex].checked = true p.update(itemIndex) // 实际业务处理 winform.text = "已选择：" + itemList[itemIndex].title } // 动态添加菜单项 winform.add( btnAdd={cls="button"; text="添加项"; left=150; top=550; right=250; bottom=580; z=2} ) winform.btnAdd.oncommand = function(id, event) { table.push(itemList, { icon="\uF067", // 加号图标 title="新增功能" }) p.update() }

5. 高级效果优化

通过自定义绘制实现更复杂的视觉效果：

// 在itemModel中添加进度条元素 { name="progress", type="rect", rectf={x=20; y=65; width=-20; height=3}, progressdirection="left", progresscolor=0xFF4CAF50 } // 动态更新进度值 itemList[2].progress = 0.7 // 70%进度 p.update(2)

响应式布局技巧：

• 使用autoSizeWidth/Height自动适应容器尺寸
• 通过padLeft等参数控制边距
• colnum和rownum控制行列布局

最终效果特点：

• 矢量图标支持，高清显示
• 六种状态视觉反馈
• 平滑的悬停动画效果
• 完整的点击事件处理
• 动态增删菜单项
• 无障碍访问支持

开发过程中发现，将图标字体与状态管理结合，能极大减少图片资源依赖。实际项目中，建议将itemModel封装为独立模块方便复用。