Hi，大家好，欢迎来到STM32之littlevGL课堂，我们在上节课中学习了下拉列表控件(lv_cont)，本节课带大家来学习一下仪表控件，什么是仪表控件呢？大概最直观的印象应该就是汽车速度仪表吧，没错就是类似于那样的一个仪表控件！那么废话少说！ 一 有图有真相
大家看这个像不像汽车上的仪表盘呢？ 二 代码分析 看完了图片，我们再来看一下代码！ void gauge_test(void)
{
/*Create a style*/
static lv_style_t style;
lv_style_copy(&style, &lv_style_pretty_color);
style.body.main_color = lv_color_hex3(0x666); /*开始的刻度条颜色*/
style.body.grad_color = lv_color_hex3(0x666); /*结束的刻度条颜色*/
style.body.padding.left = 10; /*刻度条的长度*/
style.body.padding.inner = 8 ; /*文本与刻度条的距离*/
style.body.border.color = lv_color_hex3(0x333); /*指针圆环的颜色*/
style.line.width = 3; /*线条宽度*/
style.text.color = lv_color_hex3(0x333); /*文本颜色*/
style.line.color = LV_COLOR_RED; /*超出临界值的线条颜色*/
/*Describe the color for the needles*/
static lv_color_t needle_colors[3];
needle_colors[0] = LV_COLOR_BLUE;
needle_colors[1] = LV_COLOR_ORANGE;
needle_colors[2] = LV_COLOR_PURPLE;
/*Create a gauge*/
lv_obj_t * gauge1 = lv_gauge_create(lv_scr_act(), NULL);
lv_gauge_set_style(gauge1, LV_GAUGE_STYLE_MAIN, &style);
lv_gauge_set_needle_count(gauge1, 3, needle_colors);
lv_obj_set_size(gauge1, 150, 150);
lv_obj_align(gauge1, NULL, LV_ALIGN_CENTER, 0, 20);
lv_gauge_set_critical_value(gauge1, 80);
lv_gauge_set_range(gauge1, 0, 100);
/*Set the values*/
lv_gauge_set_value(gauge1, 0, 10);
lv_gauge_set_value(gauge1, 1, 20);
lv_gauge_set_value(gauge1, 2, 30);
}
同样的我在代码中也给大家做了中文注释，对应的我们设置哪一个参数改变的我们的哪一个元素，为什么这里要着重讲一下这个样式设置呢？其实主演是因为这里设置样式的时候与我们的实际设置的元素不是很对应，所以给大家讲一下便于大家后期自己设置的时候更加方便。 设置完样式后我们首先创建了一个用来描述指针颜色的结构体数组，我们分别设置了三个指针的颜色，然后我们就创建了我们的仪表对象，并通过lv_gauge_set_style这个函数将我们前面设置的样式赋给了我们的仪表对象。 接下来我们通过lv_gauge_set_needle_count设置了我们的内部指针数量，其中第三个参数就是我们设置的那个指针颜色的数组，将会与这三个指针的颜色一一对应，然后设置大小和对齐方式，这里相信大家也都很熟悉了，然后我们用lv_gauge_set_critical_value函数设置了一下仪表的临界值，就是上面图片中刻度条发红的那一部分，这里我们将临界值设置成了80，所以超过80的部分都是红颜色，然后我们通过lv_gauge_set_range设置了一下图表的数值区间。 最后我们用lv_gauge_set_value函数分别设置了一下我们创建的三个指针指向的数值，是不是很简单就做好了一个仪表盘的效果？大家对这个样式，可以通过去微调样式去不断的尝试看看哪一种更加适合你。 OK，那么本节课先到这里，那么我们下节课学习一个很简单，但又很有用的一个控件，那就是图片控件，准备展示各种各样的图片了吗？我们下节课再见！ |
