先看效果，创建了两个Arc 弧形控件，一个可触摸拖动的默认风格，一个动画控制的自定义风格的弧形控件

ESP-IDF版本：V4.2

littleVGL版本：V7.10.0

开发板购买链接/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674

一、开发板简介

二、开发环境搭建 windows

三、基础示例

四、LVGL控件使用示例

LVGL_Arc_Test 圆弧指示器通过触摸动态改变值

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、Arc控件简介

弧（lv_arc）

弧控件由背景弧和前景弧组成。 两者都可以具有起始角度和终止角度以及厚度。

可以作为传感器参数指示（无触控）或一些限值的调整（带触控）

2、Arc控件成员函数

创建Arc控件

lv_obj_t * lv_arc_create（lv_obj_t * par，constlv_obj_t * copy）

返回参数：指向创建好的弧控件的对象指针

参数：par：指向对象的指针，它将是新弧的父对象，比如在主屏幕上创建则写主屏幕的对象指针，在一个Page控件上创建一个Arc那就填Page对象指针

copy：这里的意思是从指定对象复制创建继承对象的参数设置，如果创建多个相同设置的控件可以直接以copy方式创建，就不会再设置参数了，如果没有直接写NULL

设置起始角度

注意：0度：在右边，就是正向13点方向，90度在正向6点方向，就是从1点钟方向顺时针

void lv_arc_set_start_angle（lv_obj_t * arc，uint16_t start）

参数：arc：指向弧对象的指针

start：开始角度

设置结束角度

注意：0度：在右边，就是正向13点方向，90度在正向6点方向，就是从1点钟方向顺时针

void lv_arc_set_end_angle（lv_obj_t * arc，uint16_t end）

参数：arc：指向弧对象的指针

end：开始角度

设置起始结束角度

void lv_arc_set_angles（lv_obj_t * arc，uint16_t start，uint16_t end）

参数：arc：指向弧对象的指针

start：开始角度

end：结束角度

设置弧形背景的起始角度

void lv_arc_set_bg_start_angle（lv_obj_t * arc，uint16_t start）

参数：arc：指向弧对象的指针

start：开始角度

设置弧形背景的结束角度

void lv_arc_set_bg_end_angle（lv_obj_t * arc，uint16_t end）

参数：arc：指向弧对象的指针

end：结束角度

设置弧形背景的开始和结束角度

void lv_arc_set_bg_angles（lv_obj_t * arc，uint16_t start，uint16_t end）

参数：arc：指向弧对象的指针

start：开始角度

end：结束角度

设置整个圆弧的旋转角度

void lv_arc_set_rotation（lv_obj_t * arc，uint16_t rotation_angle）

参数：arc：指向弧对象的指针

rotation_angle：旋转角度

设置圆弧的类型

void lv_arc_set_type（lv_obj_t * arc，lv_arc_type_ttype）

参数：arc：指向弧对象的指针

type：弧形类型

弧形类型包括：

LV_ARC_TYPE_NORMAL

LV_ARC_TYPE_SYMMETRIC

LV_ARC_TYPE_REVERSE

在圆弧上设置一个值

void lv_arc_set_value（lv_obj_t * arc，int16_t value）

参数：arc：指向弧对象的指针

value：值

设置圆弧的值范围

void lv_arc_set_range（lv_obj_t * arc，int16_t min，int16_t max）

参数：arc：指向弧对象的指针

min：最小值

max：最大值

设置圆弧旋转增量位置的阈值

void lv_arc_set_chg_rate（lv_obj_t * arc，uint16_t threshold）

参数：arc：指向弧对象的指针

threshold：增量阈值

设置圆弧是否可调

void lv_arc_set_adjustable（lv_obj_t * arc，bool adjustable）

参数：arc：指向弧对象的指针

adjustable：圆弧是否触控拖动改变角度

获取圆弧的起始角度

uint16_t lv_arc_get_angle_start（lv_obj_t * arc）

返回：起始角度[0..360]

参数：arc：指向弧对象的指针

获取圆弧的结束角度

uint16_t lv_arc_get_angle_end（lv_obj_t * arc）

返回：结束角度[0..360]

参数：arc：指向弧对象的指针

获取弧形背景的起始角度

uint16_t lv_arc_get_bg_angle_start（lv_obj_t * arc）

返回：起始角度[0..360]

参数：arc：指向弧对象的指针

获取弧形背景的结束角度

uint16_t lv_arc_get_bg_angle_end（lv_obj_t * arc）

返回：结束角度[0..360]

参数：arc：指向弧对象的指针

获取圆弧的类型

lv_arc_type_t lv_arc_get_type（constlv_obj_t * arc）

返回：弧形类型，具体看上面的“设置圆弧的类型”

参数：arc：指向弧对象的指针

获取圆弧的当前值

int16_t lv_arc_get_value（constlv_obj_t * arc）

返回：弧的当前值

参数：arc：指向弧对象的指针

获得圆弧的最小值

int16_t lv_arc_get_min_value（constlv_obj_t * arc）

返回：圆弧的最小值

参数：arc：指向弧对象的指针

获取圆弧的最大值

int16_t lv_arc_get_max_value（constlv_obj_t * arc）

返回：圆弧的最大值

参数：arc：指向弧对象的指针

获取圆弧是否正在拖动

bool lv_arc_is_dragged（constlv_obj_t * arc）

返回：true：正在拖动false：没拖动

参数：arc：指向弧对象的指针

获取圆弧是否触控拖动可调

bool lv_arc_get_adjustable（lv_obj_t * arc）

返回：圆弧是否可以拖动

参数：arc：指向弧对象的指针

3、代码编写

创建一个普通可拖动改变其值的Arc控件

//创建一个触摸拖动改变其值的Arc弧形控件//lv_obj_t * scr = lv_disp_get_scr_act(NULL);// 返回屏幕的对象指针lv_obj_t * arc1 = lv_arc_create(scr, NULL);// 在屏幕上创建一个Arc控件//lv_arc_set_start_angle(arc1, 170);// 设置Arc1控件前景开始角度Arc 3点钟方向为0点 顺时针起//lv_arc_set_end_angle(arc1, 180);// 设置Arc1控件前景停止角度lv_arc_set_angles(arc1,135,10);// 设置Arc1控件进度开始结束角度 同lv_arc_set_start_angle/lv_arc_set_end_anglelv_obj_set_size(arc1, 150, 150);// 设置Arc1控件大小lv_obj_align(arc1, NULL, LV_ALIGN_CENTER, -75, 0);// 对齐到屏幕中心，X偏移-75，靠左，Y偏移0lv_arc_set_adjustable(arc1,true);// 设置控件可触摸调整结束角度//lv_arc_set_bg_start_angle(arc1, 135);// 设置Arc1控件背景开始角度Arc 3点钟方向为0点 顺时针起//lv_arc_set_bg_end_angle(arc1, 45);// 设置Arc1控件背景停止角度lv_arc_set_bg_angles(arc1,135,45);// 设置Arc1控件背景进度开始结束角度 lv_arc_set_bg_start_angle/lv_arc_set_bg_end_anglelv_obj_t * arc1_label = lv_label_create(arc1, NULL);// 在Arc1控件上创建一个标签lv_obj_align(arc1_label, arc1, LV_ALIGN_CENTER, 0, 0);// 标签对齐到Arc1控件中心lv_label_set_text(arc1_label, "Arc1");// 设置标签文本lv_obj_set_event_cb(arc1, arc_event_handler);// 为Arc1控件创建一个事件回调

触摸调整控件的值事件回调函数

// Arc事件回调函数static void arc_event_handler(lv_obj_t * obj, lv_event_t event){int angle = 0;// 改变的角度值if(event == LV_EVENT_CLICKED) {// 控件上单击事件ESP_LOGI(TAG, "arc_event_handler->Arc Clicked\n");}else if(event == LV_EVENT_VALUE_CHANGED) {// 角度改变事件，手触摸/拖动进度条angle = lv_arc_get_angle_end(obj);// 获取事件对象改变的角度static char buf[8];lv_snprintf(buf, sizeof(buf), "Arc %d", angle);// 将值变为字符串lv_obj_t * label = lv_obj_get_child(obj, NULL);// 获取事件对象的标签子对象lv_label_set_text(label, buf);// 设置标签文本lv_obj_align(label, obj, LV_ALIGN_CENTER, 0, 0);// 标签文件有改变要重新设置对齐ESP_LOGI(TAG, "arc_event_handler->Value_Changed:%d\n",angle);}}

再创建一个通过动画动态改变值的Arc弧形控件

先创建一个动画，并初始化

// 创建一个动画lv_anim_t anim;lv_anim_init(&anim);// 初始化动画lv_anim_set_time(&anim, 4000);// 设置动画时间4秒lv_anim_set_playback_time(&anim, 1000);// 设置动画回放时间1秒lv_anim_set_repeat_count(&anim, LV_ANIM_REPEAT_INFINITE);// 设置动画无限重复

创建一风格，用来改变弧形控件的颜色等样式

// 给arc2创建一个风格改变它的颜色static lv_style_t style_arc;// 定义一个风格lv_style_init(&style_arc);// 初始化风格lv_style_set_line_color(&style_arc, LV_STATE_DEFAULT, LV_COLOR_ORANGE);// 弧形背景色lv_style_set_line_width(&style_arc, LV_STATE_DEFAULT, 20);// 弧形背景宽度lv_style_set_line_rounded(&style_arc, LV_STATE_DEFAULT, 1);// 线头是否圆头结束lv_style_set_line_opa(&style_arc, LV_STATE_DEFAULT, LV_OPA_30);// 弧形背景色透明度

创建一个弧形控件，并在控件中心创建一个标签用来显示其值

// 创建弧形控件lv_obj_t * arc2 = lv_arc_create(scr, NULL);// 在屏幕上创建一个Arc控件lv_arc_set_angles(arc2,45,315);// 设置Arc1控件进度开始结束角度 同lv_arc_set_start_angle/lv_arc_set_end_anglelv_obj_set_size(arc2, 150, 150);// 设置Arc1控件大小lv_obj_align(arc2, NULL, LV_ALIGN_CENTER, 75, 0);// 对齐到屏幕中心，X偏移75，靠右，Y偏移0lv_arc_set_adjustable(arc2,false);// 设置控件不可触摸调整结束角度lv_arc_set_bg_angles(arc2,45,315);// 设置Arc1控件背景进度开始结束角度 lv_arc_set_bg_start_angle/lv_arc_set_bg_end_anglelv_arc_set_rotation(arc2,90);lv_obj_t * arc2_label = lv_label_create(arc2, NULL);// 在Arc1控件上创建一个标签lv_obj_align(arc2_label, arc2, LV_ALIGN_CENTER, 0, 0);// 标签对齐到Arc1控件中心lv_label_set_text(arc2_label, "Arc2");// 设置标签文本

给弧形控件添加刚刚创建的样式，并应用本地样式修改控件的弧形颜色

lv_obj_add_style(arc2, LV_BTN_PART_MAIN, &style_arc);// 为弧形控件添加上面创建的风格效果lv_obj_set_style_local_line_color(arc2, LV_ARC_PART_INDIC,LV_STATE_DEFAULT , LV_COLOR_ORANGE);// 设置弧形控件前景色颜色

设置动画的动画对象，回调函数，设置动画值范围并开始动画

// 设置动画参数lv_anim_set_var(&anim, arc2);// 设置动画对象为arc2lv_anim_set_exec_cb(&anim, (lv_anim_exec_xcb_t)arc_anim);// 设置动画回调函数lv_anim_set_values(&anim, 45, 315);// 设置动画值范围lv_anim_start(&anim);// 开始动画

编写动画回调函数

// 动画回调事件处理函数：回调控件对象，动画的值static void arc_anim(lv_obj_t * arc, lv_anim_value_t value){lv_arc_set_end_angle(arc, value);// 设置弧形控件的结束角度static char buf[64];lv_snprintf(buf, sizeof(buf), "%d", value);// 字符化数值lv_obj_t * label = lv_obj_get_child(arc, NULL);// 获取弧形控件中的子对象，即label对象lv_label_set_text(label, buf);// 设置label控件的文本显示lv_obj_align(label, arc, LV_ALIGN_CENTER, 0, 0);// 重新对齐label控件到弧形控件中心，因为值长度有变化}

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