玩转树莓派屏幕之五：自定义LCD屏幕显示-尧图网站建设

📅 发布时间：2026/6/18 6:07:40

上一章节中已经完成了lvgl适配以及tslib的屏幕校准。自己要展示的内容还没有展示出来，还是使用玩转树莓派屏幕之二：自定义屏幕显示中直接展示的文字，没有任何渲染。

lvgl中支持很多控件，屏幕展示的内容更加丰富。但是让自己去配置这些组件以及布局，搞不了搞不了。。。

还好现在有很多的GUI 设计工具可以使用。本次使用的是GUI Guider，也支持LVGL v9系列。不得不吐槽一下，lvgl不同系列代码api有很大变化，在网上的大部分教程在v9版本都不能适用。

一、使用Gui Guider设计GUI

选择新建 -> LVGL 9.2.1 -> 设备 simulator --> 模版为Empty UI，点击创建工程。
工程名称自取，树莓派MHS色深选择16bit，屏幕选择480*320，点击创建
界面介绍：

设计GUI界面：

点击模拟：

这也看不出来啥。。。。。

点击生成代码，选择C

查看生成文件：

custom、generated是我们要的文件。

二、适配Gui Guider

3.1 目录移植

新建guider_gui目录，将生成的custom、generated放入其中。

├── CMakeLists.txt
├── LICENSE
├── Makefile
├── README.md
├── guider_gui
│   ├── custom
│   └── generated
├── lvgl
├── scripts
│   └── backend_conf.sh
├── src
│   ├── lib
│   ├── main.c
│   └── usr
├── toolchain.cmake
└── user_cross_compile_setup.cmake

3.2 配置CMake.txt

让项目编译过程中能够识别新增加的gui内容，需要配置CMake引入.c文件和.h文件。

# 包含 tslib 头文件（自动从 pkg-config 获取）
include_directories(${TSLIB_INCLUDE_DIRS})
link_directories(${TSLIB_LIBRARY_DIRS})# 重新生成了src/usr内容
#aux_source_directory(src/usr/)
include_directories(src/usr)
file(GLOB_RECURSE SRC_USR_ADD ${PROJECT_SOURCE_DIR}/src/usr/*.c)# 引入guider-gui生成内容
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/generated)
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/custom)
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/generated/images)#aux_source_directory(${PROJECT_SOURCE_DIR}/guider_gui/custom/)
file(GLOB_RECURSE SRC_LVGL_GUIGUIDER ${PROJECT_SOURCE_DIR}/guider_gui/generated/*.c)
file(GLOB_RECURSE SRC_LVGL_IMG ${PROJECT_SOURCE_DIR}/guider_gui/generated/images/*.c${PROJECT_SOURCE_DIR}/guider_gui/generated/guider_fonts/*.c
)add_executable(lvglsim src/main.c ${LV_LINUX_SRC} ${LV_LINUX_BACKEND_SRC} ${SRC_LVGL_GUIGUIDER} ${SRC_USR_ADD}src/usr/NetTools.c ${SRC_LVGL_IMG})target_include_directories(lvglsim PRIVATE ${TSLIB_INCLUDE_DIRS})
target_link_libraries(lvglsim lvgl_linux lvgl PkgConfig::TSLIB dl pthread)

这里只放了新增的部分，其他使用的LVGL demo中自带的。具体其他细节可以看下面的github链接地址。

3.4 修改main文件

在src/main中引入头文件和定义，在while循环中定期去刷新屏幕内容，这里是设置了1s刷新一次。

#include "gui_guider.h"
lv_ui guider_ui;int main() {....setup_ui(&guider_ui);while (true){uint32_t start_tick = lv_tick_get();usleep(LVGL_TICK); /*Sleep for 5 millisecond*/lv_task_handler();lv_tick_inc(LVGL_TICK); /*Tell LVGL that 5 milliseconds were elapsed*/if (start_tick - last_update >= 1000) {// 每秒执行刷新动作}}
}

更改屏幕中的显示内容，可以通过直接设置label的text内容进行修改：

lv_label_set_text(guider_ui.screen_cpu_show_info, tempStr);

玩转树莓派屏幕之五：自定义LCD屏幕显示

一、使用Gui Guider设计GUI

二、适配Gui Guider

3.1 目录移植

3.2 配置CMake.txt

3.4 修改main文件

三、效果展示

Gui-Guider设置展示

实物展示

四、开源地址

参考文档：