该文章工程是基于裸机情况下运行的LVGL，通过GUI-Guider-1.4.0进行页面布局配置。
一、介绍
GUI Guider是恩智浦为LVGL开发了一个上位机GUI设计工具，可以通过拖放控件的方式设计LVGL GUI页面，加速GUI的设计。设计完成的GUI页面可以在PC上仿真运行，确认设计完毕之后可以生成C代码，再整合到MCU项目中。
GUI Guider（Version: 1.3.0-GA）的主要特征：
支持Windows 10和Ubuntu 20.04。
支持中文、英文。
兼容LVGL V7和LVGL V8版本。
支持拖放的所见即所得(WYSIWYG)用户界面设计。
多种字体支持及第三方字体导入。
可定制的中文字符范围。
小部件对齐方式:左、中、右。
自动产生LVGL 的C语言源代码。
支持默认样式和自定义样式。
演示应用程序集成。
实时日志显示。
集成上位机仿真器。
注意！！GUI-Guider会依赖javaJDK,因此需要安装jdk.
接线：
二、安装
2.1安装Java-JDK
安装JDK，我使用的JDK见下图（如果你已经安装有JDK，则忽略这里。）
JDK安装我这里就不写了，外面很多大佬关于JDK的安装非常详细。
2.2安装GUI-Guider
下图为安装包。（我的电脑是64位 WIN10）
2.2.1 选择中文（简体）
2.2.2选择同意协议
2.2.3 选择安装路径
2.2.4等待安装完成
2.2.5安装完成
三、创建工程
使用的是立创梁山派的屏幕扩展板，4.3寸，高清的480*800分辨率加5点的电容触摸屏。
详情界面链接：立创·梁山派-屏幕扩展板
3.1选择创建新工程
打开软件后，创建新工程。
3.2选择LVGL版本
这里使用的是V8版本的LVGL。
3.3选择设备模板
3.4选择应用模板
这里选择了一个空白模板，如果感兴趣可以试一试官方的模板。
3.5工程配置
屏幕的像素是480x800，我这里选择的16位彩色，面板尺寸自定义为480x800（竖屏显示）。工程路径请务必放在英文路径
3.6创建完成
创建完成之后，就是这样啦。
四、常用组件的应用
4.1标签
点击标签然后拖拽到我们的显示界面上。
4.1.1标签属性设置
这里主要设置显示的文本内容，和字体。注意：你使用一个字体，它就会生成一个字库给你，所以请慎重考虑内存问题，或者将生成的字库保存至外部FLASH里。
4.2按钮
点击按钮然后拖拽到我们的显示界面上。
4.2.1按钮属性设置
4.2.2按钮事件添加
事件是按钮的灵魂，涉及到我们后继代码如何判断按键是否点击
事件配置里，如果不随便点一个动作，则软件不会生成按钮事件的C代码，所以我选择修改背景色。后面生成代码后再把这个动作的代码删除。
4.3图片
点击图片组件然后拖拽到我们的显示界面上。
4.3.1添加图片资源
点击我们拉出来的图片组件，在属性设置里，添加我们的图片资源。
在弹出的界面选择添加。
这里我选择了一张蓝牙的图标。
添加完成之后，选择这个图片。
这样就显示出来了。注意，每使用一张图片，都会生成C代码，注意内存问题，或保存至外部FLASH。
4.4生成第二个界面
返回之后，点击+号，生成第二个界面。
点击生成的第二个界面，就可以进行编辑了。
4.5图片按钮（界面切换）
这个图片按钮我们用来进行界面跳转。回到界面一，拉出图片按钮。
这里推荐一个图标网站，对大多数的图标都可以免费下载。
网站链接：iconfont-阿里巴巴矢量图标库
我下载了返回图标和前进图标。
将图片加载到我们的图片按钮
设置图片按钮的事件为界面切换事件
去到第二个界面，设置返回键。
在返回键添加界面切换事件，让其可以切换到第一个界面
五、进行模拟并生成代码
点击绿色按键，选择C。开始模拟运行。（会比较慢）
运行效果。视频效果见链接：
六、生成代码并且移植
点击生成代码
去到这个Demo工程目录下，找到生成的代码。
我之前创建工程时的路径
代码就在工程目录的generated和custom文件夹下。将两个文件夹复制到我们的GD32LVGL工程文件夹里。
将我们之前复制的文件夹替换GD32LVGL工程里之前的文件夹。
打开我们替换后的GD32LVGL工程。删除之前生成的代码。
添加我们配置的界面代码。
添加custom文件夹下的.c文件
添加generated文件夹下的.c文件。（界面和配置文件）
添加generated文件夹里的guider_fonts文件夹下的所有.c文件。（字库文件）
添加generated文件夹里的images文件夹下的所有.c文件。（图片资源文件）
最后是这样的。（注意我的字体和图片不一定和你一样，所以不一定是和我添加的文件是完全一样的）
添加完成后，编译。编译完成发现有错误。
错误主要是头文件错误。跳转到错误的地方
将原先错误的地方注释，换成我图片中的样子。
#include "../../lvgl.h"
重新编译，发现还有一个错误。这个错误是在events_init.c文件查找不到guider_ui。
guider_ui是在main.c中定义的一个全局变量，我是定义为ui，所以要将main.c的变量ui，通过extern连接至events_init.c文件。
连接至events_init.c文件后，需要将events_init.c文件里的所有guider_ui替换为ui。
替换操作见下图。
替换完成后，进行编译，没有错误。
七、下载验证
初始界面
按下按钮
界面切换
八、事件代码修改
这里只讲解btn_sw这个按钮的事件。
如果需要按钮按下时灯亮，再按时灯灭的效果，只需在事件中断里，添加即可。
最后注意事项
1、有一些组件的代码是不一样的，需要注意。（我发现时钟就不行）
2、当使用到事件时，需要给事件扫描一个心跳，即多少时间去扫描一次是否有事件发生。
我放在定时器里固定时间扫描一次。
代码百度网盘连接：
链接：https://pan.baidu.com/s/1Px2P43xuQtCciZlBzeJXOQ?pwd=1234
提取码：1234
3706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
