滑块 (lv_slider)

概述

滑块对象看起来像一个带有旋钮的 进度条。可以通过拖动旋钮来设置值。与进度条类似，滑块可以是垂直或水平的。

部件和样式

• LV_PART_MAIN 滑块的背景。使用所有典型的背景样式属性。padding 会使指示器在相应方向上变小。

• LV_PART_INDICATOR 显示滑块当前状态的指示器。同样使用所有典型的背景样式属性。

• LV_PART_KNOB 一个矩形（或圆形），绘制在当前值的位置。同样使用所有典型的背景样式属性来描述旋钮。默认情况下，旋钮是正方形（可选的圆角），边长等于滑块较小的一侧。可以通过 padding 值使旋钮变大。padding 值也可以是非对称的。

用法

值和范围

要设置初始值，请使用 lv_slider_set_value(slider, new_value, LV_ANIM_ON/OFF)。动画时间由样式的 anim_time 属性设置。

要指定范围（最小值和最大值），可以使用 lv_slider_set_range(slider, min , max)。

模式

滑块可以是以下模式之一：

• LV_SLIDER_MODE_NORMAL 正常滑块，如上所述

• LV_SLIDER_SYMMETRICAL 从零值到当前值绘制指示器。需要负的最小范围和正的最大范围。

• LV_SLIDER_RANGE 允许通过 lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF) 设置起始值。起始值必须始终小于结束值。

可以使用 lv_slider_set_mode(slider, LV_SLIDER_MODE_...) 更改模式。

仅旋钮模式

通常，可以通过拖动旋钮或点击滑块条来调整滑块。在后一种情况下，旋钮会移动到点击点，滑块值会相应更改。在某些情况下，可能希望滑块仅对拖动旋钮做出反应。此功能通过添加 LV_OBJ_FLAG_ADV_HITTEST 启用：lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST)。

扩展点击区域（通过 lv_obj_set_ext_click_area(slider, value) 设置）会增加旋钮的点击区域。

事件

• LV_EVENT_VALUE_CHANGED 当滑块被拖动或通过按键更改时发送。滑块被拖动时会连续发送此事件。

• LV_EVENT_RELEASED 当滑块刚刚被释放时发送。

• LV_EVENT_DRAW_PART_BEGIN 和 LV_EVENT_DRAW_PART_END 会为以下部件发送：

  • LV_SLIDER_DRAW_PART_KNOB 滑块的主旋钮（右侧）

    • part: LV_PART_KNOB

    • draw_area: 指示器的区域

    • rect_dsc

    • id: 0

  • LV_SLIDER_DRAW_PART_KNOB 滑块的左旋钮

    • part: LV_PART_KNOB

    • draw_area: 指示器的区域

    • rect_dsc

    • id: 1

也可以查看 进度条 的事件。

了解更多关于 事件 的信息。

按键

• LV_KEY_UP/RIGHT 将滑块的值增加 1

• LV_KEY_DOWN/LEFT 将滑块的值减少 1

了解更多关于 按键 的信息。

示例

Simple Slider

C code  

 GitHub

#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES

static void slider_event_cb(lv_event_t * e);
static lv_obj_t * slider_label;

/**
 * A default slider with a label displaying the current value
 */
void lv_example_slider_1(void)
{
    /*Create a slider in the center of the display*/
    lv_obj_t * slider = lv_slider_create(lv_scr_act());
    lv_obj_center(slider);
    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    /*Create a label below the slider*/
    slider_label = lv_label_create(lv_scr_act());
    lv_label_set_text(slider_label, "0%");

    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    char buf[8];
    lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
    lv_label_set_text(slider_label, buf);
    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

#endif

MicroPython code  

 GitHub Simulator

#
# A default slider with a label displaying the current value
#
def slider_event_cb(e):

    slider = e.get_target()
    slider_label.set_text("{:d}%".format(slider.get_value()))
    slider_label.align_to(slider, lv.ALIGN.OUT_BOTTOM_MID, 0, 10)

# Create a slider in the center of the display
slider = lv.slider(lv.scr_act())
slider.center()
slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None)

# Create a label below the slider
slider_label = lv.label(lv.scr_act())
slider_label.set_text("0%")

slider_label.align_to(slider, lv.ALIGN.OUT_BOTTOM_MID, 0, 10)

---

Slider with custom style

C code  

 GitHub

#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES



/**
 * Show how to style a slider.
 */
void lv_example_slider_2(void)
{
    /*Create a transition*/
    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, 0};
    static lv_style_transition_dsc_t transition_dsc;
    lv_style_transition_dsc_init(&transition_dsc, props, lv_anim_path_linear, 300, 0, NULL);

    static lv_style_t style_main;
    static lv_style_t style_indicator;
    static lv_style_t style_knob;
    static lv_style_t style_pressed_color;
    lv_style_init(&style_main);
    lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
    lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
    lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
    lv_style_set_pad_ver(&style_main, -2); /*Makes the indicator larger*/

    lv_style_init(&style_indicator);
    lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
    lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
    lv_style_set_transition(&style_indicator, &transition_dsc);

    lv_style_init(&style_knob);
    lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
    lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
    lv_style_set_border_width(&style_knob, 2);
    lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
    lv_style_set_pad_all(&style_knob, 6); /*Makes the knob larger*/
    lv_style_set_transition(&style_knob, &transition_dsc);

    lv_style_init(&style_pressed_color);
    lv_style_set_bg_color(&style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));

    /*Create a slider and add the style*/
    lv_obj_t * slider = lv_slider_create(lv_scr_act());
    lv_obj_remove_style_all(slider);        /*Remove the styles coming from the theme*/

    lv_obj_add_style(slider, &style_main, LV_PART_MAIN);
    lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);
    lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);

    lv_obj_center(slider);
}

#endif

MicroPython code  

 GitHub Simulator

#
# Show how to style a slider.
#
# Create a transition
props = [lv.STYLE.BG_COLOR, 0]
transition_dsc = lv.style_transition_dsc_t()
transition_dsc.init(props, lv.anim_t.path_linear, 300, 0, None)

style_main = lv.style_t()
style_indicator = lv.style_t()
style_knob = lv.style_t()
style_pressed_color = lv.style_t()
style_main.init()
style_main.set_bg_opa(lv.OPA.COVER)
style_main.set_bg_color(lv.color_hex3(0xbbb))
style_main.set_radius(lv.RADIUS.CIRCLE)
style_main.set_pad_ver(-2)                 # Makes the indicator larger

style_indicator.init()
style_indicator.set_bg_opa(lv.OPA.COVER)
style_indicator.set_bg_color(lv.palette_main(lv.PALETTE.CYAN))
style_indicator.set_radius(lv.RADIUS.CIRCLE)
style_indicator.set_transition(transition_dsc)

style_knob.init()
style_knob.set_bg_opa(lv.OPA.COVER)
style_knob.set_bg_color(lv.palette_main(lv.PALETTE.CYAN))
style_knob.set_border_color(lv.palette_darken(lv.PALETTE.CYAN, 3))
style_knob.set_border_width(2)
style_knob.set_radius(lv.RADIUS.CIRCLE)
style_knob.set_pad_all(6)                   # Makes the knob larger
style_knob.set_transition(transition_dsc)

style_pressed_color.init()
style_pressed_color.set_bg_color(lv.palette_darken(lv.PALETTE.CYAN, 2))

# Create a slider and add the style
slider = lv.slider(lv.scr_act())
slider.remove_style_all()                   # Remove the styles coming from the theme

slider.add_style(style_main, lv.PART.MAIN)
slider.add_style(style_indicator, lv.PART.INDICATOR)
slider.add_style(style_pressed_color, lv.PART.INDICATOR | lv.STATE.PRESSED)
slider.add_style(style_knob, lv.PART.KNOB)
slider.add_style(style_pressed_color, lv.PART.KNOB | lv.STATE.PRESSED)

slider.center()

---

Slider with extended drawer

C code  

 GitHub

#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES

static void slider_event_cb(lv_event_t * e);

/**
 * Show the current value when the slider is pressed by extending the drawer
 *
 */
void lv_example_slider_3(void)
{
    /*Create a slider in the center of the display*/
    lv_obj_t * slider;
    slider = lv_slider_create(lv_scr_act());
    lv_obj_center(slider);

    lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);
    lv_slider_set_value(slider, 70, LV_ANIM_OFF);
    lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);

    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_ALL, NULL);
    lv_obj_refresh_ext_draw_size(slider);
}

static void slider_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);

    /*Provide some extra space for the value*/
    if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
        lv_event_set_ext_draw_size(e, 50);
    }
    else if(code == LV_EVENT_DRAW_PART_END) {
        lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
        if(dsc->part == LV_PART_INDICATOR) {
            char buf[16];
            lv_snprintf(buf, sizeof(buf), "%d - %d", (int)lv_slider_get_left_value(obj), (int)lv_slider_get_value(obj));

            lv_point_t label_size;
            lv_txt_get_size(&label_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, 0);
            lv_area_t label_area;
            label_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2 - label_size.x / 2;
            label_area.x2 = label_area.x1 + label_size.x;
            label_area.y2 = dsc->draw_area->y1 - 10;
            label_area.y1 = label_area.y2 - label_size.y;

            lv_draw_label_dsc_t label_draw_dsc;
            lv_draw_label_dsc_init(&label_draw_dsc);
            label_draw_dsc.color = lv_color_hex3(0x888);
            lv_draw_label(dsc->draw_ctx, &label_draw_dsc, &label_area, buf, NULL);
        }
    }
}

#endif

MicroPython code  

 GitHub Simulator

def slider_event_cb(e):
    code = e.get_code()
    obj = e.get_target()

    # Provide some extra space for the value
    if code == lv.EVENT.REFR_EXT_DRAW_SIZE:
        e.set_ext_draw_size(50)

    elif code == lv.EVENT.DRAW_PART_END:
        # print("DRAW_PART_END")
        dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
        # print(dsc)
        if dsc.part == lv.PART.INDICATOR:
            label_text = "{:d} - {:d}".format(obj.get_left_value(),slider.get_value())
            label_size = lv.point_t()
            lv.txt_get_size(label_size, label_text, lv.font_default(), 0, 0, lv.COORD.MAX, 0)
            # print(label_size.x,label_size.y)
            label_area = lv.area_t()
            label_area.x1 = dsc.draw_area.x1 + dsc.draw_area.get_width() // 2 - label_size.x // 2
            label_area.x2 = label_area.x1 + label_size.x
            label_area.y2 = dsc.draw_area.y1 - 10
            label_area.y1 = label_area.y2 - label_size.y

            label_draw_dsc = lv.draw_label_dsc_t()
            label_draw_dsc.init()

            dsc.draw_ctx.label(label_draw_dsc, label_area, label_text, None)
#
# Show the current value when the slider if pressed by extending the drawer
#
#
#Create a slider in the center of the display

slider = lv.slider(lv.scr_act())
slider.center()

slider.set_mode(lv.slider.MODE.RANGE)
slider.set_value(70, lv.ANIM.OFF)
slider.set_left_value(20, lv.ANIM.OFF)

slider.add_event_cb(slider_event_cb, lv.EVENT.ALL, None)
slider.refresh_ext_draw_size()

---

API

Typedefs

typedef uint8_t lv_slider_mode_t

Enums

Values:

enumerator LV_SLIDER_MODE_NORMAL

enumerator LV_SLIDER_MODE_SYMMETRICAL

enumerator LV_SLIDER_MODE_RANGE

enum lv_slider_draw_part_type_t

type field in lv_obj_draw_part_dsc_t if class_p = lv_slider_class Used in LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END

Values:

enumerator LV_SLIDER_DRAW_PART_KNOB

The main (right) knob's rectangle

enumerator LV_SLIDER_DRAW_PART_KNOB_LEFT

The left knob's rectangle

Functions

lv_obj_t *lv_slider_create(lv_obj_t *parent)

Create a slider object

Parameters

parent -- pointer to an object, it will be the parent of the new slider.

Returns

pointer to the created slider

static inline void lv_slider_set_value(lv_obj_t *obj, int32_t value, lv_anim_enable_t anim)

Set a new value on the slider

Parameters

• obj -- pointer to a slider object

• value -- the new value

• anim -- LV_ANIM_ON: set the value with an animation; LV_ANIM_OFF: change the value immediately

static inline void lv_slider_set_left_value(lv_obj_t *obj, int32_t value, lv_anim_enable_t anim)

Set a new value for the left knob of a slider

Parameters

• obj -- pointer to a slider object

• value -- new value

• anim -- LV_ANIM_ON: set the value with an animation; LV_ANIM_OFF: change the value immediately

static inline void lv_slider_set_range(lv_obj_t *obj, int32_t min, int32_t max)

Set minimum and the maximum values of a bar

Parameters

• obj -- pointer to the slider object

• min -- minimum value

• max -- maximum value

static inline void lv_slider_set_mode(lv_obj_t *obj, lv_slider_mode_t mode)

Set the mode of slider.

Parameters

• obj -- pointer to a slider object

• mode -- the mode of the slider. See lv_slider_mode_t

static inline int32_t lv_slider_get_value(const lv_obj_t *obj)

Get the value of the main knob of a slider

Parameters

obj -- pointer to a slider object

Returns

the value of the main knob of the slider

static inline int32_t lv_slider_get_left_value(const lv_obj_t *obj)

Get the value of the left knob of a slider

Parameters

obj -- pointer to a slider object

Returns

the value of the left knob of the slider

static inline int32_t lv_slider_get_min_value(const lv_obj_t *obj)

Get the minimum value of a slider

Parameters

obj -- pointer to a slider object

Returns

the minimum value of the slider

static inline int32_t lv_slider_get_max_value(const lv_obj_t *obj)

Get the maximum value of a slider

Parameters

obj -- pointer to a slider object

Returns

the maximum value of the slider

bool lv_slider_is_dragged(const lv_obj_t *obj)

Give the slider is being dragged or not

Parameters

obj -- pointer to a slider object

Returns

true: drag in progress false: not dragged

static inline lv_slider_mode_t lv_slider_get_mode(lv_obj_t *slider)

Get the mode of the slider.

Parameters

obj -- pointer to a bar object

Returns

see lv_slider_mode_t

Variables

const lv_obj_class_t lv_slider_class

struct lv_slider_t

Public Members

lv_bar_t bar

lv_area_t left_knob_area

lv_area_t right_knob_area

int32_t *value_to_set

uint8_t dragging

uint8_t left_knob_focus