目的
学习理解slider功能模块。
功能描述
滑块和bar类似。可以用于描述一个事件、容量等的进度状态。可以用于显示一些检测的值,如压力,温度,完成任务,速度等;也可以用于和input类设备联合滑动修改某些值。
和bar相比,他是主动控件。
一个slider,有三个部分组成。背景(可以理解成画板),滑条内背景(指示器),滑块划过的实质滑条。详细可以通过案列来理解。用户可以分别配置这三个部分的颜色风格。
模块创建步骤以及函数描述
步骤
要创建一个slider,所需要的步骤如下:
- 创建一个slider;
- 配置其范围、当前值、显示尺寸,显示位置;
- 配置其三个部分的风格;
- 配置其事件处理函数;
- 配置一个文本标签,并在初始化初始为当前值,在其slider改变事件中同步修改此标签的值;
函数描述
-
模块创建
lv_obj_t *lv_slider_create(lv_obj_t *par, constlv_obj_t *copy)
-
模块值配置
static void lv_slider_set_value(lv_obj_t *slider, int16_t value, lv_anim_enable_t anim)
value:新值;
anim:LV_ANIM_ON:动态开启;LV_ANIM_OFF:动态关闭,默认状态,立刻改变
int16_t lv_slider_get_value(constlv_obj_t *slider)//获取当前值
-
模块值的有效范围
static void lv_slider_set_range(lv_obj_t *slider, int16_t min, int16_t max)
static int16_t lv_slider_get_min_value(constlv_obj_t *slider)
static int16_t lv_slider_get_max_value(constlv_obj_t *slider)
-
设置其风格
void lv_slider_set_style(lv_obj_t *slider, lv_slider_style_t type, const lv_style_t *style)
const lv_style_t *lv_slider_get_style(constlv_obj_t *slider, lv_slider_style_t type)
type:
LV_SLIDER_STYLE_BG//背景
LV_SLIDER_STYLE_INDIC//滑条方向,即滑条导轨
LV_SLIDER_STYLE_KNOB//有效滑条
- 设置动态时间
static void lv_slider_set_anim_time(lv_obj_t *slider, uint16_t anim_time)
案例以及代码
实现一个slider。配置slider的3个部件的风格。并设置其范围,当其滑动时,同步修改对应label值。具体代码如下:
#include "ljy_slider.h"
#include "lvgl/lvgl.h"
#include <stdio.h>
static lv_obj_t * slider_label;
static void SliderEventCb(lv_obj_t * slider, lv_event_t event)
{
if(event == LV_EVENT_VALUE_CHANGED) {
char buf[4];
snprintf(buf, 4, "%u", lv_slider_get_value(slider));
lv_label_set_text(slider_label, buf);//动态跟随滑杆变化
}
}
void DrawSlider()
{
//1. 创建一个slider
lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(slider,SliderEventCb);
lv_slider_set_range(slider, 0, 100);//范围
lv_obj_set_width(slider, LV_DPI * 2);//宽度,即长度
lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0);//显示位置
static lv_style_t style_bg;//背景
static lv_style_t style_indic;//滑调
static lv_style_t style_knob;//滑块
//背景风格黑底,褐色渐变,圆边,白框
lv_style_copy(&style_bg, &lv_style_pretty);
style_bg.body.main_color = LV_COLOR_BLACK;
style_bg.body.grad_color = LV_COLOR_PURPLE;
style_bg.body.radius = LV_RADIUS_CIRCLE;
style_bg.body.border.color = LV_COLOR_GREEN;
//竖条
lv_style_copy(&style_indic, &lv_style_pretty_color);
style_indic.body.radius = LV_RADIUS_CIRCLE;
style_indic.body.shadow.width = 38;//虚影
style_indic.body.shadow.color = style_indic.body.main_color = LV_COLOR_BLUE;//和滑条颜色一样,滑条和虚影都会红色
style_indic.body.padding.left = 13;//相对于背景的左边起始点
style_indic.body.padding.right = 3;//相对于背景的右边
style_indic.body.padding.top = 2;//相对于背景的高
style_indic.body.padding.bottom = 3;//相对于背景的底
//滑块和有效区风格
lv_style_copy(&style_knob, &lv_style_pretty);
style_knob.body.radius = LV_RADIUS_CIRCLE;//最大弧度
style_knob.body.opa = LV_OPA_70;//透明度
// style_knob.body.padding.top = 0 ;
// style_knob.body.padding.bottom = 0 ;
style_indic.body.main_color = LV_COLOR_GREEN;
//配置背景
lv_slider_set_style(slider, LV_SLIDER_STYLE_BG, &style_bg);
lv_slider_set_style(slider, LV_SLIDER_STYLE_INDIC,&style_indic);
lv_slider_set_style(slider, LV_SLIDER_STYLE_KNOB, &style_knob);
//创建显示的label
slider_label = lv_label_create(lv_scr_act(), NULL);
char buf[4];
snprintf(buf, 4, "%u", lv_slider_get_value(slider));
lv_label_set_text(slider_label, buf);
lv_obj_set_auto_realign(slider_label, true);
lv_obj_align(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
lv_slider_set_knob_in(slider, false);
}
结果