Hi,大家好,欢迎来到树莓派之littlevGL课堂,我们在上节课中学习了列表控件(lv_list),本节课我们学习line meter——“线表”控件(lv_lmeter),之所以加引号,主要还是不确定翻译的是否准确,大家有什么好的翻译吗?废话不多说! 一 有图有真相 看到这个图,其实跟我们之前学习的仪表控件非常接近,只不过这里少了很多指针和文字。 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加lmeter_test()函数测试。 void lmeter_test(void) { /*Create a style for the line meter*/ static lv_style_t style_lmeter; lv_style_copy(&style_lmeter, &lv_style_pretty_color); style_lmeter.line.width = 2; style_lmeter.line.color = LV_COLOR_SILVER; style_lmeter.body.main_color = lv_color_hex(0x91bfed); /*Light blue*/ style_lmeter.body.grad_color = lv_color_hex(0x04386c); /*Dark blue*/ style_lmeter.body.padding.left = 16; /*Line length*/ /*Create a line meter */ lv_obj_t * lmeter; lmeter = lv_lmeter_create(lv_scr_act(), NULL); lv_lmeter_set_range(lmeter, 0, 100); /*Set the range*/ lv_lmeter_set_value(lmeter, 80); /*Set the current value*/ lv_lmeter_set_scale(lmeter, 240, 31); /*Set the angle and number of lines*/ lv_lmeter_set_style(lmeter, LV_LMETER_STYLE_MAIN, &style_lmeter); /*Apply the new style*/ lv_obj_set_size(lmeter, 150, 150); lv_obj_align(lmeter, NULL, LV_ALIGN_CENTER, 0, 0); } /*Create a style for the line meter*/ static lv_style_t style_lmeter; lv_style_copy(&style_lmeter, &lv_style_pretty_color); style_lmeter.line.width = 2; style_lmeter.line.color = LV_COLOR_SILVER; style_lmeter.body.main_color = lv_color_hex(0x91bfed); /*Light blue*/ style_lmeter.body.grad_color = lv_color_hex(0x04386c); /*Dark blue*/ style_lmeter.body.padding.left = 16; lv_lmeter_set_range(lmeter, 0, 100); /*Set the range*/ lv_lmeter_set_value(lmeter, 80); lv_lmeter_set_scale(lmeter, 240, 31); /*Set the angle and number of lines*/ lv_lmeter_set_style(lmeter, LV_LMETER_STYLE_MAIN, &style_lmeter); /*Apply the new style*/ lv_lmeter_set_scale(lmeter, 360, 13); 最后就是设置了一下大小和对齐方式,这里相对简单,也就不再做解释了。 OK,本节课就到这里,下节课我们学习消息弹窗控件(lv_mbox),那我们下节课再见! |