ESP32 开发笔记(四）littleVGL LVGL控件学习 Bar 进度条控件

谁借莪１个温暖的怀抱￠ 2022-12-25 15:54 655阅读 0赞

先看效果，最高33帧，创建5个Bar进度条控件，演示不同颜色，方向，大小，带文字的使用方法  
ESP-IDF版本：V4.2  
littleVGL版本：V7.10.0

![20210215161447750.gif][]

开发板购买链接[https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674][https_item.taobao.com_item.htm_spm_a2oq0.12575281.0.0.50111deb2Ij1As_ft_t_id_626366733674]

# 一、[开发板简介][Link 1] #

# 二、[开发环境搭建 windows][windows] #

# **三、[基础示例][Link 2]** #

# 四、**LVGL控件使用示例** #

[LVGL\_Arc\_Test                                  圆弧指示器][LVGL_Arc_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Bar\_Test                                  Bar进度条控件][LVGL_Bar_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Bar]  
    LVGL\_Button\_Test                             通过5种不同动态效果的按钮学习按钮的创建与使用  
    LVGL\_ButtonMatrix\_Test                   创建一个计算器布局来演示矩阵按钮控件的使用  
    LVGL\_Calendar\_Test                         日历控件的创建和使用  
    LVGL\_Canvas\_Test                           透明画布和画一个圆角过渡色矩形并旋转角度学习画布的使用  
    LVGL\_Chart\_Test                               通过创建三个不同风格的图表来学习图表控件的使用  
    LVGL\_Checkbox\_Test                        学习复选框控件的创建和使用  
    LVGL\_ColorPicker\_Test                     创建一个颜色选择器并动态显示当前颜色的RGB值  
    LVGL\_Container\_Test                        在内容控件上动态创建三个文本标签学习内容控件的自适应布局  
    LVGL\_Drop\_down\_List\_Test              创建三个不同类型的下拉选择控件  
    LVGL\_Gauge\_Test                             创建一个动态仪表和静态多指针仪表  
    LVGL\_Image\_Test                              通过四个滑动条控件控制图片颜色的变化来学习图像控件的使用  
    LVGL\_ImageButton\_Test                  创建一个图片背景的图像按钮  
    LVGL\_Keyboard\_Test                       通过一个文本输入框控件还学习键盘控件的调用关闭设置  
    LVGL\_Label\_Test                              创建内容颜色可变，长文本滚动展示，带阴影3D效果三个标签控件  
    LVGL\_LED\_Test                                创建三个LED，学习LED控件的调光，颜色，开关的设置  
    LVGL\_Line\_Test                                通过二维数组创建一段折线来演示线控件的使用  
    LVGL\_LineMeter\_Test                      创建两个不同的线段弧形指示器动态展示数据  
    LVGL\_List\_Test                                 创建一个带图标的列表控件  
    LVGL\_MessageBox\_Test                  创建一个带按钮的消息框控件  
    LVGL\_ObjectMask\_Test                    创建一个变幻色的文本学习蒙版遮罩效果  
    LVGL\_Page\_Test                            学习页面控件的使用  
    LVGL\_Roller\_Test                           通过示例学习滑动列表选择器控件  
    LVGL\_Slider\_Test                           创建一个单向和一个双向滑动条控件  
    LVGL\_Spinbox\_Test                        学习微调控件的使用  
    LVGL\_Spinner\_Test                        创建三个不同的环形加载器  
    LVGL\_Switch\_Test                          创建两个不同的开关控件  
    LVGL\_Table\_Test                            创建一个简单的表格  
    LVGL\_Tabview\_Test                       实现三页的页面切换学习Tabview控件  
    LVGL\_Textarea\_Test                       长按实现打字机效果的Textarea控件  
    LVGL\_Tileview\_Test                        实现四面环形触摸切换的Tileview控件  
    LVGL\_Window\_Test                        创建一个窗口，带设置子窗口学习窗口控件的使用

# 1、Bar控件简介 #

Bar控件对象上有一个背景和一个指示器。 指示器的宽度根据条的当前值进行设置。如果对象的宽度小于其高度，则可以创建垂直Bar。不仅可以设置结束值，还可以设置Bar的起始值，从而改变指示器的起始位置。

# 2、Bar控件成员函数 #

创建Bar控件：lv\_obj\_t \*lv\_bar\_create(lv\_obj\_t \*par, constlv\_obj\_t \*copy)  
说明：创建一个Bar进度控件  
输入：父指针，继承对象  
返回：创建好的控件指针

设置Bar的值：void lv\_bar\_set\_value(lv\_obj\_t \*bar, int16\_t value, lv\_anim\_enable\_tanim)  
说明：为指定的Bar控件设置一个新值  
输入：要设置的Bar对象指针，新的值，是否以动画方式改变：LV\_ANIM\_ON / LV\_ANIM\_OFF

设置Bar开始值：void lv\_bar\_set\_start\_value(lv\_obj\_t \*bar, int16\_t start\_value, lv\_anim\_enable\_tanim)  
说明：为指定的Bar控件设置开始的值  
输入：要设置的Bar对象指针，开始值，是否以动画方式改变：LV\_ANIM\_ON / LV\_ANIM\_OFF

设置Bar开始值：void lv\_bar\_set\_range(lv\_obj\_t \*bar, int16\_t min, int16\_t max)  
说明：为指定的Bar控件设置一个范围值  
输入：要设置的Bar对象指针，最小值，最大值

设置Bar类型：void lv\_bar\_set\_type(lv\_obj\_t \*bar, lv\_bar\_type\_ttype)  
说明：为指定的Bar控件设置类型  
输入：要设置的Bar对象指针，类型：LV\_BAR\_TYPE\_NORMAL，LV\_BAR\_TYPE\_SYMMETRICAL，LV\_BAR\_TYPE\_CUSTOM

设置Bar类型：void lv\_bar\_set\_anim\_time(lv\_obj\_t \*bar, uint16\_t anim\_time)  
说明：为指定的Bar控件设置动画时间  
输入：要设置的动画时间长度

还有几个 get 获取类型的 API 接口我这里就不列举出来了,比较简单的，具体查看官方文档（有些网络打不开）或网盘中的离线文档

# 3、代码编写 #

创建三个不同颜色的Bar控件，垂直分布

// 在容器中创建一个Bar1控件
    	lv_obj_t * bar1 = lv_bar_create(cont, NULL);
    	lv_obj_set_size(bar1, 15, 200);					// 控件尺寸
    	lv_obj_align(bar1, NULL, LV_ALIGN_IN_LEFT_MID, 20, 0);// 对齐到中心，X轴偏移20
    	lv_bar_set_anim_time(bar1, 5000);				// 设置动画时间ms
    	lv_bar_set_start_value(bar1,10,LV_ANIM_OFF);	// 设置开始值，非动画方式
    	lv_bar_set_range(bar1,0,1000);					// 设置范围，最小值，最大值
    	lv_bar_set_type(bar1,LV_BAR_TYPE_NORMAL);		// 设置控件类型
    	lv_bar_set_value(bar1, 900, LV_ANIM_ON);		// 设置新值，动画方式
    	// 通过设置本地风格 LV_ARC_PART_INDIC 指示器的样式
    	lv_obj_set_style_local_bg_color(bar1, LV_BAR_PART_INDIC , LV_STATE_DEFAULT , LV_COLOR_ORANGE);// 设置弧形控件前景色颜色
    
    	// 在容器中创建一个Bar2控件
    	lv_obj_t * bar2 = lv_bar_create(cont, NULL);
    	lv_obj_set_size(bar2, 15, 200);					// 控件尺寸
    	lv_obj_align(bar2, NULL, LV_ALIGN_IN_LEFT_MID, 40, 0);// 对齐到中心，X轴偏移40
    	lv_bar_set_anim_time(bar2, 3000);				// 设置动画时间ms
    	lv_bar_set_start_value(bar2,10,LV_ANIM_OFF);	// 设置开始值，非动画方式
    	lv_bar_set_range(bar2,0,1000);					// 设置范围，最小值，最大值
    	lv_bar_set_type(bar2,LV_BAR_TYPE_NORMAL);		// 设置控件类型
    	lv_bar_set_value(bar2, 900, LV_ANIM_ON);		// 设置新值，动画方式
    	// 通过设置本地风格 LV_ARC_PART_INDIC 指示器的样式
    	lv_obj_set_style_local_bg_color(bar2, LV_BAR_PART_INDIC , LV_STATE_DEFAULT , LV_COLOR_BLUE);// 设置弧形控件前景色颜色
    
    	// 在容器中创建一个Bar3控件
    	lv_obj_t * bar3 = lv_bar_create(cont, NULL);
    	lv_obj_set_size(bar3, 15, 200);					// 控件尺寸
    	lv_obj_align(bar3, NULL, LV_ALIGN_IN_LEFT_MID, 60, 0);// 对齐到中心，X轴偏移60
    	lv_bar_set_anim_time(bar3, 1000);				// 设置动画时间ms
    	lv_bar_set_start_value(bar3,10,LV_ANIM_OFF);	// 设置开始值，非动画方式
    	lv_bar_set_range(bar3,0,1000);					// 设置范围，最小值，最大值
    	lv_bar_set_type(bar3,LV_BAR_TYPE_NORMAL);		// 设置控件类型
    	lv_bar_set_value(bar3, 900, LV_ANIM_ON);		// 设置新值，动画方式
    	// 通过设置本地风格 LV_ARC_PART_INDIC 指示器的样式
    	lv_obj_set_style_local_bg_color(bar3, LV_BAR_PART_INDIC , LV_STATE_DEFAULT , LV_COLOR_GREEN);// 设置弧形控件前景色颜色

创建一个自定义尺寸的默认风格的Bar控件，水平布局

// 在容器中创建一个Bar4控件
    	lv_obj_t * bar4 = lv_bar_create(cont, NULL);
    	lv_obj_set_size(bar4, 200, 20);					// 控件尺寸
    	lv_obj_align(bar4, NULL, LV_ALIGN_CENTER, 30, -50);// 对齐到中心
    	lv_bar_set_anim_time(bar4, 5000);				// 设置动画时间ms
    	lv_bar_set_start_value(bar4,10,LV_ANIM_OFF);	// 设置开始值，非动画方式
    	lv_bar_set_range(bar4,0,1000);					// 设置范围，最小值，最大值
    	lv_bar_set_type(bar4,LV_BAR_TYPE_NORMAL);		// 设置控件类型
    	lv_bar_set_value(bar4, 900, LV_ANIM_ON);		// 设置新值，动画方式

创建一个Bar控件，并使用LV任务来动态改变值

// 在容器中创建一个Bar5控件
    	lv_obj_t * bar5 = lv_bar_create(cont, NULL);
    	// 设置控件宽度
    	lv_obj_set_width(bar5, 190);
    	// 设置本地属性->字体
    	lv_obj_set_style_local_value_font(bar5, LV_BAR_PART_BG, LV_STATE_DEFAULT, lv_theme_get_font_small());
    	// 设置本地属性->对齐
    	lv_obj_set_style_local_value_align(bar5, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_ALIGN_OUT_BOTTOM_MID);
    	// 设置本地属性->Y轴偏移
    	lv_obj_set_style_local_value_ofs_y(bar5, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_DPI / 20);
    	// 设置本地属性->底部边距
    	lv_obj_set_style_local_margin_bottom(bar5, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_DPI / 7);
    	// 设置对象对齐，中心对齐Y轴偏移10
    	lv_obj_align(bar5, NULL, LV_ALIGN_CENTER, 30, 20);
    	// 创建一个任务改变Bar进度值，参数传入Bar对象
    	lv_task_create(bar_anim, 100, LV_TASK_PRIO_LOW, bar5);

LV任务函数

// bar任务
    static void bar_anim(lv_task_t * t)
    {
    	static uint32_t x = 0;				// 静态变量Bar可变值
    	lv_obj_t * bar = t->user_data;		// 从任务参数中获取bar对象
    	static char buf[64];
    	lv_snprintf(buf, sizeof(buf), "Copying Files %d / %d", x, lv_bar_get_max_value(bar));// 创建字符串
    	lv_obj_set_style_local_value_str(bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, buf);// 显示字符串
    	lv_bar_set_value(bar, x, LV_ANIM_OFF);				// 设置值，关闭动画
    	lv_obj_align(bar, NULL, LV_ALIGN_CENTER, 30, 20);	// 重新设置对齐
    	x++;
    	if(x > lv_bar_get_max_value(bar)) x = 0;			// 超过范围，从0开始
    }

觉得文章写的不错，欢迎大家点赞，关注，一键三连，你们的支持是我写下去的动力

[20210215161447750.gif]: /images/20221120/11dd1b3fb9664ac6aa55463a175d9ea3.png
[https_item.taobao.com_item.htm_spm_a2oq0.12575281.0.0.50111deb2Ij1As_ft_t_id_626366733674]: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674
[Link 1]: https://blog.csdn.net/cnicfhnui/article/details/108343442
[windows]: https://blog.csdn.net/cnicfhnui/article/details/108405073
[Link 2]: https://blog.csdn.net/cnicfhnui/article/details/108372259
[LVGL_Arc_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110482844
[LVGL_Bar_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Bar]: https://hellobug.blog.csdn.net/article/details/110491549