16. 滑块部件
一、滑块部件
滑块部件常用于调节某个参数的值，它以直线滑动的形式来修改数值。滑块部件由三个部分组成：主体背景（LV_PART_MAIN）、指示器（LV_PART_INDICATOR）和 旋钮（LV_PART_KNOB）。
LVGL 官方提供了一些与滑块部件相关 API。
lv_obj_t * lv_slider_create(lv_obj_t * parent); // 创建滑块部件
static inline void lv_slider_set_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim); // 设置当前值
static inline int32_t lv_slider_get_value(const lv_obj_t * obj); // 获取当前值
static inline void lv_slider_set_left_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim); // 设置左侧旋钮的值
static inline int32_t lv_slider_get_left_value(const lv_obj_t * obj); // 获取左侧旋钮的值
static inline void lv_slider_set_range(lv_obj_t * obj, int32_t min, int32_t max); // 设置范围值
static inline int32_t lv_slider_get_min_value(const lv_obj_t * obj); // 获取最小值
static inline int32_t lv_slider_get_max_value(const lv_obj_t * obj); // 获取最大值
static inline void lv_slider_set_mode(lv_obj_t * obj, lv_slider_mode_t mode); // 设置模块部件的模式
static inline lv_slider_mode_t lv_slider_get_mode(lv_obj_t * slider); // 获取滑块部件的模式
bool lv_slider_is_dragged(const lv_obj_t * obj); // 判断滑块是否被拖动
我们可以用 lv_slider_create() 函数 创建滑块部件。
/**
* @brief 创建滑块部件
*
* @param parent 指向父部件的指针
* @return lv_obj_t* 指向滑块部件的指针
*/
lv_obj_t * lv_slider_create(lv_obj_t * parent);
在创建完滑块部件后，我们可以通过 lv_obj_set_size() 函数 设置部件的尺寸，来决定滑块是水平滑块还是垂直滑块。当进度条的 宽度大于高度 时，进度条为 水平滑块，当进度条的 高度大于宽度 时，进度条为 垂直滑块。
/**
* @brief 设置部件的尺寸
*
* @param obj 指向部件的指针
* @param w 要设置的宽度值
* @param h 要设置的高度值
*/
void lv_obj_set_size(lv_obj_t * obj, int32_t w, int32_t h);
默认情况下，滑块部件被创建出来后，它的当前值是 0，范围值是 0~100。如果用户需要设置范围值，可以调用 lv_slider_set_range() 函数。
/**
* @brief 设置范围值
*
* @param obj 指向滑块部件的指针
* @param min 滑块的最小值
* @param max 滑块的最大值
*/
static inline void lv_slider_set_range(lv_obj_t * obj, int32_t min, int32_t max);
如果用户需要设置当前值，可调用 lv_slider_set_value() 函数。
/**
* @brief 设置当前值
*
* @param obj 指向滑块部件的指针
* @param value 滑块当前值
* @param anim LV_ANIM_ON: 启用动画; LV_ANIM_OFF: 不启用动画
*/
static inline void lv_slider_set_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim);
我们可以使用 lv_slider_set_mode() 函数设置滑块的模式。
/**
* @brief 设置滑块部件的模式
*
* @param obj 指向滑块部件的指针
* @param mode 要设置的滑块模式
*/
static inline void lv_slider_set_mode(lv_obj_t * obj, lv_slider_mode_t mode);
当我们使用 lv_slider_set_mode() 函数 设置进度条模式 时，有以下几种可选值：
enum _lv_slider_mode_t {
LV_SLIDER_MODE_NORMAL = LV_BAR_MODE_NORMAL, // 默认模式
LV_SLIDER_MODE_SYMMETRICAL = LV_BAR_MODE_SYMMETRICAL, // 零值绘制到当前值，当前值可以小于0
LV_SLIDER_MODE_RANGE = LV_BAR_MODE_RANGE // 允许设置起始值，但起始值必须小于当前值
};
默认情况下，用户可以通过拖动旋钮或者单击滑块的方式来调整指示器位置，而后者可能会导致当前值的突变，这在某些情景下是不允许出现的。如果用户想禁用单击调整当前值，可调用以下函数：
lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST); // 禁用单击调整当前值
进度条的 宽度大于高度 时，进度条为 水平滑块，当进度条的 高度大于宽度 时，进度条为 垂直滑块。
二、实验例程
#include "lvgl.h"
#include "lv_port_disp_template.h"
#include "lv_port_indev_template.h"
lv_obj_t *label;
int main(void)
{
HAL_Init();
System_Clock_Init(8, 336, 2, 7);
Delay_Init(168);
SPI_Simulate_Init();
// SRAM_Init();
TIM_Base_Init(&g_tim6_handle, TIM6, 83, 999);
__HAL_TIM_CLEAR_IT(&g_tim6_handle, TIM_IT_UPDATE); // 清除更新中断标志位
HAL_TIM_Base_Start_IT(&g_tim6_handle); // 使能更新中断，并启动计数器
lv_init();
lv_port_disp_init();
lv_port_indev_init();
// 测试代码
label = lv_label_create(lv_scr_act()); // 创建标签部件
lv_obj_set_align(label, LV_ALIGN_TOP_MID); // 设置标签部件靠上居中对齐
lv_obj_set_style_text_font(label, &lv_font_montserrat_30, LV_PART_MAIN); // 设置标签部件的字体样式
lv_label_set_text(label, "slider test"); // 设置标签部件的文本
lv_obj_t *slider = lv_slider_create(lv_scr_act()); // 创建滑块部件
lv_obj_center(slider); // 滑块居中显示
lv_obj_set_size(slider, 20, 230); // 设置滑块部件的尺寸
lv_slider_set_range(slider, -100, 100); // 设置滑块部件的范围
lv_slider_set_value(slider, 30, LV_ANIM_ON); // 设置滑块部件的值
lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE); // 设置滑块部件的模式
lv_slider_set_left_value(slider, -30, LV_ANIM_ON); // 设置左值
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
while (1)
{
lv_timer_handler();
Delay_ms(5);
}
return 0;
}
void slider_event_cb(lv_event_t *e)
{
lv_event_code_t code = lv_event_get_code(e); // 获取事件的触发类型
lv_obj_t *target = lv_event_get_target(e); // 获取事件的触发源
uint32_t left_value = 0, value = 0;
if (code == LV_EVENT_VALUE_CHANGED)
{
left_value = lv_slider_get_left_value(target); // 获取滑块部件的左值
value = lv_slider_get_value(target); // 获取滑块部件的值
lv_label_set_text_fmt(label, "left value %ld, value %ld", left_value, value);
}
}
