当前位置：首页 > news >正文

Lvgl8.3 自定义矩形按键的标签,图标 lv_btnmatrix

news 来源：原创 2024/9/20 9:03:08

效果图
在这里插入图片描述

主要实现自定义标签/图标,位置,字体可以随意修改


/*** @brief 事件回调函数** @param e*/
static void event_cb(lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);lv_obj_t *obj = lv_event_get_target(e);// 按键点击事件if (code == LV_EVENT_VALUE_CHANGED){uint32_t id = lv_btnmatrix_get_selected_btn(obj);const char *txt = lv_btnmatrix_get_btn_text(obj, id);LV_LOG("%s was pressed \n", txt);}else if (code == LV_EVENT_DRAW_PART_BEGIN){lv_obj_draw_part_dsc_t *dsc = lv_event_get_draw_part_dsc(e);if (dsc->class_p == &lv_btnmatrix_class && dsc->type == LV_BTNMATRIX_DRAW_PART_BTN){dsc->label_dsc->opa = LV_OPA_0;                                      // 隐藏原来的文字标签dsc->rect_dsc->radius = 0;                                           // 圆角半径if (lv_btnmatrix_get_selected_btn(obj) == dsc->id)                   // 选中颜色dsc->rect_dsc->bg_color = lv_palette_darken(LV_PALETTE_GREY, 1); // 选中颜色else                                                                 //dsc->rect_dsc->bg_color = lv_color_hex(0x698B69);                // 未选中颜色}}else if (code == LV_EVENT_DRAW_PART_END){lv_obj_draw_part_dsc_t *dsc = lv_event_get_draw_part_dsc(e);/*当按钮矩阵绘制按钮时*/if (dsc->class_p == &lv_btnmatrix_class && dsc->type == LV_BTNMATRIX_DRAW_PART_BTN){/*在绘制按钮时添加自定义内容*/{{ /* 自定义标签 ******************************************************************************* */char buf[8];const char *txt = lv_btnmatrix_get_btn_text(obj, dsc->id); // 获取按键标签文本lv_snprintf(buf, sizeof(buf), "%s", txt);lv_point_t text_size;lv_txt_get_size(&text_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE);lv_area_t txt_area;txt_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2 - text_size.x / 2; // 计算标签居中位置txt_area.x2 = txt_area.x1 + text_size.x;txt_area.y2 = dsc->draw_area->y1 - 50; // 往上偏移50txt_area.y1 = txt_area.y2 - text_size.y;lv_draw_label_dsc_t label_dsc;lv_draw_label_dsc_init(&label_dsc);label_dsc.color = lv_color_white(); // 文字的颜色为白色lv_draw_label(dsc->draw_ctx, &label_dsc, &txt_area, buf, NULL);}{ /* 自定义图标 ******************************************************************************* */LV_IMG_DECLARE(img_star);lv_img_header_t header;lv_res_t res = lv_img_decoder_get_info(&img_star, &header);if (res != LV_RES_OK)return;lv_area_t a; // 计算图标居中位置a.x1 = dsc->draw_area->x1 + (lv_area_get_width(dsc->draw_area) - header.w) / 2;a.x2 = a.x1 + header.w - 1;a.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - header.h) / 2 + 50; // 图标往下偏移a.y2 = a.y1 + header.h - 1;lv_draw_img_dsc_t img_draw_dsc;lv_draw_img_dsc_init(&img_draw_dsc);img_draw_dsc.recolor = lv_color_black();if (lv_btnmatrix_get_selected_btn(obj) == dsc->id)img_draw_dsc.recolor_opa = LV_OPA_30;lv_draw_img(dsc->draw_ctx, &img_draw_dsc, &a, &img_star);}}}}
}/*** @brief 矩阵按键(自定义的标签,图标)**/
void lv_display_6but(void)
{// 矩阵样式初static lv_style_t style_bg;lv_style_init(&style_bg);lv_style_set_pad_all(&style_bg, 10); // 矩阵四周的间距lv_style_set_pad_gap(&style_bg, 10); // 按键之间的间距// lv_style_set_clip_corner(&style_bg, true);        // 开启圆角裁剪// lv_style_set_radius(&style_bg, LV_RADIUS_CIRCLE); // 设置背景为圆形lv_style_set_border_width(&style_bg, 0); // 设置边框宽度为0// 按键样式static lv_style_t style_btn;lv_style_init(&style_btn);                //lv_style_set_radius(&style_btn, 0);       // 设置按钮无圆角lv_style_set_border_width(&style_btn, 0); // 设置边框宽度// lv_style_set_border_opa(&style_btn, LV_OPA_0); // 设置边框透明度// lv_style_set_border_color(&style_btn, lv_palette_main(LV_PALETTE_GREY)); //// lv_style_set_border_side(&style_btn, LV_BORDER_SIDE_INTERNAL);           // 设置边框位于内部static const char *map[] = {"clock", "image", "weather", "gif", "about", "set up", ""};lv_obj_t *btnm = lv_btnmatrix_create(lv_scr_act());lv_btnmatrix_set_map(btnm, map);lv_obj_add_style(btnm, &style_bg, 0);                    // 矩阵样式lv_obj_add_style(btnm, &style_btn, LV_PART_ITEMS);       // 按键样式lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_ALL, NULL); // 注册回调函数lv_obj_set_size(btnm, 135 * 6, 240);                     // 矩阵大小lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_CHECKABLE); // 所有按钮可选lv_btnmatrix_set_one_checked(btnm, true);                         // 设置按钮矩阵允许单选lv_obj_center(btnm);
}