LVGL 8.2 Simple Image button

创建Image button

static void lv_example_imgbtn_1(void)
{
    LV_IMG_DECLARE(imgbtn_left);
    LV_IMG_DECLARE(imgbtn_right);
    LV_IMG_DECLARE(imgbtn_mid);   // image资源声明
    /*Create a transition animation on width transformation and recolor.*/
    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);  //设置transition
    /*Darken the button when pressed and make it wider*/
    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_img_recolor_opa(&style_pr, LV_OPA_30); //重着色透明度为LV_OPA_30
    lv_style_set_img_recolor(&style_pr, lv_color_black());//重着色颜色为黑色
    lv_style_set_transform_width(&style_pr, 20); //设置宽度转变
    /*Create an image button*/
    lv_obj_t* imgbtn1 = lv_imgbtn_create(lv_scr_act()); //创建image button对象
    lv_imgbtn_set_src(imgbtn1, LV_IMGBTN_STATE_RELEASED, &imgbtn_left, &imgbtn_mid, &imgbtn_right); //设置图片资源
    lv_obj_add_style(imgbtn1, &style_def, 0); //添加未按下时style
    lv_obj_add_style(imgbtn1, &style_pr, LV_STATE_PRESSED);//添加按下时style
    lv_obj_align(imgbtn1, LV_ALIGN_CENTER, 0, 0); // 居中对齐
    /*Create a label on the image button*/
    lv_obj_t* label = lv_label_create(imgbtn1); //在imgbtn1对象上创建label
    lv_label_set_text(label, "Button"); //设置显示文本
    lv_obj_align(label, LV_ALIGN_CENTER, 0, -4); // LV_ALIGN_CENTER方式对齐
}

运行效果