威三电子  

               威三电子

使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十三讲)

2026-07-15 09:17:36

浏览:

这一期我们讲解lvgl中滑动条控件的基础使用,滑动条像是进度条(bar)与按键旋钮的结合体,拖动旋钮可以设置滑块的值,其中滑块与进度条一样可以设置垂直与水平的方


         这一期我们讲解lvgl中滑动条控件的基础使用,滑动条像是进度条(bar)与按键旋钮的结合体,拖动旋钮可以设置滑块的值,其中滑块与进度条一样可以设置垂直与水平的方向。

         滑块的部件由三个模块组成,分别是背景(main)、指示器(indicator)、旋钮(knob),具体如下图所示:

        

1LV_PART_MAIN :使用典型的背景样式属性,设padding属性会使指示器在相应方向上变小。

2LV_PART_INDICATOR :使用典型的背景样式属性。

3LV_PART_KNOB :使用典型的背景属性。默认情况下,旋钮是圆形的(半径样式可对此进行修改),其边长等于滑块较小的那个尺寸。可以通过 padding值使旋钮变大。内边距的值也可以是非对称的。

 

(1)       设置滑块的当前值与范围

 

一旦创建了一个滑块(Slider),它具有以下属性:

· 值(value)等于 0

· 默认范围是 [0..100]

· 水平方向,且

· 默认宽度大约为 2 英寸(依据 LV_DPI_DEFC 语言宏)配置的值而定),

· 默认高度大约为 1/10 英寸(依据 LV_DPI_DEFC 语言宏)配置的值而定)。

 

若要设置不同的值,可使用以下方法:

· lv_slider_set_value(slider, new_value, LV_ANIM_ON/OFF)`(动画时间由样式的 ``anim_time` 属性设置);

· lv_slider_set_range(slider, min, max);以及

对于方向、宽度和高度,只需设置宽度和高度样式属性即可; - lv_bar_set_orientation(slider, orientation)`可覆盖由 ``width`  height 所决定的方向。 

orientation 的有效值如下:

· LV_BAR_ORIENTATION_AUTO,

· LV_BAR_ORIENTATION_HORIZONTAL,

· LV_BAR_ORIENTATION_VERTICAL.

默认的绘制方向在水平方向上是从左到右,在垂直方向上是从下到上。如果***小值被设置得大于***值(例如 [100..0]),那么绘制方向将会反转。

 

(2)       滑块模式

 

滑动条可以是以下模式之一:

[1] LV_SLIDER_MODE_NORMAL :像上面说的普通情况

[2] LV_SLIDER_SYMMETRICAL :这个模式下可以指定负的***小范围。但是只能从零值到当前值绘制指示器。

[3] LV_SLIDER_RANGE 在这个模式下也可以指定负的***小范围。这样滑动条的起始值可以不是0,使用 lv_bar_set_start_value(bar, new_value, LV_ANIM_ON / OFF) 设置起始值。要注意设置的起始值必须小于结束值。

可以使用 lv_slider_set_mode(slider, LV_SLIDER_MODE_...) 更改模式。

 

还有一种拓展模式,在某些情况下,需要将滑动条设置为仅对拖动旋钮做出反应,可以通过添加 LV_OBJ_FLAG_ADV_HITTEST lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST) 来启用此功能。

扩展的单击区域( lv_obj_set_ext_click_area(slider, value) 设置)增加到旋钮的单击区域。

 

下一期将讲解滑动条的事件以及具体的使用代码。


本文章由威三学院出品

对课程感兴趣可以私信联系

0
使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十三讲)
这一期我们讲解lvgl中滑动条控件的基础使用,滑动条像是进度条(bar)与按键旋钮的结合体,拖动旋钮可以设置滑块的值,其中滑块与进度条一样可以设置垂直与水平的方
长按图片保存/分享

北京威三电子科技有限公司

突破技术壁垒,芯创智联领航未来

 


北京威三电子科技有限公司 版权所有
京ICP备2026012969号
 

热线:

159-2199-9232

 

图片展示

淘宝店铺:

威三科教

地址:

北京市延庆区辰龙国际6号楼406室

微信公众号:

北京威三电子科技有限公司 

热线:159-2199-9232

淘宝店铺:威三科教

地址:北京市延庆区辰龙国际6号楼406


微信公众号

图片展示
北京威三电子科技有限公司 版权所有| 京ICP备2026012969号
微信公众号
客服中心
热线电话
15921999232
上班时间
周一到周五
二维码
扫码关注
客服中心
热线电话
15921999232
上班时间
周一到周五
二维码
扫码关注
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功!
添加微信好友,详细了解产品
我知道了