一、项目搭建

1.1 在C盘目录下，下载下面三个文件

我将下面文件统一存放在C盘新建的LangEnv目录下

• cmake-4.0.1-windows-x86_64

• mingw64

• SDL2-2.32.4

1.2 添加下面的路径到path用户变量

按下键盘的WIN键，在搜索框中输入“系统变量”，打开控制面板的应用。

• C:\LangEnv\mingw64\bin

• C:\LangEnv\cmake-4.0.1-windows-x86_64\bin

• C:\LangEnv\SDL2-2.32.4\x86_64-w64-mingw32\bin

1.3 下载lvgl项目

下载适合vscode编译器运行的lvgl项目lv_port_pc_vscode at release/v8

上面的项目文件直接下载ZIP，下载完成后，下载下面两个子项目文件解压到主项目

• lv_drivers

• lvgl

lvgl项目裁剪

• 在lv_drivers文件夹下删除如下文件或文件夹

  • .github/

  • library.json

  • LICENSE

  • lv_drivers.mk

• 在lvgl文件夹下保留如下文件或文件夹，其余的删除

  • env_support/

  • src/

  • .gitignore

  • CMakeLists.txt

  • lv_conf.h，原名为：lv_conf_template

  • lvgl.h

1.4 下载vscode插件

打开vscode下载下面的插件，注意选择发布方为：Microsoft的下载

• C/C++

• C/C++ Extension Pack

• C/C++ Themes

• CMake Tools

1.5 快速搭建lvgl根目录下的Makefile.txt文件

在vscode编译器中同时按下键盘上的Ctrl+Shift+P键

选择CMake: QuickStart，官方教程：vscode使用 CMake 快速入门创建项目

选择CMake: Scan for Kits扫描电脑安装好的工具包，之后选择CMake: Select a Kit，用来选择使用哪个wingw,如果选择CMake: Select a Kit没有显示出工具包，就多点击几次CMake: Scan for Kits

• 输入项目名称

• 选择生成语言为C语言

• 选择CTest 作为附加选项

• 选择 Executable 作为项目类型

1.6 lvgl项目裁剪配置修改

• 修改文件名：

  • lvgl目录下的lv_conf_template.c修改为lv_conf.c,并开启头文件

  • lvgl_drivers目录下的lv_drv_conf_template.c修改为lv_drv_conf.c,并开启头文件

• 将mian/src/main.c文件下的main函数名修改为SDL_main

• 将根目录下的lv_drv_conf.h文件和lv_drivers\lv_drv_conf.h文件的USE_SDL宏都置1。

  并修改相同的显示的宽和高

  #if USE_SDL || USE_SDL_GPU
  #  define SDL_HOR_RES     240
  #  define SDL_VER_RES     280

• 修改lvgl\env_support\cmake\custom.cmake文件

  注意注释掉的内容，以及第一行新添加的cmake_policy(SET CMP0177 NEW)

• 不适用光标阴影，注释掉相关代码

上面是常见的错误，有其它的错误请配合AI进行修改

1.7 完善根目录的CMakeLists.txt文件

注意根据自己的SDL2文件的具体路径做出修改

cmake_minimum_required(VERSION 3.10.0)
project(lvgl_watch VERSION 0.1.0 LANGUAGES C)
​
# 设置 SDL2 路径
set(SDL2_DIR "C:/LangEnv/SDL2-2.32.4")
find_package(SDL2 REQUIRED)
​
# 让编译器支持 C11
set(CMAKE_C_STANDARD 11)
set(CMAKE_C_STANDARD_REQUIRED ON)
​
# 添加子库编译
add_subdirectory("lvgl")
add_subdirectory("lv_drivers")
​
# 创建可执行文件
add_executable(${PROJECT_NAME}
    main/src/main.c
    main/src/mouse_cursor_icon.c
)
​
# 头文件搜索路径
target_include_directories(${PROJECT_NAME} PRIVATE
    ${CMAKE_SOURCE_DIR}
    ${CMAKE_SOURCE_DIR}/lv_drivers
    ${CMAKE_SOURCE_DIR}/lvgl
    ${CMAKE_SOURCE_DIR}/main/src
    ${SDL2_INCLUDE_DIRS}
)
​
# 链接库
target_link_libraries(${PROJECT_NAME}
    lvgl
    lv_drivers
    ${SDL2_LIBRARIES}
)
​
# 链接系统线程库
find_package(Threads REQUIRED)
target_link_libraries(${PROJECT_NAME} Threads::Threads)
​
# 修复的 DLL 复制命令
find_file(SDL2_DLL
    NAMES SDL2.dll
    PATHS
        "${SDL2_DIR}/bin"
        "${SDL2_DIR}/x86_64-w64-mingw32/bin"
    REQUIRED
)
message(STATUS "Found SDL2.dll at: ${SDL2_DLL}")
​
add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
    COMMAND ${CMAKE_COMMAND} -E make_directory $<TARGET_FILE_DIR:${PROJECT_NAME}>
    COMMAND ${CMAKE_COMMAND} -E copy
        "${SDL2_DLL}"
        $<TARGET_FILE_DIR:${PROJECT_NAME}>
    COMMENT "Copying SDL2.dll to output directory"
)

1.8 项目运行结果

运行结果如下图所示

红框是编译，绿框是运行；先编译后运行

运行代码，主函数调用lvgl_simple_demo()就可以了

static void btn_event_cb(lv_event_t * e)
{
    lv_obj_t * btn = lv_event_get_target(e);
    lv_obj_t * label = lv_obj_get_child(btn, 0);   /* 按钮的第一个子对象就是标签 */
    lv_label_set_text(label, "Clicked!");
}


void lvgl_simple_demo(void)
{
    lv_obj_t * scr = lv_scr_act();             

    /* 创建按钮 */
    lv_obj_t * btn = lv_btn_create(scr);
    lv_obj_set_size(btn, 120, 50);
    lv_obj_center(btn);
    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);

    /* 给按钮加标签 */
    lv_obj_t * label = lv_label_create(btn);
    lv_label_set_text(label, "Press me");
    lv_obj_center(label);
}