LVGL(lv_label实战)
文章目录
- ✅ 案例一:实时温度/电压显示
- 🔧 功能说明:
- ✅ 代码示例:
- ✅ 案例二:带图标 + 居中滚动文本的英文通知栏
- 🔧 功能说明:
- ✅ 代码示例:
- 📝 提示:
好的!下面是你要的两个 LVGL 示例控件案例:
✅ 案例一:实时温度/电压显示
🔧 功能说明:
- 使用
snprintf
手动格式化浮点数,避免嵌入式环境中printf("%f")
不支持的问题。 - 每 1 秒更新一次温度和电压数据。
✅ 代码示例:
#include "lvgl.h"
#include <stdlib.h>
#include <stdio.h>static lv_obj_t *label_status;static void update_sensor_data_cb(lv_timer_t *timer) {char buf[64];float temp = 36.5f + (rand() % 10) / 10.0f; // 模拟温度:36.5 ~ 37.4°Cfloat volt = 3.70f + (rand() % 10) / 100.0f; // 模拟电压:3.70 ~ 3.79Vint temp_int = (int)temp;int temp_frac = (int)((temp - temp_int) * 10);int volt_int = (int)volt;int volt_frac = (int)((volt - volt_int) * 100);snprintf(buf, sizeof(buf), "temp: %d.%d°C\nvolt: %d.%02dV",temp_int, temp_frac, volt_int, volt_frac);lv_label_set_text(label_status, buf);
}void create_sensor_status_ui(void) {label_status = lv_label_create(lv_scr_act());lv_obj_align(label_status, LV_ALIGN_CENTER, 0, 0);lv_label_set_text(label_status, "Initializing...");lv_timer_create(update_sensor_data_cb, 1000, NULL); // 每 1 秒更新一次
}
✅ 案例二:带图标 + 居中滚动文本的英文通知栏
🔧 功能说明:
- 显示图标(emoji 或图标字体)
- 滚动英文通知文字,文本在
label
中横向滚动(LV_LABEL_LONG_SCROLL_CIRCULAR
) - 支持自定义通知栏背景色、高度、位置等
✅ 代码示例:
#include "lvgl.h"void create_notification_bar(void) {// 创建背景容器lv_obj_t *bar = lv_obj_create(lv_scr_act());lv_obj_set_size(bar, lv_pct(100), 40);lv_obj_align(bar, LV_ALIGN_TOP_MID, 0, 0);lv_obj_set_style_bg_color(bar, lv_color_hex(0x333333), 0);lv_obj_set_style_radius(bar, 0, 0);lv_obj_clear_flag(bar, LV_OBJ_FLAG_SCROLLABLE);// 创建图标lv_obj_t *icon = lv_label_create(bar);lv_label_set_text(icon, LV_SYMBOL_INFO); // 或者直接用 emoji: "🔔"lv_obj_align(icon, LV_ALIGN_LEFT_MID, 8, 0);lv_obj_set_style_text_color(icon, lv_color_white(), 0);// 创建滚动文本lv_obj_t *notice = lv_label_create(bar);lv_label_set_long_mode(notice, LV_LABEL_LONG_SCROLL_CIRCULAR);lv_label_set_text(notice, "System update available. Click here to restart and apply changes.");lv_obj_set_width(notice, lv_pct(80));lv_obj_align_to(notice, icon, LV_ALIGN_OUT_RIGHT_MID, 10, 0);lv_obj_set_style_text_color(notice, lv_color_white(), 0);
}
📝 提示:
- 第二个案例可以配合
lv_anim
实现更复杂的动画提示。 - 如果你使用的是字体图标(如 FontAwesome),需要提前加载相应字体并设置给
label
。