LVGL 8.3.0开发实战：高频函数速查与移植避坑指南
LVGL 8.3.0开发实战：高频函数速查与移植避坑指南
硬件平台基于立创esp32s3实战派
定义页面通用样式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);
封装函数设置背景颜色
/**
* @brief 设置纯色背景（无过渡效果）
* @param color 颜色值（lv_color_t类型）
*/
void set_background_solid_color(lv_color_t color)
{
lvgl_port_lock(0);
// 1. 删除旧样式（防止内存泄漏）
lv_obj_remove_style(page1, &style, LV_PART_MAIN);
// 2. 重置样式
lv_style_reset(&style);
// 设置样式的边框宽度为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);
// 3. 设置新颜色
lv_style_set_bg_color(&style, color);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
// 4. 重新应用样式
lv_obj_add_style(page1, &style, LV_PART_MAIN);
lvgl_port_unlock();
}
创建页面显示文本
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);
显示中文
生成字体文件
一、生成中文字体文件
-
使用在线转换工具
LVGL 官方提供了 在线字体转换工具，支持将 TTF/WOFF 字体文件转换为 LVGL 可用的.c格式字体文件125。- 参数设置：
- 字体大小：建议 16px 及以上，避免显示模糊68。
- BPP（抗锯齿）：推荐选择 4 位，提升显示效果46。
- 字符范围：选择所需汉字范围（如
0x4E00-0x9FFF表示常用汉字），或手动输入特定字符810。 - 压缩选项：勾选 Compressed 可减小字体体积36。
二、配置项目与代码
- 参数设置：
-
添加字体文件到工程
-
将生成的
.c文件（如 font_alipuhui20.c）放入 工程
在CMakeLists.txt中添加进编译
-
menuconfig配置
在 lv_conf.h 中声明字体并启用大字体支持：
LV_FONT_FMT_TXT_LARGE
启用字体字号
设置字体样式
1、全局样式设置（推荐 ）：
// 创建页面样式
static lv_style_t style;
lv_style_init(&style);
lv_style_set_text_font(&style, &font_alipuhui20); // 设置全局字体样式
2、单句样式设置：
// 创建扫描状态标签
lv_obj_t *page1_1 = lv_label_create(page1);
lv_label_set_text(page1_1, "WLAN 扫描了...");
lv_obj_set_style_text_color(page1_1, lv_color_hex(0x000000), 0); // 设置文本颜色为黑色
lv_obj_set_style_text_font(page1_1, &font_alipuhui20, 0);
显示图片
图片转化网址
图像转换器 — LVGL --- Image Converter — LVGL
将生成.c源文件添加进工程
/**************** Logo显示逻辑 ****************/
// 创建独立Logo容器（直接放在根屏幕）
logo_container = lv_obj_create(lv_scr_act());
lv_obj_remove_style_all(logo_container); // 移除logo_container的所有样式
lv_obj_set_size(logo_container, LV_PCT(100), LV_PCT(100)); // 全屏
lv_obj_set_layout(logo_container, LV_LAYOUT_FLEX); // 设置logo_container的布局为flex布局
// 设置logo_container的flex对齐方式为居中对齐
lv_obj_set_flex_align(logo_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
// 创建Logo图片
LV_IMG_DECLARE(Pic2);//图片源文件（.c）
lv_obj_t *logo_img = lv_img_create(logo_container);// 创建lvgl图片对象，在容器内
lv_img_set_src(logo_img, &Pic2);//设置图片对象图像源
图片旋转
组件：
新增按键
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); // 打印滑块的当前值
}
应用：滑块控制屏幕背光亮度
// 定义一个静态函数 slider_event_handler，用于处理滑块事件
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); // 打印滑块的当前值
bsp_display_brightness_set(val); // 设置背光亮度
}
设置背光亮度函数
// 背光亮度设置
esp_err_t bsp_display_brightness_set(int brightness_percent)
{
if (brightness_percent > 100) {
brightness_percent = 100;
} else if (brightness_percent < 0) {
brightness_percent = 0;
}
// 使用ESP_LOGI宏记录信息日志，TAG为日志标签，"Setting LCD backlight: %d%%"为日志格式，brightness_percent为亮度百分比
ESP_LOGI(TAG, "Setting LCD backlight: %d%%", brightness_percent);
// LEDC resolution set to 10bits, thus: 100% = 1023
uint32_t duty_cycle = (1023 * brightness_percent) / 100;
ESP_ERROR_CHECK(ledc_set_duty(LEDC_LOW_SPEED_MODE, LCD_LEDC_CH, duty_cycle));
ESP_ERROR_CHECK(ledc_update_duty(LEDC_LOW_SPEED_MODE, LCD_LEDC_CH));
return ESP_OK;
}
开关
初始化
// 开关组件
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");//打印开关状态日志
}
日志：
开关控制led亮灭
led初始化代码
#define LED_GPIO 11 // 使用GPIO11
void led_init() {
// GPIO配置结构体
gpio_config_t io_conf = {
.pin_bit_mask = (1ULL << LED_GPIO), // 选择GPIO11
.mode = GPIO_MODE_OUTPUT, // 输出模式
.pull_up_en = GPIO_PULLUP_DISABLE, // 关闭上拉
.pull_down_en = GPIO_PULLDOWN_DISABLE, // 关闭下拉
.intr_type = GPIO_INTR_DISABLE // 禁用中断
};
gpio_config(&io_conf);
// 初始状态设为低电平
gpio_set_level(LED_GPIO, 0);
ESP_LOGI("UI", "led_init_ok");
}
开关组件回调函数
// 定义一个静态函数 switch_event_handler，用于处理开关事件
static void switch_event_handler(lv_event_t *e)
{
// 获取事件的目标对象，即触发事件的开关对象
lv_obj_t *sw = lv_event_get_target(e);
// 打印开关状态到日志，如果开关处于选中状态则打印 "ON"，否则打印 "OFF"
ESP_LOGI("UI", "Switch state: %s",
lv_obj_has_state(sw, LV_STATE_CHECKED) ? "ON" : "OFF");
// 检查开关是否处于选中状态
if(lv_obj_has_state(sw, LV_STATE_CHECKED))
{
// 如果开关处于选中状态，将LED的GPIO电平设置为0（通常表示打开LED）
gpio_set_level(LED_GPIO, 0);
ESP_LOGI("UI", "led on");
}
else
{
// 如果开关不处于选中状态，将LED的GPIO电平设置为1（通常表示关闭LED）
gpio_set_level(LED_GPIO, 1);
ESP_LOGI("UI", "led off");
}
}
列表
/************** 页面1组件初始化 **************/
// 标题标签（单独设置字体尺寸示例）
lv_obj_t *title = lv_label_create(page1);
lv_label_set_text(title, "人员列表");
lv_obj_add_style(title, &style, LV_PART_MAIN);
lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);
// 创建列表组件
lv_obj_t *list = lv_list_create(page1);
lv_obj_set_size(list, 280, 180); // 调整尺寸
// 将list对象与屏幕底部居中对齐，向下偏移10个像素
lv_obj_align(list, LV_ALIGN_BOTTOM_MID, 0, -10);
// 将style样式添加到list对象的主体部分
lv_obj_add_style(list, &style, LV_PART_MAIN);
// 设置列表滚动条样式
// 设置滚动条的背景颜色（灰色）
lv_obj_set_style_bg_color(list, lv_color_hex(0x666666), LV_PART_SCROLLBAR);
// 设置滚动条的宽度
lv_obj_set_style_width(list, 6, LV_PART_SCROLLBAR); // 滚动条宽度
// 示例数据
const char *demo_data[] = {
"张三 - 系统管理员",
"李四 - 硬件工程师",
"王五 - 软件工程师",
"赵六 - 生产操作员",
"陈七 - 设备维护员"
};
// 添加列表项
for (uint8_t i = 0; i < sizeof(demo_data)/sizeof(demo_data[0]); i++) {
lv_obj_t *item = lv_list_add_text(list, demo_data[i]);
// 设置列表项额外样式
// 设置item的背景透明度为30%
lv_obj_set_style_bg_opa(item, LV_OPA_30, LV_PART_MAIN);
// 设置item的背景颜色为白色
// lv_obj_set_style_bg_color(item, lv_color_white(), LV_PART_MAIN);
// 设置item的背景颜色为红色
lv_obj_set_style_bg_color(item, lv_color_hex(0xFF0000), LV_PART_MAIN);
// 设置item的垂直内边距为2
lv_obj_set_style_pad_ver(item, 2, LV_PART_MAIN); // 增大行高
}
下拉列表
初始化
// 下拉列表
// 创建一个下拉列表对象，并将其添加到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);
}
下拉列表判断列表选项(字符串)
if (strcmp(buf, "Medium") == 0) // 使用 strcmp 函数判断选中的字符串
{
ESP_LOGI("UI", "Selected: %s", buf);
}
拓展：
下拉栏设置背景颜色
事件处理函数（判断下拉列表选项）
#include <string.h> // 添加头文件以使用 strcmp 函数
// 定义一个静态函数，用于处理下拉菜单的事件
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));
if (strcmp(buf, "blue") == 0) {//判断字符串
set_background_solid_color(lv_color_hex(0x0000FF));
}
else if (strcmp(buf, "green") == 0) {
set_background_solid_color(lv_color_hex(0x00FF00));
}
else if (strcmp(buf, "yellow") == 0) {
set_background_solid_color(lv_color_hex(0xFFFF00));
}
ESP_LOGI("UI", "背景颜色已切换至：%s", buf);
}
设置颜色函数
/**
* @brief 设置纯色背景（无过渡效果）
* @param color 颜色值（lv_color_t类型）
*/
void set_background_solid_color(lv_color_t color)
{
lvgl_port_lock(0);
// 1. 删除旧样式（防止内存泄漏）
lv_obj_remove_style(page1, &style, LV_PART_MAIN);
// 2. 重置样式
lv_style_reset(&style);
// 设置样式的边框宽度为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);
// 3. 设置新颜色
lv_style_set_bg_color(&style, color);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
// 4. 重新应用样式
lv_obj_add_style(page1, &style, LV_PART_MAIN);
lvgl_port_unlock();
}
界面切换
//界面2->界面1
lv_obj_add_flag(page2, LV_OBJ_FLAG_HIDDEN);
lv_obj_clear_flag(page1, LV_OBJ_FLAG_HIDDEN);
隐藏当前显示的页面。移除隐藏标志，使目标界面对象可见。
// 修改全局变量
static lv_obj_t *page1; // 页面1容器
static lv_obj_t *page2; // 页面2容器
static uint8_t current_page = 0; // 当前页面标识 0=page1, 1=page2
// 页面切换事件处理函数
static void page_switch_handler(lv_event_t *e)
{
if(current_page == 0) {
// 切换到页面2
lv_obj_add_flag(page1, LV_OBJ_FLAG_HIDDEN);//隐藏界面1
lv_obj_clear_flag(page2, LV_OBJ_FLAG_HIDDEN);//移除隐藏标志，使对象可见
current_page = 1;
} else {
// 切换回页面1
lv_obj_add_flag(page2, LV_OBJ_FLAG_HIDDEN);
lv_obj_clear_flag(page1, LV_OBJ_FLAG_HIDDEN);
current_page = 0;
}
}
LVGL通用设置
显示帧率和CPU占用
lvgl封装好函数和定义，使用时，开启宏定义即可使用
1、可以在lv_obj.h头文件中声明：
#define LV_USE_PERF_MONITOR 1 // 启用性能统计,FPS和CPU占用
2、更好的办法，在menuconfig中开启
下拉栏中选项可选择显示的位置：Bottom right右下角
内存监控
1、可以在lv_obj.h头文件中声明：
#define LV_USE_MEM_MONITOR 1 // 内存监控
2、更好的办法，在menuconfig中开启
下拉栏中选项可选择显示的位置：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中开启该字库，否则编译会不通过
如果文章对你有所帮助，可以帮我点一下左下角推荐该文，万分感谢
浙公网安备 33010602011771号