效果图
主要实现自定义标签/图标,位置,字体可以随意修改
/**
* @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; // 往上偏移50
txt_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);
}