LVGL 8.3.0常用函数快速使用

LVGL 8.3.0使用快速上手教程（使用篇）

定义页面通用样式style

    // 创建页面样式
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_border_width(&style, 0);
    lv_style_set_pad_all(&style, 0);
    lv_style_set_radius(&style, 0);
    lv_style_set_width(&style, 320);
    lv_style_set_height(&style, 240);

更改背景颜色

    // 创建页面样式
    static lv_style_t style;
    lv_style_init(&style);

    // 设置背景属性（新增颜色设置）
    lv_style_set_bg_opa(&style, LV_OPA_COVER);// 设置样式的背景透明度，LV_OPA_COVER表示完全不透明
    // 设置样式的背景颜色，使用lv_color_hex函数将十六进制颜色值0x2F4F4F转换为颜色对象
    lv_style_set_bg_color(&style, lv_color_hex(0x2F4F4F));  // 石板灰颜色    // 0x2F4F4F对应的颜色是石板灰

    // 设置样式的边框宽度为0
    lv_style_set_border_width(&style, 0);
    // 设置样式的所有内边距为0
    lv_style_set_pad_all(&style, 0);
    // 设置样式的圆角半径为0
    lv_style_set_radius(&style, 0);
    // 设置样式的宽度为320像素
    lv_style_set_width(&style, 320);
    // 设置样式的高度为240像素
    lv_style_set_height(&style, 240);

    // 创建页面容器，应用样式style
    page1 = lv_obj_create(lv_scr_act());
    lv_obj_add_style(page1, &style, 0);  //将样式（style）应用到指定的对象（page1）上。0 表示应用到对象的主样式部分。

逻辑：创建页面样式，设置页面样式背景色，容器应用背景样式，显示容器

渐变

 // 在样式初始化中添加
lv_style_set_bg_grad_color(&style, lv_color_hex(0x778899));  // 渐变终色
lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);           // 垂直渐变
lv_style_set_bg_main_stop(&style, 20);                       // 主色停止点
lv_style_set_bg_grad_stop(&style, 80);                       // 渐变色停止点

多种更改背景颜色方法（初始化）

   // 设置背景属性（新增颜色设置）
    lv_style_set_bg_opa(&style, LV_OPA_COVER);// 设置样式的背景透明度，LV_OPA_COVER表示完全不透明
    // 设置样式的背景颜色，使用lv_color_hex函数将十六进制颜色值0x2F4F4F转换为颜色对象
    lv_style_set_bg_color(&style, lv_color_hex(0x2F4F4F));  // 石板灰颜色    // 0x2F4F4F对应的颜色是石板灰
    // 创建页面容器，应用样式style
    page1 = lv_obj_create(lv_scr_act());
    lv_obj_add_style(page1, &style, 0);  //将样式（style）应用到指定的对象（page1）上。0 表示应用到对象的主样式部分。

    // 纯白色
    lv_style_set_bg_color(&style, lv_color_hex(0xFFFFFF));
    // 创建页面容器，应用样式style
    page1 = lv_obj_create(lv_scr_act());
    lv_obj_add_style(page1, &style, 0);  //将样式（style）应用到指定的对象（page1）上。0 表示应用到对象的主样式部分。

    // RGB红色（需要色彩模式支持）
    lv_style_set_bg_color(&style, lv_color_make(255,0,0));
    // 创建页面容器，应用样式style
    page1 = lv_obj_create(lv_scr_act());
    lv_obj_add_style(page1, &style, 0);  //将样式（style）应用到指定的对象（page1）上。0 表示应用到对象的主样式部分。
    vTaskDelay(1000 / portTICK_PERIOD_MS);

    // 使用LVGL调色板系统
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_BLUE, 3));  //设置为蓝色，亮度为3
    // 创建页面容器，应用样式style
    page1 = lv_obj_create(lv_scr_act());
    lv_obj_add_style(page1, &style, 0);  //将样式（style）应用到指定的对象（page1）上。0 表示应用到对象的主样式部分。
    vTaskDelay(1000 / portTICK_PERIOD_MS);

创建页面显示文本

	lv_obj_t *page1;     // 页面 1

	// 创建页面容器
    page1 = lv_obj_create(lv_scr_act());
    lv_obj_add_style(page1, &style, 0);

    // 创建扫描状态标签
    lv_obj_t *page1_1 = lv_label_create(page1);
    lv_label_set_text(page1_1, "WLAN scanfing...");
    lv_obj_align(page1_1, LV_ALIGN_CENTER, 50, -50);

组件：

新增按键

	lv_obj_t *page1;     // 页面 1
	/**************** 以下是新增的按钮代码 ****************/
    // 创建按钮对象
    lv_obj_t *btn = lv_btn_create(page1);//

    // 设置按钮尺寸
    lv_obj_set_size(btn, 100, 40);

    // 将按钮对齐到右下角（留10像素边距）
    lv_obj_align(btn, LV_ALIGN_BOTTOM_RIGHT, -10, -10);

    // 创建按钮标签
    lv_obj_t *btn_label = lv_label_create(btn);
    lv_label_set_text(btn_label, "key1");//按键文本key1
    // 居中标签文本
    lv_obj_center(btn_label);

    // 添加按钮事件回调
    lv_obj_add_event_cb(btn, lv_key1_cb, LV_EVENT_CLICKED, NULL);//按键对象，回调函数，事件类型（点击），用户数据指针。
    /**************** 以上是新增的按钮代码 ****************/

按钮事件回调函数

// 返回按钮回调函数
static void lv_key1_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) {
        ESP_LOGI(TAG, "lv_key1 Clicked");//打印日志lv_key1 Clicked
        lv_obj_del(page1); // 删除当前页面
    }
}

添加变量显示

变量声明：

static int counter = 0;      // 新增的整型变量
static lv_obj_t *counter_label; // 显示变量的标签

变量初始化（放入ui_init（）函数中一并初始化）：

    /**************** 新增计数器显示 ****************/
    // 创建计数器标签
    counter_label = lv_label_create(page1);
    lv_label_set_text_fmt(counter_label, "Count: %d", counter);
    lv_obj_align(counter_label, LV_ALIGN_CENTER, 0, 0); // 居中显示
    //lv_label_create 是 LVGL 库中的一个函数，用于创建一个新的标签对象。父对象为 page1，即页面 1。
    //lv_label_set_text_fmt 用于将一个格式化的字符串设置为标签的文本内容。将变量 counter 的值格式化为字符串，并设置为 counter_label 标签的文本内容。
    //lv_obj_align 用于设置对象的对齐方式。LV_ALIGN_CENTERj表示居中对齐，0, 0 表示 x 和 y 方向的偏移量。

改变变量值(绑定按键触发)：

// 返回按钮回调函数
static void lv_key1_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) {
        ESP_LOGI(TAG, "lv_key1 Clicked");
        counter++; // 增加计数器值
        update_counter_display(); // 更新显示
    }
}

外部设置lvgl变量函数（自封装）：

// 外部修改计数器的函数（如果需要）
void set_counter_value(int value)
{
    counter = value; // 将传入的值赋给全局变量 counter
    if(counter_label) { // 检查 counter_label 是否已经被创建
        update_counter_display(); // 更新 counter_label 的显示内容
    }
}

例：

    set_counter_value(155); // 设置计数器值初始值

更新变量显示

// 更新计数器显示的函数
static void update_counter_display(void)
{
    //将一个整数变量 counter 的值格式化为字符串，并设置为 counter_label 标签的文本内容。
    lv_label_set_text_fmt(counter_label, "Count: %d", counter);
}

滑块

    /* 左侧控制面板 */
    lv_obj_t *left_panel = lv_obj_create(page1);
    lv_obj_set_size(left_panel, 150, 240);
    lv_obj_set_style_pad_all(left_panel, 10, 0);

滑块初始化（显示在容器left_panel中）

    // 滑动条组件
    // 创建一个滑块对象，并将其父对象设置为left_panel
    lv_obj_t *slider = lv_slider_create(left_panel);
    // 设置滑块对象的大小为宽120像素，高20像素
    lv_obj_set_size(slider, 120, 20);
    // 将滑块对象对齐到父对象的顶部中间位置，并向下偏移20像素
    lv_obj_align(slider, LV_ALIGN_TOP_MID, 0, 20);
    // 设置滑块的值范围从0到100
    lv_slider_set_range(slider, 0, 100);
    // 创建一个标签对象，并将其父对象设置为left_panel
    slider_label = lv_label_create(left_panel);
    // 设置标签的文本为"0%"
    lv_label_set_text(slider_label, "0%");
    // 将标签对象对齐到滑块对象的底部中间位置，并向下偏移10像素
    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
    // 为滑块对象添加一个事件回调函数，当滑块的值发生变化时触发，回调函数为slider_event_handler，用户数据为NULL
    lv_obj_add_event_cb(slider, slider_event_handler, LV_EVENT_VALUE_CHANGED, NULL);

滑块回调函数（更新滑块进度值）

static void slider_event_handler(lv_event_t *e)
{
    // 获取事件的目标对象，即触发事件的滑块对象
    lv_obj_t *slider = lv_event_get_target(e);
    // 获取滑块的当前值val
    int val = lv_slider_get_value(slider);
    // 设置标签的文本，显示滑块的当前值，格式为“%d%%”
    lv_label_set_text_fmt(slider_label, "%d%%", val);// 在滑块容器中显示值val
    printf("slider_label=%d%%\n", val); // 打印滑块的当前值
}

开关

初始化

    // 开关组件
    lv_obj_t *sw = lv_switch_create(left_panel);
    lv_obj_align(sw, LV_ALIGN_TOP_MID, 0, 100);
    lv_obj_add_event_cb(sw, switch_event_handler, LV_EVENT_VALUE_CHANGED, NULL);

事件处理函数

//开关组件回调函数
static void switch_event_handler(lv_event_t *e)
{
    lv_obj_t *sw = lv_event_get_target(e);
    ESP_LOGI("UI", "Switch state: %s",
            lv_obj_has_state(sw, LV_STATE_CHECKED) ? "ON" : "OFF");//打印开关状态日志
}

日志：

下拉列表

初始化

    // 下拉列表
    // 创建一个下拉列表对象，并将其添加到left_panel容器中
    lv_obj_t *dropdown = lv_dropdown_create(left_panel);
    // 设置下拉列表的选项，选项之间用换行符分隔
    lv_dropdown_set_options(dropdown, "Low\nMedium\nHigh");
    // 将下拉列表对象对齐到left_panel容器的顶部中间位置，偏移量为(0, 150)
    lv_obj_align(dropdown, LV_ALIGN_TOP_MID, 0, 150);
    // 为下拉列表对象添加事件回调函数，当值发生变化时调用dropdown_event_handler函数
    // 第四个参数NULL表示传递给回调函数的用户数据为空
    lv_obj_add_event_cb(dropdown, dropdown_event_handler, LV_EVENT_VALUE_CHANGED, NULL);

下拉列表事件处理函数

// 定义一个静态函数，用于处理下拉菜单的事件
static void dropdown_event_handler(lv_event_t *e)
{
    // 获取事件的目标对象，即触发事件的下拉菜单对象
    lv_obj_t *dropdown = lv_event_get_target(e);
    // 定义一个字符数组，用于存储选中的字符串
    char buf[32];
    // 从下拉菜单中获取当前选中的字符串，并存储到buf中
    lv_dropdown_get_selected_str(dropdown, buf, sizeof(buf));
    // 使用ESP_LOGI宏记录日志信息，输出选中的字符串
    ESP_LOGI("UI", "Selected: %s", buf);
}

显示帧率和CPU占用

lvgl封装好函数和定义，使用时，开启宏定义即可使用

1、可以在lv_obj.h头文件中声明：

#define LV_USE_PERF_MONITOR   1   // 启用性能统计,FPS和CPU占用

2、更好的办法，在menuconfig中开启

• Show CPU usage and FPS count显示CPU使用率与帧率统计

下拉栏中选项可选择显示的位置：Bottom right右下角

内存监控

1、可以在lv_obj.h头文件中声明：

 #define LV_USE_MEM_MONITOR    1   // 内存监控

2、更好的办法，在menuconfig中开启

• Show the used memory and the memory fragmentation 显示已使用的内存和内存碎片情况。

下拉栏中选项可选择显示的位置：Bottom left左下角

部件使用

在使用到的部件前勾选

lv_obj_t *img = lv_img_create(lv_scr_act()); /* 创建图片部件 */
 lv_img_set_src(img, &img_user); /* 设置图片源 */
lv_img_set_zoom(img, zoom_val); /* 设置图片缩放 */
/* 设置位置 */
lv_obj_align(img, LV_ALIGN_CENTER, -scr_act_width()/4,-scr_act_height()/7);
 /* 设置重新着色 */
 lv_obj_set_style_img_recolor(img, lv_color_hex(0xf2f2f2),0);
 lv_obj_set_style_img_recolor_opa(img,100,0); /* 设置着色透明度 */

锁LVGL端口： lvgl_port_lock(0);//

防止干扰lvgl

解锁LVGL端口：lvgl_port_unlock();//

// 解锁LVGL端口，允许其他任务继续执行

对齐：lv_obj_align（）：//

// 将标签对象对齐到父对象的中心位置，LV_ALIGN_CENTER是对齐方式（中心对其），并在x轴偏移0，y偏移50

    lv_obj_align(label_wifi_scan, LV_ALIGN_CENTER, 0, -50);

创建页面lv_obj_t *page1; *// 页面 page1

删除页面 lv_obj_del(page1);

设置默认字体LV_FONT_DECLARE(font)

LV_FONT_DECLARE(font_alipuhui20);//会把 font_alipuhui20 设置为默认字体

注意需要在menuconfig中开启该字库，否则编译会不通过