适用对象LVGL 开发者嵌入式 GUI 开发者、智能设备UI界面设计师、嵌入式初学者。目录第一章 软件概览1.1 软件简介1.2 启动软件第二章 主页与导航2.1 主页布局2.2 左侧导航栏2.3 快捷操作区2.4 我的工程2.5 示例工程第三章 工程管理3.1 新建工程3.2 打开工程3.3 导入工程第四章 编辑器主界面4.1 编辑器布局总览4.2 应用菜单Logo 菜单4.3 顶部工具栏第五章 控件库与层级5.1 控件库面板5.2 添加控件到画布5.3 层级面板第六章 画布操作6.1 选择控件6.2 调整位置与大小6.3 对齐与排列第七章 属性面板7.1 属性面板概览7.2 屏幕属性7.3 控件通用属性7.4 样式设置第八章 事件面板8.1 事件概念8.2 添加事件8.3 动作类型一览第九章 动画面板9.1 动画面板概览9.2 创建并测试动画第十章 AI 智能修改10.1 AI 面板10.2 使用 AI 修改界面第十一章 资源管理11.1 打开资源管理11.2 图片资源11.3 字体资源第十二章 运行预览Run 模式12.1 启动运行12.2 运行控制第十三章 导出功能13.1 导出菜单13.2 导出 UI 文件13.3 创建模板工程第十四章 工程设置第十五章 软件设置15.1 通用设置15.2 快捷键15.3 外部 AI 配置15.4 内置 AI 配置第十六章 工具箱16.1 进入工具页16.2 字体转换工具16.3 图片转换工具附录 常用快捷键速查表第一章 软件概览1.1 软件简介AiDoGUI Designer 是一款面向 LVGLLight and Versatile Graphics Library的专业可视化界面设计软件。它让嵌入式 GUI 开发从手写 C 代码升级为拖拽式设计 一键导出主要面向智能手表、车载仪表、智能家居中控、医疗监护、充电桩、工业控制等带屏嵌入式设备。核心能力拖拽式设计通过控件库把按钮、图片、滑块、图表等控件拖到画布上搭建界面。实时预览内置 WASM 运行时无需烧录硬件即可在软件内运行界面并验证交互。AI 生成 UI通过自然语言描述让 AI 直接修改当前画布上的界面。一键导出将设计好的界面导出为 LVGL C 代码或完整的模板工程。1.2 启动软件安装完成后双击桌面图标或从开始菜单启动AiDoGUI Designer。首次启动会显示主页软件已内置一个可立即体验的示例工程Smartwatch 智能手表界面。第二章 主页与导航2.1 主页布局启动软件后进入主页。主页由以下几个区域组成自左至右、自上而下左侧导航栏主页 / 工程 / 资源 / 设置四个入口。欢迎区显示欢迎语和产品标语让每一个智能设备拥有更好的界面。快捷操作区新建工程 / 打开工程 / 导入工程三个大按钮。我的工程显示最近打开过的工程卡片列表。示例工程内置示例工程当前仅 Smartwatch 可直接使用。2.2 左侧导航栏左侧导航栏固定显示四个入口入口说明主页回到当前页面进行工程管理。工程进入编辑器进行界面设计需要先打开或新建一个工程。资源管理图片、字体等资源需进入工程后使用。设置打开软件设置对话框配置语言、主题、AI 等。操作步骤鼠标移到左侧导航栏的某一项。单击即可切换到对应视图。2.3 快捷操作区快捷操作区位于欢迎区右侧包含三个大按钮新建工程弹出新建工程对话框从零开始创建一个工程。打开工程弹出系统文件选择框选择已有的.aid工程文件打开。导入工程可导入 SquareLine 工程旁边还有 Figma 导入入口。操作步骤以打开工程为例在主页点击打开工程按钮。在弹出的文件选择框中定位到.aid工程文件。选中后点击打开软件加载工程并自动进入编辑器。2.4 我的工程我的工程区域以卡片形式列出最近打开过的工程每张卡片显示工程名、路径与缩略预览。右键卡片可弹出菜单在文件管理器中显示、修改工程、复制工程、从我的工程中移除。列表为空时显示还没有最近打开的工程。点击右上角查看更多可展开完整列表点击清空我的工程仅清空首页记录不会删除工程文件。操作步骤复制一个工程在我的工程中找到要复制的工程卡片。右键该卡片选择复制工程。在弹出的对话框中输入新名称与位置点击确认软件会创建一份工程副本。2.5 示例工程示例工程区域列出了 9 个内置示例位置智能手表、车载仪表盘、智能家居中控、医疗监护仪、新能源充电桩、数字音频调音台、工业控制面板、桌面气象站、零售收银终端、智能恒温器但当前仅Smartwatch智能手表标记为可用其余标记为开源待后续提供。操作步骤打开 Smartwatch 示例在示例工程区域找到 Smartwatch 卡片。单击该卡片。软件加载示例工程并自动进入编辑器。第三章 工程管理3.1 新建工程操作步骤在主页点击新建工程按钮弹出新建工程对话框。填写以下信息字段说明示例工程名称以英文字母开头只能包含字母、数字、下划线Smart_Dashboard保存位置工程文件的保存目录点击选择保存位置按钮选择宽度 / 高度屏幕分辨率像素例如392 × 392颜色深度8 / 16 / 32 位色深一般选 16 或 32LVGL 版本8.x 或 9.x 系列选与目标固件一致的版本图片导出方式C 数组 或 BIN 文件资源紧张选 C 数组字体导出方式C 数组 或 BIN 文件同上点击创建工程按钮软件创建工程并自动进入编辑器。⚠️ 工程名称不符合规则时输入框下方会显示红色提示创建工程按钮会被禁用。3.2 打开工程操作步骤在主页点击打开工程按钮。在系统文件选择框中定位到.aid工程文件旧版 v2.aiui工程也支持。点击打开软件加载工程并进入编辑器。 也可以从我的工程卡片直接双击打开最近工程。3.3 导入工程AiDoGUI Designer 支持从其他设计工具导入工程继续编辑SquareLine 导入点击导入工程按钮选择 SquareLine 工程文件即可转换。Figma 导入在导入按钮旁有 Figma 入口可把 Figma 设计稿转换为工程。第四章 编辑器主界面4.1 编辑器布局总览打开或新建工程后软件进入编辑器。编辑器由以下区域组成顶部工具栏撤销/重做、选择/手形工具、资源管理、屏幕排列、对齐、运行、导出、AI 设计、设置等。左侧面板层级、控件库两个标签页。中央画布显示当前屏幕的设计内容所见即所得。右侧面板属性、事件、动画、AI 四个标签页。应用菜单Logo 菜单左上角 Logo 按钮包含返回主页、保存、导出、工程设置等。 首次进入编辑器时画布会显示LVGL 运行时加载中等待几秒后即可正常编辑。4.2 应用菜单Logo 菜单点击左上角 Logo 按钮可打开应用菜单包含以下条目菜单项说明返回主页回到主页若有未保存修改会提示保存。保存保存当前工程。另存为把当前工程另存为新文件。导出 UI 文件进入导出向导导出 LVGL C 代码。导出工程模板创建一个完整的模板工程。新手引导重看主页或编辑器引导。主题切换浅色/深色主题。工程设置打开工程设置对话框。语言切换界面语言中文/英文。操作步骤保存工程点击左上角 Logo 按钮。在弹出菜单中点击保存。软件将当前工程写入.aid文件。4.3 顶部工具栏顶部工具栏从左到右依次为图标名称作用撤销 / 重做撤销、重做回退或恢复上一步操作选择工具V选择单击选中画布控件手形工具H手形拖动画布视图资源管理资源打开资源管理对话框屏幕排列单行 / 多行切换多屏幕的排列方式对齐工具左/右/上/下/水平居中/垂直居中/水平等距/垂直等距多选控件后对齐运行运行进入 Run 模式实时预览导出导出打开导出下拉菜单AI 设计AI 设计选择外部 AI 工具设置齿轮设置打开软件设置对话框 录课提示本章按 4.1 → 4.2 → 4.3 顺序展示。4.2 务必点开 Logo 菜单截图4.3 逐个图标指认并停留。第五章 控件库与层级5.1 控件库面板点击左侧面板的控件库标签页可打开控件库。控件按 4 大类组织分类包含控件举例基础圆弧、动画图片、进度条、按钮、图片、标签、LED 指示灯、线条、面板、加载器 等输入矩阵按钮、复选框、下拉框、键盘、滚轮选择器、滑块、数字输入框、开关、文本框 等可视化日历、画布、图表、颜色盘、列表、Lottie 动画、菜单、消息框、仪表、二维码、刻度、表格 等容器容器、标签页、标签视图、平铺视图、窗口、屏幕 等每个控件卡片显示控件的中文名称和类型英文标识如圆弧 Arc。5.2 添加控件到画布操作步骤切换到控件库标签页。在分类列表中找到需要的控件例如基础 → 按钮。把鼠标按住控件卡片拖拽到中央画布的目标位置。松开鼠标控件即被添加到画布并自动选中。 也可以在控件卡片上双击控件会被添加到画布默认位置。5.3 层级面板点击左侧层级标签页可打开控件树。控件树以树状结构显示当前屏幕中所有控件的层级关系。功能说明搜索控件顶部搜索框可按名称过滤控件。仅显示有事件的控件开关可过滤出已配置事件的控件。右键控件弹出菜单复制复制一个相同控件。拷贝拷贝控件到剪贴板。粘贴 / 粘贴为子控件把剪贴板控件粘贴为同级或子级。删除删除该控件。每个控件行末的图标锁形图标锁定/解锁位置锁定后画布上无法拖动。眼睛图标显示/隐藏控件。更多操作⋯弹出与右键相同的菜单。操作步骤调整控件层级在控件树中按住一个控件。拖动到目标父控件上目标父控件高亮。松开鼠标该控件即成为目标父控件的子控件层级树自动更新。第六章 画布操作6.1 选择控件操作步骤在顶部工具栏点击选择工具快捷键V。在画布上单击目标控件控件被选中并显示选中框与 8 个调整手柄。按住Shift单击其他控件可多选。单击画布空白处取消选择。6.2 调整位置与大小操作步骤选中一个控件。拖动控件本体可移动位置。拖动选中框四角或四边的手柄可调整大小。也可在右侧属性面板中直接输入 X、Y、宽、高的数值精确调整。 按住Shift拖动手柄可等比缩放。6.3 对齐与排列多选控件后可使用顶部工具栏的对齐按钮快速对齐左对齐 / 右对齐 / 上对齐 / 下对齐水平居中 / 垂直居中水平等距分布 / 垂直等距分布操作步骤按住Shift在画布上多选 3 个以上控件。点击工具栏水平等距分布按钮控件在水平方向上等间距排列。第七章 属性面板7.1 属性面板概览点击右侧属性标签页打开属性面板。属性面板会根据当前选中对象动态变化未选中任何对象时显示未选中任何页面或控件。选中屏幕时显示屏幕属性。选中控件时显示控件属性。7.2 屏幕属性选中屏幕后属性面板显示以下分组分组字段基本信息名称、宽度px、高度px背景颜色透明度、渐变方向、渐变颜色、主色停止点、渐变停止点、背景图片、背景图片透明度、背景图片重染色⚠️ 屏幕宽高由工程设置决定不能在属性面板直接修改需通过工程设置修改。7.3 控件通用属性选中控件后属性面板通常包含以下分区分组主要字段控件名称名称修改后 ID 自动更新为屏幕ID_名称位置信息X、Y 坐标位置变换Transform缩放、旋转、平移等布局Layout布局类型无/Flex/Grid、方向、主轴对齐、交叉轴对齐、换行、反向 等宽 / 高宽、高、自适应内容专有属性随控件类型变化如按钮的文字、图片的源、滑块的范围对齐对齐方式、偏移 X、偏移 Y标志位Flags隐藏、可点击、可聚焦、可滚动 等滚动Scrolling滚动条模式、滚动方向、滚动吸附状态States选中、按下、禁用、聚焦 等样式设置Styles按状态分别设置文字、背景、边框、阴影、圆角等样式操作步骤修改按钮文字在画布选中一个按钮控件。在属性面板的专有属性分组找到文本字段。把默认文字改成确定按Enter画布上的按钮文字立即更新。7.4 样式设置样式设置分区可按状态默认、按下、选中、禁用等分别设置文字字体、颜色、对齐、间距。背景背景色、透明度、渐变。边框宽度、颜色、边侧。阴影宽度、颜色、偏移。圆角圆角弧度。操作步骤给按钮加圆角和按下背景色选中按钮控件。在样式设置顶部状态切换器选默认状态。把圆角弧度设为10。切到按下状态。把背景色改为深灰色。顶部工具栏点击运行预览按下按钮即可看到样式变化。 录课提示属性面板是用户用得最多的面板7.3 必须详细演示一个完整示例建议用按钮文字 圆角7.4 演示状态切换。第八章 事件面板8.1 事件概念在 LVGL 中事件 触发条件 动作。例如按下按钮触发→切换到 Screen 2动作。AiDoGUI Designer 把事件配置可视化无需手写回调。8.2 添加事件操作步骤选中一个控件如按钮。切换到右侧事件标签页。点击添加事件按钮弹出事件编辑对话框。在对话框中设置事件类型例如Clicked点击。动作类型例如切换屏幕。动作参数选择目标页面 / 目标控件 / 属性值等。动画类型可选无动画或滑入/滑出/淡入淡出/放大缩小/弹跳等。动画起始时间毫秒、动画延迟时间毫秒。描述可选。点击确定保存事件。 屏幕事件功能暂未开放事件必须挂载在控件上。8.3 动作类型一览AiDoGUI Designer 支持的动作类型动作说明切换屏幕跳转到指定目标页面可带过渡动画删除屏幕删除指定屏幕设置属性修改目标控件的指定属性值调用函数调用自定义 C 函数需填函数名增加弧度让目标圆弧控件值增加增加进度条值让目标进度条值增加增加滑块值让目标滑块值增加设置键盘目标为键盘控件设置输入目标控件修改标志位添加/移除/切换 LVGL 标志修改状态值添加/移除/切换 LVGL 状态移动光标移动文本框光标设置透明度修改目标控件透明度播放动画播放指定动画需填动画 ID从弧形设置文本把弧形值写入目标标签文本从滑块设置文本把滑块值写入目标标签文本选中时设置文本复选框选中时设置文本步进数字输入框让 Spinbox 增加或减少切换主题切换到指定主题 ID切换语言切换界面语言 录课提示8.2 务必完整演示一个按钮点击切换屏幕的例子这是新手最常问的场景。8.3 用表格速读即可。第九章 动画面板9.1 动画面板概览切换到右侧动画标签页打开动画面板。动画面板用于为控件创建可复用的属性动画例如让一个图片从透明渐变到不透明。主要功能添加新动画创建一个动画并命名。管理动画在下拉框中切换当前控件的多个动画。重命名修改动画名称。添加属性为动画添加要变化的属性如透明度、X 坐标、宽度等。删除属性移除动画中的某条属性。播放 / 停止在编辑器中实时预览动画效果。删除动画删除当前动画。9.2 创建并测试动画操作步骤让一张图片淡入在画布选中一张图片。切换到动画标签页点击添加新动画命名为fade_in。点击添加属性选择Opacity透明度。设置起始值0、结束值255、时长500ms。点击播放动画按钮画布上的图片会从透明渐变到完全显示。点击停止动画结束预览。 录课提示9.2 完整演示一个淡入动画能让学员直观感受动画价值。第十章 AI 智能修改10.1 AI 面板切换到右侧AI标签页打开 AI 面板。AiDoGUI Designer 内置 AI 能力可基于自然语言直接修改当前画布的界面。AI 操作过程中面板顶部会显示反馈信息AI 智能分析中...AI 正在理解你的需求。AI 正在修改界面...AI 正在改动画布。AI 修改完成修改已应用可查看效果。AI 操作失败修改失败可重试或调整描述。10.2 使用 AI 修改界面操作步骤在画布上选中要修改的控件或选中屏幕让 AI 整体调整。切换到AI标签页。在输入框中用自然语言描述需求例如把当前按钮改成圆角 20背景色用蓝色文字改成 OK。点击发送等待 AI 反馈。完成后查看画布效果不满意可继续追加描述或撤销。⚠️ AI 修改依赖软件设置中的 AI 配置见第十五章。首次使用前请先在软件设置 → 内置 AI 配置中完成配置。第十一章 资源管理11.1 打开资源管理操作步骤在顶部工具栏点击资源管理图标图片图标。弹出资源管理对话框默认显示图片资源标签页。11.2 图片资源图片标签页用于管理工程中用到的所有图片导入图片点击导入按钮从本地选择 PNG/JPG 等图片添加到工程。图片列表以缩略图网格显示所有已导入图片下方显示文件名与尺寸。预览/删除点击图片可预览大图右下角按钮可删除。使用在控件属性如图片控件的源中可从下拉框选用已导入的图片。11.3 字体资源点击对话框顶部字体标签页切换到字体资源管理。主要功能添加字体导入本地 TTF/OTF 字体文件。字体配置设置字号、字符范围如仅中文、仅数字、ASCII 等、是否加粗。使用在控件样式文字 → 字体中选用已添加的字体。第十二章 运行预览Run 模式12.1 启动运行操作步骤在顶部工具栏点击运行按钮或按F5。软件加载 WASM 运行时画布切换为运行态。加载完成后即可在画布上点击控件、触发事件、查看动画效果。 运行模式下画布左上角会显示实时 FPS帧率可用于评估性能。12.2 运行控制运行模式顶部提供以下控制按钮按钮说明快捷键停止退出运行模式ShiftF5重启重新加载并运行CtrlShiftF5调试打开调试面板日志、导航栈F12关闭关闭运行模式Esc调试面板可查看控制台日志LVGL 运行时输出的日志可清空、自动滚动。导航栈屏幕跳转的历史记录显示当前屏幕。操作步骤调试一个屏幕跳转运行工程。点击一个配置了切换屏幕事件的按钮。按F12打开调试面板在导航栈中可看到跳转记录。按Esc退出运行模式。 录课提示12.1 启动运行后让 FPS 显示出来再截图。12.2 必须演示 F12 调试面板。第十三章 导出功能13.1 导出菜单操作步骤在顶部工具栏点击导出按钮向下箭头。弹出导出下拉菜单包含两项导出 UI 文件导出 LVGL C 代码。创建模板工程生成完整的模板工程结构。13.2 导出 UI 文件操作步骤点击导出→导出 UI 文件。在弹出的选择代码输出目录对话框中选择一个本地目录。点击选择文件夹确认。软件进入导出向导按提示选择导出选项如是否包含字体、图片资源等。点击导出等待进度完成。导出完成后到目标目录即可看到生成的ui.c、ui.h、ui.h等文件以及资源文件夹。⚠️ 导出过程依赖 LVGL 转换库与 WASM 资源首次导出可能较慢请耐心等待。13.3 创建模板工程操作步骤点击导出→创建模板工程。在弹出的对话框中选择模板类型、输出目录等。点击创建软件生成一个完整的 LVGL 工程模板可直接用 IDE 打开编译。第十四章 工程设置工程设置用于修改已创建工程的属性。打开方式方法一点击左上角 Logo → 工程设置。方法二在主页右键工程卡片 → 修改工程会修改工程本身的名称/位置。可配置项字段说明工程名称修改工程名需符合命名规则工程描述最多 120 字符含标点宽度 / 高度修改屏幕分辨率颜色深度8 / 16 / 32 位LVGL 版本切换 LVGL 版本需与色深匹配图片导出方式C 数组 / BIN 文件BIN 方式需填图片 BIN 根路径字体导出方式C 数组 / BIN 文件BIN 方式需填字体 BIN 根路径偏移 / 圆角弧度必须为整数圆角不能小于 0操作步骤修改分辨率打开工程设置。把宽度改成480、高度改成320。点击保存画布尺寸立即更新。⚠️ 保存失败时会在底部提示工程设置保存失败请检查路径或权限。第十五章 软件设置点击顶部工具栏右侧的齿轮图标打开软件设置对话框。左侧导航包含四个分类通用、快捷键、外部 AI 配置、内置 AI 配置。15.1 通用设置通用页可配置界面语言中文 / English。主题浅色 / 深色。15.2 快捷键快捷键页列出软件所有快捷键按功能分组显示方便查阅。常用快捷键见附录。15.3 外部 AI 配置外部 AI 配置页用于配置外部 AI 设计工具的接入例如把 Figma、Cursor 等外部 AI 工具接入到 AiDoGUI Designer 的AI 设计菜单中。15.4 内置 AI 配置内置 AI 配置页用于配置软件内置 AI 能力即第十章 AI 面板所使用的 AI。⚠️ 使用第十章 AI 修改功能前请先在此页完成配置。第十六章 工具箱16.1 进入工具页操作步骤在主页左侧导航点击工具或通过主页底部入口。进入工具页顶部有两个标签页字体转换、图片转换。16.2 字体转换工具字体转换工具用于把 TTF/OTF 字体转换为 LVGL 可用的 C 数组字体文件。操作步骤切换到字体转换标签页。上传本地字体文件TTF/OTF。配置字号、字符范围如仅 ASCII、仅数字、包含中文等、是否加粗。点击转换等待进度完成。转换完成后下载或直接导入到当前工程的字体资源中。16.3 图片转换工具图片转换工具用于把 PNG/JPG 图片转换为 LVGL 可用的 C 数组或 BIN 文件。操作步骤切换到图片转换标签页。上传本地图片。选择输出格式C 数组 / BIN、色深与工程一致。点击转换等待进度完成。转换完成后下载或直接导入到当前工程。附录 常用快捷键速查表快捷键功能V选择工具H手形工具Ctrl Z撤销Ctrl Y重做Ctrl S保存工程F5运行进入 Run 模式Shift F5停止运行Ctrl Shift F5重启运行F12打开调试面板Esc关闭运行模式 / 关闭对话框Shift 点击多选控件Delete删除选中控件教程完。如需查阅更详细的技术说明请参阅软件内置的新手引导应用菜单 → 新手引导。