使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第三十五讲)
这一期讲解lvgl拓展部件仪表盘lv_meter，它能灵活展示数据，可以模拟各种仪表盘样式，包含主体背景、刻度线和标签、指针线或图像、弧形等组件元素。
1.组件元素
LV_PART_MAIN:主体背景部分。
LV_PART_TICKS:刻度线和标签。
LV_PART_TICKS:指示数值变化的指针或指针图像，采用线条和图像样式的属性。同时，该部分还会利用背景属性在指针旋转轴心处绘制一个方形（或圆形）区域。通过调整内边距（padding），可以使得这个轴心方块变得更大。
LV_PART_ITEMS:弧形部分。
2.相关函数
[1] lv_meter_create(lv_obj_t* parent); 用于创建仪表盘控件函数
[2]lv_meter_add_scale(lv_obj_t* meter); 用于向仪表盘添加刻度盘的函数
[3]lv_meter_set_scale_ticks(lv_obj_t * meter, lv_meter_scale_t * scale, uint16_t cnt, uint16_t width, uint16_t len, lv_color_t color); 用于设置仪表盘刻度线的函数
[4]lv_meter_set_scale_major_ticks(lv_obj_t * meter, lv_meter_scale_t * scale, uint16_t nth, uint16_t width, uint16_t len, lv_color_t color, int16_t label_gap) 用于设置仪表盘主刻度线的函数
[5]lv_meter_set_scale_range(lv_obj_t * meter, lv_meter_scale_t * scale, int32_t min, int32_t max, uint32_t angle_range, uint32_t rotation) 用于设置仪表盘（lv_meter）刻度范围和角度的函数
[6]lv_meter_add_needle_img(lv_obj_t * meter, lv_meter_scale_t * scale, const void * img_src, uint16_t pivot_x, uint16_t pivot_y) 用于向仪表盘（lv_meter）添加指针图片的函数
[7]lv_meter_set_indicator_value(lv_obj_t * meter, lv_meter_indicator_t * indic, int32_t value); 用于设置仪表盘（lv_meter）指针（指示器）值的函数。通过这个函数，可以动态地调整指针在仪表盘上的位置，以反映不同的数据值
3.代码展示
//Write codes screen_1_meter_1
//创建仪表盘
ui->screen_1_meter_1 = lv_meter_create(ui->screen_1);
// add scale ui->screen_1_meter_1_scale_0
//添加刻度尺
ui->screen_1_meter_1_scale_0 = lv_meter_add_scale(ui->screen_1_meter_1);
//设置刻度线样式
lv_meter_set_scale_ticks(ui->screen_1_meter_1, ui->screen_1_meter_1_scale_0, 41, 2, 10, lv_color_hex(0xff0000));
//设置主刻度线
lv_meter_set_scale_major_ticks(ui->screen_1_meter_1, ui->screen_1_meter_1_scale_0, 8, 5, 15, lv_color_hex(0xffff00), 10);
//设置刻度范围
lv_meter_set_scale_range(ui->screen_1_meter_1, ui->screen_1_meter_1_scale_0, 0, 100, 300, 90);
// add needle line for ui->screen_1_meter_1_scale_0.
//添加指针
ui->screen_1_meter_1_scale_0_ndline_0 = lv_meter_add_needle_line(ui->screen_1_meter_1, ui->screen_1_meter_1_scale_0, 5, lv_color_hex(0x000000), -10);
//将指针初始值设置为0
lv_meter_set_indicator_value(ui->screen_1_meter_1, ui->screen_1_meter_1_scale_0_ndline_0, 0);
//设置位置和大小
lv_obj_set_pos(ui->screen_1_meter_1, 145, 123);
lv_obj_set_size(ui->screen_1_meter_1, 200, 200);
//Write style for screen_1_meter_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//主体样式
lv_obj_set_style_bg_opa(ui->screen_1_meter_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_meter_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_meter_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_meter_1, 100, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_border_width(ui->screen_1_meter_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_1_meter_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style for screen_1_meter_1, Part: LV_PART_TICKS, State: LV_STATE_DEFAULT.
//刻度文本样式
lv_obj_set_style_text_color(ui->screen_1_meter_1, lv_color_hex(0xff0000), LV_PART_TICKS|LV_STATE_DEFAULT);
lv_obj_set_style_text_font(ui->screen_1_meter_1, &lv_font_montserratMedium_12, LV_PART_TICKS|LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(ui->screen_1_meter_1, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
//Write style for screen_1_meter_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
//指针样式
lv_obj_set_style_bg_opa(ui->screen_1_meter_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_meter_1, lv_color_hex(0x000000), LV_PART_INDICATOR|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_meter_1, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);
本文章有威三学社出品
对课程感兴趣可以私信联系