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

效果图

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

/**
 * @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);
}