目的

学习理解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);
}