目录
一、概述
滑动条对象看起来像是在 进度条 增加了一个可以调节的旋钮,使用时可以通过拖动旋钮来设置一个值。 就像进度条(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() | 获取滑块部件模式 |