lvgl的imgbtn使用

1、先上代码，然后分析。

void x_ImgBtnTest(){
    LV_IMG_DECLARE(icon_clock);
 

    static lv_style_prop_t tr_prop[] = {LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_IMG_RECOLOR_OPA, 0};
    static lv_style_transition_dsc_t tr;
    lv_style_transition_dsc_init(&tr, tr_prop, lv_anim_path_linear, 200, 0, NULL);

    static lv_style_t style_def;
    lv_style_init(&style_def);
    lv_style_set_text_color(&style_def, lv_color_white());
    lv_style_set_transition(&style_def, &tr);

    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_img_recolor_opa(&style_pr, LV_OPA_50);
    lv_style_set_img_recolor(&style_pr, lv_color_black());
    lv_style_set_transform_width(&style_pr, 0);

    lv_obj_t * imgbtn1 = lv_imgbtn_create(lv_scr_act());
    lv_obj_set_size(imgbtn1, 50, 50);
    lv_imgbtn_set_src(imgbtn1, LV_IMGBTN_STATE_RELEASED, &icon_clock, NULL, NULL);
    lv_imgbtn_set_src(imgbtn1, LV_IMGBTN_STATE_PRESSED,  &icon_clock, NULL, NULL);

    lv_obj_add_style(imgbtn1, &style_def, 0);
    lv_obj_add_style(imgbtn1, &style_pr, LV_STATE_PRESSED);

    lv_obj_align(imgbtn1, LV_ALIGN_CENTER, 0, 0);

    static lv_style_t ls;
    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "clock");
    lv_style_init(&ls);
    lv_style_set_text_color(&ls, lv_color_make(0, 0, 0));
    lv_obj_add_style(label, &ls, 0);
    
    lv_obj_align_to(label,imgbtn1,LV_ALIGN_OUT_BOTTOM_MID,0,0);
}

icon_clock是闹钟的图标，放在文未连接中，供参考。

2、分析如下：

一共有三处标黄色。

1）、第一处：

    lv_style_set_img_recolor_opa(&style_pr, LV_OPA_50);
    lv_style_set_img_recolor(&style_pr, lv_color_black());
    lv_style_set_transform_width(&style_pr, 0);

点击后会有重绘效果--》有一个颜色会覆盖住图标（第1、2行），图标大小会被改变（第3行）。

第二行设置颜色，颜色由lv_color_black()（黑色）确定，使用其它颜色eg:lv_color_make(0xff,0,0)。则按下图标后图标上层会由红色覆盖。（会挡住图标）

第一行设置透明度，由LV_OPA_50--》50%决定。也可以是LV_OPA_X （X=00，10...100）。

第三行则是设置图标移动大小，比如我设置个10，就会向右移动10pix。

2）、第二处

  lv_imgbtn_set_src(imgbtn1, LV_IMGBTN_STATE_PRESSED,  &icon_clock, NULL, NULL);

后三个参数是 左图标、中图标、右图标。

官方原话是：You can set a left, right and center image, and the center image will be repeated to match the width of the object.

这里调试放在左边最合适。

lv_obj_t * label = lv_label_create(lv_scr_act());

第三处是设置图标下面的文字。如果以图标为父类来创建的话，就会导致无法正常显示。

最后效果如下

附录：

(79条消息) lvgl格式闹钟图标，大小50x50，16colors，icon_clock.c_c_1969的博客-CSDN博客