从零到一RK3568开发板LVGL界面开发全流程实战1. 环境准备与工具链配置在开始LVGL界面开发之前我们需要搭建一个稳定的开发环境。对于RK3568开发板来说推荐使用Ubuntu 20.04 LTS作为开发主机系统这个版本在ARM架构兼容性和工具链支持方面表现最为稳定。必备工具清单Ubuntu 20.04 LTS虚拟机VMware或VirtualBoxRK3568官方提供的交叉编译工具链GUI Guider 9.2官方最新图形化设计工具VSCode代码编辑器CMake 3.10及以上版本安装交叉编译工具链的具体步骤如下# 下载RK3568官方工具链 wget https://repo.rock-chips.com/rk3568/toolchain/gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf.tar.xz # 解压到/opt目录 sudo tar -xvf gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf.tar.xz -C /opt # 配置环境变量 echo export PATH/opt/gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf/bin:$PATH ~/.bashrc source ~/.bashrc验证工具链是否安装成功arm-linux-gnueabihf-gcc --version注意如果遇到权限问题可能需要使用chmod命令为工具链目录添加执行权限。建议在虚拟机中开发避免污染主机环境。2. GUI Guider项目创建与配置GUI Guider作为LVGL的官方可视化设计工具能大幅降低UI开发门槛。启动GUI Guider 9.2后按照以下步骤创建新项目选择New Project设置项目名称为MyFirstLVGL选择目标设备为Custom显示分辨率设置为与RK3568开发板匹配的参数常见为800x480颜色深度选择16位RGB565与大多数开发板兼容性最佳设计第一个界面从左侧组件库拖拽一个Button控件到画布在属性面板修改文本为Hello RK3568添加一个Label控件设置ID为status_label为按钮添加点击事件回调函数// 自动生成的事件处理代码示例 static void btn_event_handler(lv_event_t *e) { lv_obj_t *label lv_event_get_user_data(e); lv_label_set_text(label, Button Clicked!); }保存项目后GUI Guider会生成两个关键目录generated包含自动生成的UI布局和资源文件custom存放用户自定义的事件处理代码提示在项目属性中启用Auto-generate UI Files选项这样每次保存时都会自动更新生成的代码。3. LVGL工程结构与移植策略将GUI Guider项目移植到RK3568开发板需要理解LVGL的项目结构。以下是典型的目录组织方式MyFirstLVGL/ ├── lvgl/ # LVGL核心库 ├── generated/ # GUI Guider自动生成的UI代码 ├── custom/ # 用户自定义逻辑代码 ├── drivers/ # 显示和输入驱动 ├── CMakeLists.txt # 构建配置文件 └── main.c # 应用入口文件关键移植步骤从Gitee下载与GUI Guider匹配的LVGL版本本例为v9.2.1复制generated和custom目录到工程文件夹重命名lv_conf_template.h为lv_conf.h并放置在与lvgl目录同级的位置修改lv_conf.h中的基本配置#define LV_COLOR_DEPTH 16 // 匹配GUI Guider设置 #define LV_USE_LOG 1 // 启用日志 #define LV_USE_ASSERT_NULL 1 // 启用空指针检查配置帧缓冲和输入设备/* lv_conf.h 中需要启用的关键宏 */ #define LV_USE_LINUX_FBDEV 1 #define LV_USE_EVDEV 1 #define LV_USE_PERF_MONITOR 1 // 性能监控调试用4. CMake构建系统详解针对RK3568开发板的CMake配置需要特别注意交叉编译的设置。以下是一个完整的CMakeLists.txt示例cmake_minimum_required(VERSION 3.10) set(CMAKE_SYSTEM_NAME Linux) set(CMAKE_SYSTEM_PROCESSOR arm) # 交叉编译器设置 set(CMAKE_C_COMPILER arm-linux-gnueabihf-gcc) set(CMAKE_CXX_COMPILER arm-linux-gnueabihf-g) project(LVGL_RK3568_Demo) set(CMAKE_C_STANDARD 99) # 输出目录设置 set(EXECUTABLE_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/bin) # 添加LVGL子项目 add_subdirectory(lvgl) # 头文件搜索路径 include_directories( ${PROJECT_SOURCE_DIR} ${PROJECT_SOURCE_DIR}/lvgl ${PROJECT_SOURCE_DIR}/custom ${PROJECT_SOURCE_DIR}/generated ) # 收集源文件 file(GLOB_RECURSE CUSTOM_SOURCES ${PROJECT_SOURCE_DIR}/custom/*.c) file(GLOB_RECURSE GENERATED_SOURCES ${PROJECT_SOURCE_DIR}/generated/*.c) # 驱动源文件 set(DRIVER_SOURCES ${PROJECT_SOURCE_DIR}/lvgl/src/drivers/display/fb/lv_linux_fbdev.c ${PROJECT_SOURCE_DIR}/lvgl/src/drivers/evdev/lv_evdev.c ) # 创建可执行文件 add_executable(lvgl_demo main.c ${CUSTOM_SOURCES} ${GENERATED_SOURCES} ${DRIVER_SOURCES} ) # 链接库 target_link_libraries(lvgl_demo PRIVATE lvgl lvgl::thorvg m dl pthread )注意RK3568开发板可能需要额外的链接库如libdrm等具体取决于显示输出方式。5. 主程序框架与硬件适配main.c文件是连接LVGL框架与硬件平台的关键。以下是针对RK3568的典型实现#include lvgl/lvgl.h #include gui_guider.h #include events_init.h #include custom.h #include lvgl/src/drivers/display/fb/lv_linux_fbdev.h #include lvgl/src/drivers/evdev/lv_evdev.h lv_ui guider_ui; // GUI Guider生成的UI实例 // 帧缓冲设备配置 #define FB_DEVICE /dev/fb0 // 输入设备配置需根据实际设备节点调整 #define INPUT_DEVICE /dev/input/event2 int main(int argc, char **argv) { // 初始化LVGL核心 lv_init(); // 设置显示设备 lv_display_t *disp lv_linux_fbdev_create(); lv_linux_fbdev_set_file(disp, FB_DEVICE); lv_display_set_default(disp); // 设置输入设备 lv_indev_t *indev lv_evdev_create(LV_INDEV_TYPE_POINTER, INPUT_DEVICE); if(indev NULL) { printf(Failed to create input device!\n); return -1; } // 初始化UI setup_ui(guider_ui); events_init(guider_ui); custom_init(guider_ui); // 主循环 while(1) { lv_timer_handler_run_in_period(5); // 5ms处理周期 usleep(5000); // 降低CPU占用 } return 0; }硬件适配要点确认/dev/fb0设备节点存在且有读写权限通过cat /proc/bus/input/devices命令确定正确的输入设备节点如果使用HDMI输出可能需要配置DRM显示驱动而非帧缓冲6. 编译与部署实战完成代码编写后按照以下步骤进行交叉编译# 创建构建目录 mkdir build cd build # 生成Makefile cmake -DCMAKE_BUILD_TYPERelease .. # 开始编译 make -j$(nproc)编译成功后会在bin目录下生成可执行文件lvgl_demo。将其部署到开发板的步骤通过ADB或SCP将可执行文件传输到开发板确保开发板上有执行权限设置必要的环境变量如LD_LIBRARY_PATH# 部署示例 scp bin/lvgl_demo root192.168.1.100:/home/root ssh root192.168.1.100 chmod x /home/root/lvgl_demo # 在开发板上运行 ./lvgl_demo常见问题排查问题现象可能原因解决方案白屏无显示帧缓冲设备未正确配置检查/dev/fb0权限确认显示驱动加载触摸无响应输入设备节点错误通过evtest工具测试输入设备段错误内存不足或权限问题增加swap空间检查交叉编译器版本颜色异常色深配置不匹配确保GUI Guider、lv_conf.h和硬件三者色深一致7. 进阶调试与优化技巧当基础功能正常运行后可以考虑以下优化措施性能监控 在lv_conf.h中启用性能统计#define LV_USE_PERF_MONITOR 1 #define LV_USE_MEM_MONITOR 1内存优化配置// lv_conf.h 关键参数 #define LV_MEM_SIZE (128 * 1024) // 根据开发板RAM调整 #define LV_DISP_DEF_REFR_PERIOD 30 // 默认刷新周期(ms) #define LV_IMG_CACHE_DEF_SIZE 16 // 图片缓存数量双缓冲配置// 在main.c中创建显示设备时添加 lv_display_set_buffers(disp, buf1, buf2, buf_size, LV_DISPLAY_RENDER_MODE_DIRECT);输入设备校准 如果触摸坐标不准确可以通过以下命令校准# 在开发板上执行 ts_calibrate日志调试 实现LVGL日志回调void my_log_cb(const char *buf) { printf([LVGL] %s, buf); } // 在main()中注册 lv_log_register_print_cb(my_log_cb);8. 项目迭代与维护当需要更新UI设计时遵循以下工作流程在GUI Guider中修改设计并保存复制新的generated和custom目录到工程清理并重新编译cd build rm -rf * cmake .. make部署到开发板测试版本控制建议将lvgl目录设为git子模块忽略build和bin目录为不同开发板创建分支# 典型的.gitignore配置 build/ bin/ *.swp *.bak持续集成思路 可以编写自动化脚本完成以下流程检测GUI Guider项目变更自动替换工程文件触发交叉编译通过ADB自动部署到连接的开发板运行基础功能测试
保姆级教程：在RK3568开发板上跑通你的第一个LVGL界面（基于GUI Guider 9.2）
发布时间：2026/6/13 22:20:00
从零到一RK3568开发板LVGL界面开发全流程实战1. 环境准备与工具链配置在开始LVGL界面开发之前我们需要搭建一个稳定的开发环境。对于RK3568开发板来说推荐使用Ubuntu 20.04 LTS作为开发主机系统这个版本在ARM架构兼容性和工具链支持方面表现最为稳定。必备工具清单Ubuntu 20.04 LTS虚拟机VMware或VirtualBoxRK3568官方提供的交叉编译工具链GUI Guider 9.2官方最新图形化设计工具VSCode代码编辑器CMake 3.10及以上版本安装交叉编译工具链的具体步骤如下# 下载RK3568官方工具链 wget https://repo.rock-chips.com/rk3568/toolchain/gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf.tar.xz # 解压到/opt目录 sudo tar -xvf gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf.tar.xz -C /opt # 配置环境变量 echo export PATH/opt/gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf/bin:$PATH ~/.bashrc source ~/.bashrc验证工具链是否安装成功arm-linux-gnueabihf-gcc --version注意如果遇到权限问题可能需要使用chmod命令为工具链目录添加执行权限。建议在虚拟机中开发避免污染主机环境。2. GUI Guider项目创建与配置GUI Guider作为LVGL的官方可视化设计工具能大幅降低UI开发门槛。启动GUI Guider 9.2后按照以下步骤创建新项目选择New Project设置项目名称为MyFirstLVGL选择目标设备为Custom显示分辨率设置为与RK3568开发板匹配的参数常见为800x480颜色深度选择16位RGB565与大多数开发板兼容性最佳设计第一个界面从左侧组件库拖拽一个Button控件到画布在属性面板修改文本为Hello RK3568添加一个Label控件设置ID为status_label为按钮添加点击事件回调函数// 自动生成的事件处理代码示例 static void btn_event_handler(lv_event_t *e) { lv_obj_t *label lv_event_get_user_data(e); lv_label_set_text(label, Button Clicked!); }保存项目后GUI Guider会生成两个关键目录generated包含自动生成的UI布局和资源文件custom存放用户自定义的事件处理代码提示在项目属性中启用Auto-generate UI Files选项这样每次保存时都会自动更新生成的代码。3. LVGL工程结构与移植策略将GUI Guider项目移植到RK3568开发板需要理解LVGL的项目结构。以下是典型的目录组织方式MyFirstLVGL/ ├── lvgl/ # LVGL核心库 ├── generated/ # GUI Guider自动生成的UI代码 ├── custom/ # 用户自定义逻辑代码 ├── drivers/ # 显示和输入驱动 ├── CMakeLists.txt # 构建配置文件 └── main.c # 应用入口文件关键移植步骤从Gitee下载与GUI Guider匹配的LVGL版本本例为v9.2.1复制generated和custom目录到工程文件夹重命名lv_conf_template.h为lv_conf.h并放置在与lvgl目录同级的位置修改lv_conf.h中的基本配置#define LV_COLOR_DEPTH 16 // 匹配GUI Guider设置 #define LV_USE_LOG 1 // 启用日志 #define LV_USE_ASSERT_NULL 1 // 启用空指针检查配置帧缓冲和输入设备/* lv_conf.h 中需要启用的关键宏 */ #define LV_USE_LINUX_FBDEV 1 #define LV_USE_EVDEV 1 #define LV_USE_PERF_MONITOR 1 // 性能监控调试用4. CMake构建系统详解针对RK3568开发板的CMake配置需要特别注意交叉编译的设置。以下是一个完整的CMakeLists.txt示例cmake_minimum_required(VERSION 3.10) set(CMAKE_SYSTEM_NAME Linux) set(CMAKE_SYSTEM_PROCESSOR arm) # 交叉编译器设置 set(CMAKE_C_COMPILER arm-linux-gnueabihf-gcc) set(CMAKE_CXX_COMPILER arm-linux-gnueabihf-g) project(LVGL_RK3568_Demo) set(CMAKE_C_STANDARD 99) # 输出目录设置 set(EXECUTABLE_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/bin) # 添加LVGL子项目 add_subdirectory(lvgl) # 头文件搜索路径 include_directories( ${PROJECT_SOURCE_DIR} ${PROJECT_SOURCE_DIR}/lvgl ${PROJECT_SOURCE_DIR}/custom ${PROJECT_SOURCE_DIR}/generated ) # 收集源文件 file(GLOB_RECURSE CUSTOM_SOURCES ${PROJECT_SOURCE_DIR}/custom/*.c) file(GLOB_RECURSE GENERATED_SOURCES ${PROJECT_SOURCE_DIR}/generated/*.c) # 驱动源文件 set(DRIVER_SOURCES ${PROJECT_SOURCE_DIR}/lvgl/src/drivers/display/fb/lv_linux_fbdev.c ${PROJECT_SOURCE_DIR}/lvgl/src/drivers/evdev/lv_evdev.c ) # 创建可执行文件 add_executable(lvgl_demo main.c ${CUSTOM_SOURCES} ${GENERATED_SOURCES} ${DRIVER_SOURCES} ) # 链接库 target_link_libraries(lvgl_demo PRIVATE lvgl lvgl::thorvg m dl pthread )注意RK3568开发板可能需要额外的链接库如libdrm等具体取决于显示输出方式。5. 主程序框架与硬件适配main.c文件是连接LVGL框架与硬件平台的关键。以下是针对RK3568的典型实现#include lvgl/lvgl.h #include gui_guider.h #include events_init.h #include custom.h #include lvgl/src/drivers/display/fb/lv_linux_fbdev.h #include lvgl/src/drivers/evdev/lv_evdev.h lv_ui guider_ui; // GUI Guider生成的UI实例 // 帧缓冲设备配置 #define FB_DEVICE /dev/fb0 // 输入设备配置需根据实际设备节点调整 #define INPUT_DEVICE /dev/input/event2 int main(int argc, char **argv) { // 初始化LVGL核心 lv_init(); // 设置显示设备 lv_display_t *disp lv_linux_fbdev_create(); lv_linux_fbdev_set_file(disp, FB_DEVICE); lv_display_set_default(disp); // 设置输入设备 lv_indev_t *indev lv_evdev_create(LV_INDEV_TYPE_POINTER, INPUT_DEVICE); if(indev NULL) { printf(Failed to create input device!\n); return -1; } // 初始化UI setup_ui(guider_ui); events_init(guider_ui); custom_init(guider_ui); // 主循环 while(1) { lv_timer_handler_run_in_period(5); // 5ms处理周期 usleep(5000); // 降低CPU占用 } return 0; }硬件适配要点确认/dev/fb0设备节点存在且有读写权限通过cat /proc/bus/input/devices命令确定正确的输入设备节点如果使用HDMI输出可能需要配置DRM显示驱动而非帧缓冲6. 编译与部署实战完成代码编写后按照以下步骤进行交叉编译# 创建构建目录 mkdir build cd build # 生成Makefile cmake -DCMAKE_BUILD_TYPERelease .. # 开始编译 make -j$(nproc)编译成功后会在bin目录下生成可执行文件lvgl_demo。将其部署到开发板的步骤通过ADB或SCP将可执行文件传输到开发板确保开发板上有执行权限设置必要的环境变量如LD_LIBRARY_PATH# 部署示例 scp bin/lvgl_demo root192.168.1.100:/home/root ssh root192.168.1.100 chmod x /home/root/lvgl_demo # 在开发板上运行 ./lvgl_demo常见问题排查问题现象可能原因解决方案白屏无显示帧缓冲设备未正确配置检查/dev/fb0权限确认显示驱动加载触摸无响应输入设备节点错误通过evtest工具测试输入设备段错误内存不足或权限问题增加swap空间检查交叉编译器版本颜色异常色深配置不匹配确保GUI Guider、lv_conf.h和硬件三者色深一致7. 进阶调试与优化技巧当基础功能正常运行后可以考虑以下优化措施性能监控 在lv_conf.h中启用性能统计#define LV_USE_PERF_MONITOR 1 #define LV_USE_MEM_MONITOR 1内存优化配置// lv_conf.h 关键参数 #define LV_MEM_SIZE (128 * 1024) // 根据开发板RAM调整 #define LV_DISP_DEF_REFR_PERIOD 30 // 默认刷新周期(ms) #define LV_IMG_CACHE_DEF_SIZE 16 // 图片缓存数量双缓冲配置// 在main.c中创建显示设备时添加 lv_display_set_buffers(disp, buf1, buf2, buf_size, LV_DISPLAY_RENDER_MODE_DIRECT);输入设备校准 如果触摸坐标不准确可以通过以下命令校准# 在开发板上执行 ts_calibrate日志调试 实现LVGL日志回调void my_log_cb(const char *buf) { printf([LVGL] %s, buf); } // 在main()中注册 lv_log_register_print_cb(my_log_cb);8. 项目迭代与维护当需要更新UI设计时遵循以下工作流程在GUI Guider中修改设计并保存复制新的generated和custom目录到工程清理并重新编译cd build rm -rf * cmake .. make部署到开发板测试版本控制建议将lvgl目录设为git子模块忽略build和bin目录为不同开发板创建分支# 典型的.gitignore配置 build/ bin/ *.swp *.bak持续集成思路 可以编写自动化脚本完成以下流程检测GUI Guider项目变更自动替换工程文件触发交叉编译通过ADB自动部署到连接的开发板运行基础功能测试
