LVGL 控件之滑动条（lv

LVGL 控件之滑动条（lv_slider）

news2024/11/15 6:41:31

一、概述

滑动条对象看起来像是在进度条增加了一个可以调节的旋钮，使用时可以通过拖动旋钮来设置一个值。就像进度条（bar）一样，Slider 可以是垂直的或水平的(当设置进度条的宽度小于其高度，就可以创建出垂直摆放的滑动条)。

滑块部件由三个部分组成：主体背景、指示器和旋钮，示意图如下：

LV_PART_MAIN 滑动条的背景。使用所有典型的背景样式属性。设置 padding 样式会使指标在相应方向上变小。
LV_PART_INDICATOR 显示滑动条当前状态的指示器。也是使用所有典型的背景样式属性。
LV_PART_KNOB 旋钮(可以是原形或矩形)。也是使用所有典型的背景属性。默认情况下，旋钮是方形的（带有可选的圆角半径），边长等于滑动条的较小边。可以通过设置 padding 样式调整旋钮的大小。填充值也可以是不对称的。

二、滑块

1、设置滑块当前值和范围值

默认情况下，滑块部件被创建出来后，它的当前值是 0，范围值是 0~100。

如果用户需要设置当前值，可调用 lv_slider_set_value 函数。
如果用户需要设置范围值，可以调用 lv_slider_set_range 函数。

在水平模式下默认绘制方向为从左到右，并且垂直模式下从下到上。如果最小值大于最大值，如 100~0 时，绘制方向变为相反的方向。

lv_obj_t* slider = lv_slider_create(lv_scr_act());

lv_slider_set_range(slider,0,255);            /* 设置slider 部件范围值 */
lv_slider_set_value(slider,100, LV_ANIM_ON);  /* 设置slider 部件当前值 */

lv_obj_center(slider);

2、设置滑块部件的模式

除了默认的模式之外，滑块部件还可以配置为以下两种拓展模式：

LV_SLIDER_MODE_SYMMETRICAL：无论当前值是正数还是负数，指示器始终从零绘制到当前值。
LV_SLIDER_MODE_RANGE：允许调用lv_bar_set_start_value 函数设置起始值，该起始值必须小于结束值。

用户需要设置滑块部件的模式，可调用以下函数：

lv_slider_set_mode(slider, LV_SLIDER_MODE_…);

lv_obj_t* slider = lv_slider_create(lv_scr_act());

lv_slider_set_mode(slider, LV_SLIDER_MODE_SYMMETRICAL);  /* 设置slider 部件模式：始终从0 开始绘制指示器 */
lv_slider_set_range(slider,-100,100);                    /* 设置slider 部件数值范围 */
lv_obj_center(slider);


lv_obj_t* slider1 = lv_slider_create(lv_scr_act());

lv_slider_set_mode(slider1, LV_SLIDER_MODE_RANGE);  /* 创建slider1 部件模式：允许指定起始值 */
lv_bar_set_start_value(slider1,0,LV_ANIM_OFF);      /* 创建slider1 部件起始值 */
lv_slider_set_range(slider1, -100, 100);            /* 创建slider1 部件数值范围 */
lv_obj_align_to(slider1, slider,LV_ALIGN_OUT_BOTTOM_MID,0,30);

由上图可知：

在 LV_SLIDER_MODE_SYMMETRICAL 模式下，滑块始终是从 0 点开始绘制指示器；
而在 LV_SLIDER_MODE_RANGE 模式下，滑块部件可以改变起始值，值得注意的是，起始值必须小于结束值（当前值）。

3、禁用单击

默认情况下，用户可以通过拖动旋钮或者单击滑块的方式来调整指示器位置，而后者可能会导致当前值的突变，这在某些情景下是不允许出现的。如果用户想禁用单击调整当前值，可调用以下函数：

lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST);

4、事件

LV_EVENT_VALUE_CHANGED 在拖动滑块或用键更改。当滑块处于被拖拽。
LV_EVENT_RELEASED 在刚刚释放滑块时发送。

void slider_event_cb(lv_event_t *e)
{
    printf("释放按钮\r\n");
}

void my_gui(void) {
    lv_obj_t* slider = lv_slider_create(lv_scr_act());

    lv_slider_set_range(slider,1,255);            /* 设置slider 部件范围值 */
    lv_slider_set_value(slider,100, LV_ANIM_ON);  /* 设置slider 部件当前值 */
    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); 

    lv_obj_center(slider);
}

5、API 函数

函数	描述
lv_slider_create()	创建滑块部件
lv_slider_set_value()	设置当前值
lv_slider_set_left_value()	设置左侧旋钮的值
lv_slider_set_range()	设置范围值
lv_slider_set_mode()	设置模式
lv_slider_get_value()	获取当前值
lv_slider_get_left_value()	获取左侧旋钮的值
lv_slider_get_min_value()	获取最小值
lv_slider_get_max_value()	获取最大值
lv_slider_is_dragged()	判断滑块是否被拖动
lv_slider_get_mode()	获取滑块部件模式