《lvgl基础学习 —— slider》

1.lv_slider

　　lv_slider是 LVGL 里用于“选择一个连续数值范围”的控件。

常见使用场景：

• 音量：0 ～ 100

• 亮度：0 ～ 255

• 曝光补偿：-4 ～ +4

• 进度条（可拖动）

• 参数调节（非常常见于工业/摄像头 UI

　　只要是“拖动改变数值”，基本就是 slider。

核心组成：

lv_slider
 ├── 背景轨道
 ├── 已选进度
 └── 滑块（knob）

 　　本质还是一个lv_obj，内部维护一个int值，范围：min ~ max

最小使用步骤：

lv_obj_t *slider = lv_slider_create(parent);
lv_slider_set_range(slider, 0, 100);
lv_slider_set_value(slider, 50, LV_ANIM_OFF);

 

demo：中间一个slider，默认值是50

#include "lvgl.h"

void ui_slider_demo(void)
{
    lv_obj_t *slider = lv_slider_create(lv_scr_act());
    lv_obj_set_width(slider, 200);
    lv_obj_center(slider);

    lv_slider_set_range(slider, 0, 100);
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);
}

 

slider的核心事件：

事件                       含义
LV_EVENT_VALUE_CHANGED    值发生变化（最重要）
LV_EVENT_PRESSED          按下
LV_EVENT_RELEASED         松开

 

demo：拖动slider，实时显示数值

#include "lvgl.h"

static lv_obj_t *label;

static void slider_event_cb(lv_event_t *e)
{
    lv_obj_t *slider = lv_event_get_target(e);
    int value = lv_slider_get_value(slider);

    lv_label_set_text_fmt(label, "Value: %d", value);
}

void ui_slider_demo(void)
{
    /* 数值显示 */
    label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Value: 50");
    lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 20);

    /* Slider */
    lv_obj_t *slider = lv_slider_create(lv_scr_act());
    lv_obj_set_width(slider, 220);
    lv_obj_center(slider);

    lv_slider_set_range(slider, 0, 100);
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);

    lv_obj_add_event_cb(slider, slider_event_cb,
                        LV_EVENT_VALUE_CHANGED, NULL);
}

 

水平/垂直slider：

默认：水平

lv_slider_create(parent);

垂直slider

lv_obj_t *slider = lv_slider_create(parent);
lv_obj_set_size(slider, 40, 200);
lv_obj_add_flag(slider, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
lv_slider_set_range(slider, 0, 100);

　　只要“高 > 宽”，就自然是竖的。

设置时是否动画：

lv_slider_set_value(slider, value, LV_ANIM_ON);
lv_slider_set_value(slider, value, LV_ANIM_OFF);

• 用户拖动：总是即时

• 代码设置：你可以选是否动画

和lv_bar的区别：

控件          能不能拖    用途
lv_slider    ✅ 能      用户输入
lv_bar       ❌ 不能    只显示进度

　　要“调节”，用 slider；
　　要“显示”，用 bar

 

demo：亮度调节（slider + label）

static lv_obj_t *label;

static void slider_cb(lv_event_t *e)
{
    lv_obj_t *slider = lv_event_get_target(e);
    int val = lv_slider_get_value(slider);

    lv_label_set_text_fmt(label, "Brightness: %d%%", val);

    /* 真实产品中：这里不要直接操作硬件
       而是通知 service 层 */
}

void ui_slider_demo(void)
{
    label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Brightness: 50%");
    lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 30);

    lv_obj_t *slider = lv_slider_create(lv_scr_act());
    lv_obj_set_width(slider, 260);
    lv_obj_align(slider, LV_ALIGN_CENTER, 0, 20);

    lv_slider_set_range(slider, 0, 100);
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);

    lv_obj_add_event_cb(slider, slider_cb,
                        LV_EVENT_VALUE_CHANGED, NULL);
}

 

新手最常见的 6 个坑（一定要看）

❌ 1️⃣ 在回调里 sleep()
→ UI 卡死

❌ 2️⃣ 用 slider 当进度条
→ 应该用 lv_bar

❌ 3️⃣ 忘了设置宽度
→ slider 看起来很奇怪

❌ 4️⃣ 在回调里直接控制硬件
→ 正确：发消息给 service 层

❌ 5️⃣ 多线程直接改 slider
→ LVGL 非线程安全

❌ 6️⃣ 忘了 LV_EVENT_VALUE_CHANGED
→ 用了 CLICKED（不对）