ESP32 LVGL8.1 ——slider 滑动条 (slider 22)

最新推荐文章于 2024-07-24 23:47:11 发布

请叫我啸鹏

最新推荐文章于 2024-07-24 23:47:11 发布

阅读量5.4k

点赞数 3

分类专栏： LVGL 成长笔记文章标签： gui

本文链接：https://blog.csdn.net/believe666/article/details/122193804

版权

LVGL 成长笔记专栏收录该内容

31 篇文章 189 订阅

订阅专栏

提示：本博客作为学习笔记，有错误的地方希望指正

文章目录

一、slider 简介
二、Slider API
三、示例

一、slider 简介

1.1概述 Overview

Slider对象看起来像一个带有旋钮的工具条。可以拖动该旋钮来设置一个值。滑块也可以是垂直的或水平的。滑动条在前面我们介绍img控件的时候有个历程有使用到，哪里我们讲述设置样式实现对滑动条的一些样式的设置。

1.2部分和风格 Parts and Styles

• LV_PART_MAIN 滑块的背景，它使用了所有典型的背景样式属性。填充使指示符在相应的方向上变小。
• LV_PART_INDICATOR 指示器显示滑块的当前状态。还使用了所有典型的背景样式属性。
• LV_PART_KNOB按当前值绘制的矩形(或圆)。它还使用所有典型的背景属性来描述旋钮。默认情况下，旋钮为方形(可选半径)，边长等于滑块的较小边。旋钮可以用填充值做得更大。填充值也可以是非对称的。

1.3使用 Usage

1.3.1值和范围 Value and range

使用lv_slider_set_value(slider, new_value, LV_ANIM_ON/OFF)设置初始值。动画时间由样式的anim_time属性设置。
要指定范围(最小值，最大值)，可以使用lv_slider_set_range(slider, min, max)。

1.3.2模式 Modes

滑块可以是以下方式之一:
• 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_…)

1.3.2旋钮模式 Knob-only mode

通常情况下，可以通过拖动旋钮或单击滑块来调整滑块。在后一种情况下，旋钮移动到单击的点，滑
块的值相应地改变。在某些情况下，最好将滑块设置为只在拖动旋钮时产生反应。这个特性是通过添加LV_OBJ_FLAG_ADV_HITTEST来启用的:lv_obj_add_flag(slider,LV_OBJ_FLAG_ADV_HITTEST)。

1.4事件 Events

• LV_EVENT_VALUE_CHANGED当滑块被拖动或用键更改时发送。当滑块被拖动时，事件被连续发送，
并且只有当它被释放时.才发送。使用lv_slider_is_dragged来决定是正在拖动还是刚刚释放slider。

1.5按键 Keys

• LV_KEY_UP/RIGHT将滑块的值增加1
• LV_KEY_DOWN/LEFT滑动条的值递减1

二、Slider 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 void lv_slider_set_left_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim)//滑块的左边旋钮设置一个新值
static inline void lv_slider_set_range(lv_obj_t * obj, int32_t min, int32_t max)			//设置一个bar的最小值和最大值
static inline void lv_slider_set_mode(lv_obj_t * obj, lv_slider_mode_t mode)				//设置滑块的模式。
static inline int32_t lv_slider_get_value(const lv_obj_t * obj)								//获取滑块的主旋钮的值
static inline int32_t lv_slider_get_left_value(const lv_obj_t * obj)						//获取滑块的左边旋钮的值
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 lv_slider_mode_t lv_slider_get_mode(lv_obj_t * slider)						//给滑块是被拖动或不

三、示例

3.1Slider 基本显示带有回调

lv_obj_t * slider_label;
/*************************************************
 *  函数名称 :  slider_show_event_cb
 *  参    数 ： 无
 *  函数功能 ： 事件回调
 *************************************************/
static void slider_show_event_cb(lv_event_t * e)
{
   lv_obj_t * slider = lv_event_get_target(e);
   char buf[8];
   lv_snprintf(buf,sizeof(buf),"%d%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);
}
/*************************************************
 *  函数名称 :  slider_show_1
 *  参    数 ： 无
 *  函数功能 ： slider显示
 *************************************************/
void slider_show_1()
{
   lv_obj_t * slider = lv_slider_create(lv_scr_act());   //创建滑动条对象
   lv_obj_center(slider);                                //居中显示
   lv_obj_add_event_cb(slider,slider_show_event_cb,LV_EVENT_VALUE_CHANGED,NULL); //设置回调显示
   lv_slider_set_value(slider,50,LV_ANIM_OFF);
   slider_label = lv_label_create(lv_scr_act());         //创建Label
   lv_label_set_text(slider_label,"0%");                 //设置label内容

   lv_obj_align_to(slider_label,slider,LV_ALIGN_OUT_BOTTOM_MID,0,10); //设置位置
}

在这里插入图片描述

3.2 Slider样式设置及其按下时候的动画

/*************************************************
 *  函数名称 :  slider_show_2
 *  参    数 ： 无
 *  函数功能 ： slider显示
 *************************************************/
void slider_show_2()
{
   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(0xbb));        //设置背景颜色
   lv_style_set_radius(&style_main,LV_RADIUS_CIRCLE);             //设置圆角
   lv_style_set_pad_ver(&style_main,-2);                          //设置上下边距

   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);                           //设置边距
   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));//设置背景颜色

   lv_obj_t * slider = lv_slider_create(lv_scr_act());            //创建滑块
   lv_obj_remove_style_all(slider);                               //移除所有样式

   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);                                         //居中显示
}

在这里插入图片描述

3.3 Slider模式设置显示

/*************************************************
 *  函数名称 :  slider_show_3_event_cb
 *  参    数 ： 无
 *  函数功能 ： 滑动回调显示
 *************************************************/
static void slider_show_3_event_cb(lv_event_t * e)
{
   lv_event_code_t code = lv_event_get_code(e);                   //获取事件code
   lv_obj_t * obj = lv_event_get_target(e);                       //获取事件对象

   if(code == LV_EVENT_REFR_EXT_DRAW_SIZE){                       //获得对象周围所需的额外绘制区域(例如阴影)
      lv_coord_t * size = lv_event_get_param(e);                  //获取传递的参数
      * size = LV_MAX(*size,50);                                  //比较两个数谁最大
   }else if(code == LV_EVENT_DRAW_PART_END){                      //完成主绘图阶段
      lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);       //获取传递的参数
      if(dsc->part == LV_PART_INDICATOR){                         
         char buf[16];                                            //定义数组
         //打印数组
         lv_snprintf(buf,sizeof(buf),"%d = %d",(int)lv_slider_get_left_value(obj),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;  //计算x1的坐标 显示左坐标 + slider控件中间位置 - 文本尺寸x轴一半
         label_area.x2 = label_area.x1 + label_size.x;            //计算x2的坐标 x1 + 文本尺寸
         label_area.y2 = dsc->draw_area->y1 - 10;                 //文本的y1位置向下移动10
         label_area.y1 = label_area.y2 - label_size.y;            //y2的坐标加上文字的高度

         lv_draw_label_dsc_t label_draw_dsc;                      //创建绘制描述符
         lv_draw_label_dsc_init(&label_draw_dsc);                 //初始化绘制描述符
         lv_draw_label(&label_area,dsc->clip_area,&label_draw_dsc,buf,NULL);  //重绘显示内容
      }
   }
}
/*************************************************
 *  函数名称 :  slider_show_3
 *  参    数 ： 无
 *  函数功能 ： slider显示
 *************************************************/
void slider_show_3()
{
   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_show_3_event_cb,LV_EVENT_ALL,NULL); //设置回调
   lv_obj_refresh_ext_draw_size(slider);              //调用原始的事件处理器来刷新扩展的绘制大小的值。
}