2-3-1_LVGL入门教程之基础对象(lv_obj)_哔哩哔哩_bilibili

Widgets（控件） — LVGL 文档

一、目录说明

  • demos：存放的是LVGL一些综合的内置示例，部分示例可以在官网体验
  • docs：存放LVGL的开发文档，阅读时一般不在这里直接阅读，而是在LVGL站点阅读
  • env_support:一些环境或者平台的支持，不如我们所使用的RT-Thread就在其中
  • scripts：存放一些处理脚本，我们在使用LVGL时基本不会用到
  • src：存放LVGL实际的源码，我们使用LVGL进行开发时，都是使用这里面的代码文件
  • tests：存放一些CI测试文件，我们在使用LVGL时不会用到

二、LVGL的启动流程初探

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow)
{
    /* 初始化LVGL库 */
    lv_init();

    /* 初始化LVGL的硬件抽象层（显示、触摸）  */
    lv_display_t * display = lv_windows_create_display(title, 1024, 600, 100, FALSE, FALSE);
    lv_windows_acquire_pointer_indev(display);

    /* 将提示信息输出到控制台，也可以使用printf函数 */
    LV_LOG_USER("LVGL initialization completed!");

    /* 运行demo */
    // 下面这三行是运行一个demo，第一行和后面两行的效果是一样的，只能同时去掉第一行或者后面两行，两者之一的注释
    // 后续学习的时候要确保下面这三行都被注释掉
    lv_demo_widgets();
    //char * demo_str[] = {"widgets"};
    //lv_demos_create(demo_str, strlen((char * )demo_str));

    /* 课程示例代码，一般同时只运行一个
       运行前，请将上面的三行代码都注释掉 */
    //lesson_2_3_1();         // 基础对象(lv_obj)，"Hello, LVGL


    while(1) {
        /* 定期调用lv_task处理（定时器）程序它也可以在定时器或操作系统任务中完成 */
        lv_task_handler();
        usleep(5000);       /* 不一直占用系统资源 */
    }
    return 0;
}

LVGL的定时器处理程序是一个内置的任务系统，允许开发者注册函数，使其可以定期被调用，它帮助管理时间敏感的操作（毫秒级别）和周期性的活动

三、LVGL裁剪

LVGL的裁剪在lv_conf.h文件中进行

我们可以尝试关闭lv_conf.h文件中的WIDGETS和THEMES的部分功能来验证

四、SquareLine_Stdio使用

  • Project name (项目名称)：lvgl_1：这是该项目的名称。项目名通常用于标识和区分不同的应用或设计。

  • 路径 (路径)：G:\ydw_item\LVGL\my_lvgl_work\my_lvgl_1\：显示了该项目的存储路径。此路径用于保存项目文件。

  • Resolution (分辨率)：240 x 280：设置显示屏的分辨率为 240 像素宽，280 像素高。这意味着你的显示设备具有240像素的宽度和280像素的高度。

image-20250316153602188

  • Rotation (旋转)：0 degree：显示方向设置为 0 度，也就是没有旋转，显示方向与硬件显示方向一致。

image-20250316151839395

  • Offset (偏移)：0, 0：设置显示区域的偏移量，通常用来对显示内容进行微调，确保图像和内容显示正确。在这里，偏移量设置为 (0, 0)，表示没有偏移。

    image-20250316152820450

  • Shape (形状)：Rectangle：设置显示区域的形状为矩形，这适用于大多数显示屏，尤其是液晶或OLED显示器。

image-20250316152240395

  • Color depth (颜色深度)：设置颜色深度为 16 位，这意味着每个像素使用 16 位来表示颜色，通常为 RGB 565 格式（5 位红色，6 位绿色，5 位蓝色）。

image-20250316151915238

  • LVGL version (LVGL 版本)：该项目使用的 LVGL 版本是 8.3.6，这是 Lightweight Graphics Library 的版本。LVGL 是一个开源的图形库，通常用于嵌入式系统中的图形用户界面（GUI）。

image-20250316152850607

  • Theme (主题)：Light：主题设置为浅色主题，意味着界面背景会较亮，适用于在明亮环境中使用。

image-20250316152924653

  • Multilanguage (多语言)：Disable：多语言支持被禁用，意味着该界面不会有语言切换功能，可能只支持单一语言

image-20250316152119619

五、自定义字体

5.1 生成自定义字库

LVGL在线自定义字体转换器

QQ_1742203731682

5.2 声明自定义字库

1
LV_FONT_DECLARE(alimamashuheiti_48);

5.3 使用字体

1
lv_obj_set_style_text_font(ui_TimeMinuteLabel, &alimamashuheiti_48, LV_PART_MAIN | LV_STATE_DEFAULT);

5.4 设置字体颜色

RGB 转 16 进制工具 | 菜鸟工具

1
lv_obj_set_style_text_color(ui_TimeMinuteLabel, lv_color_hex(0xCDCDB4), LV_PART_MAIN | LV_STATE_DEFAULT);

六、图像

6.1 生成代码

LVGL在线图像生成器

在使用生成器前使用PS软件将图片修改致对应大小

QQ_1742209430572

6.2 声明图像

1
LV_IMG_DECLARE(image1);

6.3 设置图像

1
2
lv_obj_t * bg_image = lv_img_create(screem);
lv_img_set_src(bg_image,&image1);

七、GIF图像

七、自定义图标

1.

Unicode编码转换UTF-8编码

image-20250323194551201

image-20250323194617525

image-20250323194640838