2、 SDL3 LVGL vscode cmake环境搭建

已于 2025-04-12 22:40:46 修改
阅读量469 收藏 9
点赞数 9
分类专栏： SDL3_LVGL 文章标签： SDL3 LVGL c cmake
于 2025-04-12 19:30:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51355375/article/details/147052557
版权

文章目录

1、 前置条件

2. LVGL 加入

在SDL测试工程中新建third_party 目录， 将lvgl 复制到这个目录下，删除其他不需要的目录和文件，保留src, examples和根目录下的头文件， 更改包含版本的lvgl-v9.2目录为lvgl
在这里插入图片描述

3. 修改CmakLists.txt

cmake_minimum_required(VERSION 3.30)
project(sdl3_lvgl)

set(CMAKE_C_STANDARD 11)

# 包含目录
include_directories(
    ${CMAKE_SOURCE_DIR}/include
    ${CMAKE_SOURCE_DIR}/third_party/lvgl
    ${CMAKE_SOURCE_DIR}/third_party/lvgl/../
    ${CMAKE_SOURCE_DIR}/third_party/lvgl/src
    # ${CMAKE_SOURCE_DIR}/third_party/lvgl/examples/porting
)


# 递归收集 .c 文件（从指定根目录开始）
# LVGL
file(GLOB_RECURSE LVGL_SRC 
    LIST_DIRECTORIES false  # 忽略目录，仅保留文件
    "${CMAKE_SOURCE_DIR}/third_party/lvgl/src/*.c"
)

# 可选：排除不需要的目录
# list(FILTER SOURCES EXCLUDE REGEX ".*/tests?/.*")  # 排除 test 或 tests 目录


# 源文件
file(GLOB_RECURSE SOURCES 
    LIST_DIRECTORIES false  
    "${CMAKE_SOURCE_DIR}/src/*.c"
)

# 链接库路径
link_directories(${CMAKE_SOURCE_DIR}/lib)

# message(STATUS "Project source dir: ${PROJECT_SOURCE_DIR}")
# message(STATUS "Main.c path: ${PROJECT_SOURCE_DIR}/src/main.c")

# 可执行文件
add_executable(${PROJECT_NAME} ${PROJECT_SOURCE_DIR}/src/main.c ${SOURCES} ${LVGL_SRC})

# 链接库
target_link_libraries(${PROJECT_NAME}
    SDL3
)


# 拷贝库文件 文件
file(COPY ${PROJECT_SOURCE_DIR}/lib/SDL3.dll DESTINATION ${PROJECT_BINARY_DIR})

4. lvgl 适配

4.1 修改lvgl配置文件

将lv_conf_template.h 预编译指令改为1， 并改文件名为lv_conf.h，不然会找不到这个头文件
在这里插入图片描述

4. lvgl 整合

4.1 引入 lvgl

在这里插入图片描述

4.1 初始化SDL

#define BYTE_PER_PIXEL (LV_COLOR_FORMAT_GET_SIZE(LV_COLOR_FORMAT_ARGB8888))
#define WIDTH (600)  // 屏幕宽度
#define HEIGHT (400) // 屏幕高度
#define BUF_HEIGHT 40    // 小行缓冲

static SDL_Window *window;
static SDL_Renderer *renderer;
static SDL_Texture *texture;

static volatile bool running = true;

int initSDL() {
    // 初始化SDL
    if (SDL_Init(SDL_INIT_VIDEO) < 0) {
        SDL_Log(" SDL init falid : %s", SDL_GetError());
        return -1;
    }

    // 创建窗口
    window = SDL_CreateWindow("SDL3", WIDTH, HEIGHT, SDL_WINDOW_HIGH_PIXEL_DENSITY);

    // // 创建渲染器
    renderer = SDL_CreateRenderer(window, NULL);

    // SDL_CreateWindowAndRenderer("SDL3", HOR, VER, SDL_WINDOW_HIGH_PIXEL_DENSITY, &window, &renderer);

    // 创建纹理
    texture = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_ARGB8888, SDL_TEXTUREACCESS_STREAMING, // 改为流式访问
                                WIDTH, HEIGHT);

    if (!window || !renderer || !texture) {
        SDL_Log("initSDL fail: %s", SDL_GetError());
        SDL_Quit();
        running = false;
        return -1;
    }
    SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255); // 设置背景为白色
    return 0;
}

4.1 初始化并注册显示设备

void disp_flush(lv_display_t *disp, const lv_area_t *area, uint8_t *px_map) {
    SDL_Rect src_rect = {
        .x = area->x1,
        .y = area->y1,
        .w = area->x2 - area->x1 + 1,
        .h = area->y2 - area->y1 + 1
    };

    // 更新纹理的特定区域
    SDL_UpdateTexture(texture, &src_rect, px_map, WIDTH * BYTE_PER_PIXEL);

    // 渲染整个纹理到窗口
    SDL_RenderTexture(renderer, texture, NULL, NULL);
    lv_display_flush_ready(disp);
}

void lv_port_disp_init(void) {
    lv_display_t *disp = lv_display_create(WIDTH, HEIGHT);
    lv_display_set_flush_cb(disp, disp_flush);
    lv_display_set_color_format(disp, LV_COLOR_FORMAT_ARGB8888);
    
    static uint8_t buf1[WIDTH * BUF_HEIGHT * BYTE_PER_PIXEL];
    static uint8_t buf2[WIDTH * BUF_HEIGHT * BYTE_PER_PIXEL];
    lv_display_set_buffers(disp, buf1, buf2, 
                          WIDTH * BUF_HEIGHT * BYTE_PER_PIXEL, 
                          LV_DISPLAY_RENDER_MODE_PARTIAL);
}

这里的lv_port_disp_init 函数其实就是 lv_port_disp_template.c 示例中的重定义：
在这里插入图片描述

5. 创建lvgl布局控件

// 创建带布局的UI界面
void create_ui(void) {
    // 获取当前活跃的屏幕
    lv_obj_t *scr = lv_scr_act();
    
    // 创建主容器（使用Flex布局）
    lv_obj_t *cont = lv_obj_create(scr);
    lv_obj_set_size(cont, WIDTH - 40, HEIGHT - 40); // 留出边距
    lv_obj_center(cont);
    
    // 设置Flex布局参数
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);  // 垂直排列
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, 
                         LV_FLEX_ALIGN_CENTER, 
                         LV_FLEX_ALIGN_CENTER);
    
    // 添加标题标签
    lv_obj_t *title = lv_label_create(cont);
    lv_label_set_text(title, "LVGL SDL3 Demo");
    // lv_obj_set_style_text_font(title, &lv_font_montserrat_28, 0);
    lv_obj_set_style_text_color(title, lv_color_hex(0x003a57), 0);

    // 创建按钮容器（水平排列）
    lv_obj_t *btn_cont = lv_obj_create(cont);
    lv_obj_set_size(btn_cont, lv_pct(100), 80);
    lv_obj_set_flex_flow(btn_cont, LV_FLEX_FLOW_ROW);
    lv_obj_set_flex_align(btn_cont, LV_FLEX_ALIGN_SPACE_EVENLY, 
                         LV_FLEX_ALIGN_CENTER, 
                         LV_FLEX_ALIGN_CENTER);
    lv_obj_remove_style_all(btn_cont); // 移除默认样式

    // 添加三个不同样式的按钮
    const char *btns[] = {"sure", "cancl", "more..."};
    for(int i = 0; i < 3; i++) {
        lv_obj_t *btn = lv_button_create(btn_cont);
        lv_obj_set_size(btn, 100, 40);
        
        // 按钮标签
        lv_obj_t *label = lv_label_create(btn);
        lv_label_set_text(label, btns[i]);
        lv_obj_center(label);
        
        // 设置不同颜色样式
        static lv_style_t style_btn;
        lv_style_init(&style_btn);
        lv_style_set_bg_color(&style_btn, lv_color_hex(i == 0 ? 0x00aa00 : 
                                            (i == 1 ? 0xaa0000 : 0x555555)));
        lv_style_set_radius(&style_btn, 8);
        lv_obj_add_style(btn, &style_btn, 0);
    }

    // 添加信息文本区域
    lv_obj_t *info = lv_textarea_create(cont);
    lv_textarea_set_text(info, "init.........................");
    lv_obj_set_size(info, lv_pct(100), 120);
    lv_obj_set_style_border_width(info, 2, 0);
    lv_obj_set_style_border_color(info, lv_color_hex(0xcccccc), 0);
}

6. 主函数

主函数中包含lvgl和sdl 的相关初始化和设置

int main(int argc, char *argv[]) {
initSDL();
    lv_init();
    lv_port_disp_init();

    create_ui();

    while (running) {
        SDL_Event event;
        while (SDL_PollEvent(&event)) {
            if (event.type == SDL_EVENT_QUIT) running = false;
        }

        lv_timer_handler();
        SDL_RenderClear(renderer);
        SDL_RenderTexture(renderer, texture, NULL, NULL);
        SDL_RenderPresent(renderer);
        
        static Uint32 last = 0;
        Uint32 now = SDL_GetTicks();
        lv_tick_inc(now - last);
        last = now;
        SDL_Delay(1);
    }

    // 释放资源
    SDL_DestroyTexture(texture);
    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    SDL_Quit();

    return 0;
}

7. 运行测试及完整代码

测试：
在这里插入图片描述
完整代码：

#include "SDL3/SDL.h"
#include "lvgl/lvgl.h"

#define BYTE_PER_PIXEL (LV_COLOR_FORMAT_GET_SIZE(LV_COLOR_FORMAT_ARGB8888))
#define WIDTH (600)  // 屏幕宽度
#define HEIGHT (400) // 屏幕高度
#define BUF_HEIGHT 40    // 小行缓冲

static SDL_Window *window;
static SDL_Renderer *renderer;
static SDL_Texture *texture;

static volatile bool running = true;

int initSDL() {
    // 初始化SDL
    if (SDL_Init(SDL_INIT_VIDEO) < 0) {
        SDL_Log(" SDL init falid : %s", SDL_GetError());
        return -1;
    }

    // 创建窗口
    window = SDL_CreateWindow("SDL3", WIDTH, HEIGHT, SDL_WINDOW_HIGH_PIXEL_DENSITY);

    // // 创建渲染器
    renderer = SDL_CreateRenderer(window, NULL);

    // SDL_CreateWindowAndRenderer("SDL3", HOR, VER, SDL_WINDOW_HIGH_PIXEL_DENSITY, &window, &renderer);

    // 创建纹理
    texture = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_ARGB8888, SDL_TEXTUREACCESS_STREAMING, // 改为流式访问
                                WIDTH, HEIGHT);

    if (!window || !renderer || !texture) {
        SDL_Log("initSDL fail: %s", SDL_GetError());
        SDL_Quit();
        running = false;
        return -1;
    }
    SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255); // 设置背景为白色
    return 0;
}

void disp_flush(lv_display_t *disp, const lv_area_t *area, uint8_t *px_map) {
    SDL_Rect src_rect = {
        .x = area->x1,
        .y = area->y1,
        .w = area->x2 - area->x1 + 1,
        .h = area->y2 - area->y1 + 1
    };

    // 更新纹理的特定区域
    SDL_UpdateTexture(texture, &src_rect, px_map, WIDTH * BYTE_PER_PIXEL);

    // 渲染整个纹理到窗口
    SDL_RenderTexture(renderer, texture, NULL, NULL);
    lv_display_flush_ready(disp);
}

void lv_port_disp_init(void) {
    lv_display_t *disp = lv_display_create(WIDTH, HEIGHT);
    lv_display_set_flush_cb(disp, disp_flush);
    lv_display_set_color_format(disp, LV_COLOR_FORMAT_ARGB8888);
    
    static uint8_t buf1[WIDTH * BUF_HEIGHT * BYTE_PER_PIXEL];
    static uint8_t buf2[WIDTH * BUF_HEIGHT * BYTE_PER_PIXEL];
    lv_display_set_buffers(disp, buf1, buf2, 
                          WIDTH * BUF_HEIGHT * BYTE_PER_PIXEL, 
                          LV_DISPLAY_RENDER_MODE_PARTIAL);
}

// 创建带布局的UI界面
void create_ui(void) {
    // 获取当前活跃的屏幕
    lv_obj_t *scr = lv_scr_act();
    
    // 创建主容器（使用Flex布局）
    lv_obj_t *cont = lv_obj_create(scr);
    lv_obj_set_size(cont, WIDTH - 40, HEIGHT - 40); // 留出边距
    lv_obj_center(cont);
    
    // 设置Flex布局参数
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);  // 垂直排列
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, 
                         LV_FLEX_ALIGN_CENTER, 
                         LV_FLEX_ALIGN_CENTER);
    
    // 添加标题标签
    lv_obj_t *title = lv_label_create(cont);
    lv_label_set_text(title, "LVGL SDL3 Demo");
    // lv_obj_set_style_text_font(title, &lv_font_montserrat_28, 0);
    lv_obj_set_style_text_color(title, lv_color_hex(0x003a57), 0);

    // 创建按钮容器（水平排列）
    lv_obj_t *btn_cont = lv_obj_create(cont);
    lv_obj_set_size(btn_cont, lv_pct(100), 80);
    lv_obj_set_flex_flow(btn_cont, LV_FLEX_FLOW_ROW);
    lv_obj_set_flex_align(btn_cont, LV_FLEX_ALIGN_SPACE_EVENLY, 
                         LV_FLEX_ALIGN_CENTER, 
                         LV_FLEX_ALIGN_CENTER);
    lv_obj_remove_style_all(btn_cont); // 移除默认样式

    // 添加三个不同样式的按钮
    const char *btns[] = {"sure", "cancl", "more..."};
    for(int i = 0; i < 3; i++) {
        lv_obj_t *btn = lv_button_create(btn_cont);
        lv_obj_set_size(btn, 100, 40);
        
        // 按钮标签
        lv_obj_t *label = lv_label_create(btn);
        lv_label_set_text(label, btns[i]);
        lv_obj_center(label);
        
        // 设置不同颜色样式
        static lv_style_t style_btn;
        lv_style_init(&style_btn);
        lv_style_set_bg_color(&style_btn, lv_color_hex(i == 0 ? 0x00aa00 : 
                                            (i == 1 ? 0xaa0000 : 0x555555)));
        lv_style_set_radius(&style_btn, 8);
        lv_obj_add_style(btn, &style_btn, 0);
    }

    // 添加信息文本区域
    lv_obj_t *info = lv_textarea_create(cont);
    lv_textarea_set_text(info, "init.........................");
    lv_obj_set_size(info, lv_pct(100), 120);
    lv_obj_set_style_border_width(info, 2, 0);
    lv_obj_set_style_border_color(info, lv_color_hex(0xcccccc), 0);
}


int main(int argc, char *argv[]) {
initSDL();
    lv_init();
    lv_port_disp_init();

    create_ui();

    while (running) {
        SDL_Event event;
        while (SDL_PollEvent(&event)) {
            if (event.type == SDL_EVENT_QUIT) running = false;
        }

        lv_timer_handler();
        SDL_RenderClear(renderer);
        SDL_RenderTexture(renderer, texture, NULL, NULL);
        SDL_RenderPresent(renderer);
        
        static Uint32 last = 0;
        Uint32 now = SDL_GetTicks();
        lv_tick_inc(now - last);
        last = now;
        SDL_Delay(1);
    }

    // 释放资源
    SDL_DestroyTexture(texture);
    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    SDL_Quit();

    return 0;
}

参考： 使用SDL2搭建简易LVGL模拟器

后续将尝试整合lvgl 和 sdl 事件， 感兴趣的可加qq群讨论： 1046502146

LVGL在linux环境搭建篇
weixin_38165614的博客
03-23 2269
linux 一秒搞定你的lvgl 项目
基于VSCode和MinGW-w64搭建LVGL模拟开发环境
mftang的博客
06-15 5669
本文主要介绍使用VSCode和MinGW-w64搭建LVGL模拟开发环境，在使用LVGL进行项目UI设计时，通过编写代码，然后下载到板卡上运行，以查看其运行结果。这种方式虽然能正确反应UI在嵌入式设备上的运行状态，但对于开发过程来说很耗费时间。通过模拟器的形式开发UI能极大的节约时间。
LVGL 使用VSCode 开发环境搭建
qq_36722048的博客
03-31 2621
使用VSCode 开发LVGL
【LVGL-环境搭建】
sinat_23896491的博客
02-01 1741
a.安装Ubuntu20.04虚拟机。b.Ubuntu安装vscode。
lvgl环境搭建
qq_66813359的博客
03-21 1427
lvgl环境搭建和TFT_eSPI库设置
LVGL开发——（环境搭建）
qq_59527512的博客
10-20 2040
实现环境的创建
【LVGL学习笔记】（一）环境搭建
weixin_45728705的博客
12-16 3651
LVGL学习笔记
嵌入式UI开发-lvgl+wsl2/macOS+vscode系列：3、style（样式）熟悉及MacOS模拟环境搭建及编译问题解决（‘SDL2/SDL.h‘ file not found）
逍遥游的博客
05-28 1310
之前的基础控件已经熟悉了，接下来我们进行样式的熟悉，并且尝试搭建macos的模拟开发环境。常见的样式就这些了，api使用比较简单，常用的一些需求也基本都满足了，接下来来学习总结一下动画。
vscode+lvgl+sdl+MingW64全部资料
12-09
本文将详细介绍如何在Windows环境下，通过MingW64工具链和VSCode集成开发环境，结合LVGL图形库和SDL库，搭建一个完整的图形界面开发平台。首先，MingW64是一个适用于Windows的开源开发工具集，它包括一个编译器、...
LVGL vscode
最新发布
04-03
在 VSCode 中配置 LVGL 的开发环境需要完成以下几个方面的准备工作： #### 安装必要的扩展 为了支持 C/C++ 编程以及构建工具链，需安装以下扩展： - **C/C++ 扩展**：提供 IntelliSense 支持、调试功能以及其他特性...
VSCode搭建LVGL模拟器环境示例（lv_sim_vscode_sdl）
10-21
lv_sim_vscode_sdl_7.11.0，完整的示例代码，已包含lvgl、lv_drivers、lv_examples 子模块，来源：https://github.com/lvgl/lv_sim_vscode_sdl github 拉取太慢，备份下来使用。 使用参考：https://blog.csdn.net/p1279030826/article/details/120890075
LVGL的PC模拟器
m0_68300980的博客
01-06 937
使用VSCode和SDL搭建LVGL模拟器环境
《ESP32-Arduino开发》GUI设计 LVGL 开发环境搭建教程（从工程目录到模拟器）
热门推荐
MGodmonkey的专属博客
08-13 1万+
前言：最近闲着无聊，看到手头正好有一块tft彩屏，想着拿来玩玩。既然用到了显示屏，自然是离不开ui设计，lvgl是嵌入式一个开源图形库，具备“Light”(轻量)和"Versatile"(可用性强)等特点。对于我而言，最难的莫过于最初的环境搭建了，许多学习的热情在此刻被逐渐浇灭。但功夫不负有心人，花了一天终于是学会了个大概。 跟随我的步伐，教你从0到1搭建LVGL开发环境！ 文章目录1.准备工作2.工程创建（基于VScode+PlatformIO）1.创建Platform工程2.向platform工程中.
001 LVGL PC端模拟搭建
2302_81678505的博客
12-07 471
使用PC端软件模拟LVGL运行，而不需要任何嵌入式硬件正常安装流程即可本地安装包下载资源包。
VsCode C语言 SDL包配置 2024.9
www.passlink.cn
09-21 1511
我懒得下载V-studio ,所以直接在VsCode 里配置C环境。我搞了好几个小时，啥都弄好了，但是一直被下面几个问题缠绕导致demo启动不了，现在我记录一下这奇葩的解决过程。我的配置方式有些小众，总之就是把 include 使用 “-I” 引入，lib文件不需要环境变量。奇怪的要死，我明明已经配置好了系统环境变量 Path，我还重启了2次Vscode，一次电脑。写这篇文章的起因是，最近我需要使用。两个文件夹里的文件直接复制到。但就是没用，就是说找不到，于是我。，从命令行里链接 头文件。
ESP8266学习笔记（17）——搭建环境、编译烧写（RTOS SDK）Linux篇
Leung的博客
02-04 8550
一、前言 ESP8266 的 RTOS SDK 从 3.0 开始使用 ESP-IDF(乐鑫物联网开发框架，Espressif IoT Development Framework) 的代码框架，相比 2.0 的编译二次开发方便了很多，旨在通过Wi-Fi，电源管理和其他一些系统功能快速开发物联网（IoT）应用程序。 由于在 Windows 环境中搭建遇到了许多问题未能解决，所以本篇采用在 Linux ...
【windows搭建lvgl模拟环境（一）之VSCode】
qq_40604302的博客
03-26 840
通过在windows搭建LVGL模拟环境方便UI界面开发和调试，后续只需将相关的代码移植到项目中即可，方便调试，PC上支持下列模拟器：本文说明搭建模拟器环境，分别采用：VScode + LVGL 8.3源码codeblock + LVGL 9源码根据项目中LVGL的版本进行选择方法。
Arduino应用开发——esp32 lvgl v8.3环境搭建
ShenZhen_zixian的博客
02-29 3336
LVGL (Light and Versatile Graphics Library) 是一个很流行的免费开源嵌入式图形库，可以帮助很多 MCU、MPU 和显示类型创建好看的 UI。它由Gábor Kiss-Vámosi于2016年创建的一个开源项目，目前由来自世界各地的志愿者共同维护和开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不知所云,

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值