这一期讲解lvgl中图片按键控件的基本使用，图像按钮与简单的“按钮”对象非常相似。唯一的区别是，它在每种状态下显示用户定义的图像，而不是绘制矩形。图像按钮对象只有一个主要部分，称为 LV_IMG_BTN_PART_MAIN ，在其中使用了所有图像样式属性。可以使用image_recolor和image_recolor_opa属性在每种状态下为图像重新着色。例如，如果按下该按钮可使图像变暗。

（1）用法
调用lv_imgbtn_set_src(imgbtn,LV_BIN_STATE_…,&img_src)将图像设置为一种状态。除了“图像”按键不支持“符号”之外，图像源的工作原理与图像对象中所述的相同。
如果在lv_conf,h文件中启用了LV_IMBTN_TILED则lv_imgbtn_set_src_tiled(imgbtn,LV_BTN_STATE_…,&img_src_left,&img_src_mid,&img_src_right)可用。使用平铺功能，将重复中间图像以填充对象的宽度。因此，对于 LV_IMGBTN_TILED ，可以使用 lv_obj_set_width() 设置图像按钮的宽度。但是，如果没有此选项，则宽度将始终与图像源的宽度相同。
（2）事件
除了通用事件，以下特殊事件也通过按键发送：
LV_EVENT_VALUE_CHANGED-切换按键时发送。
请注意与通用输入设备相关的事件也以非活动状态发送，您需要使用lv_btn_get_state(btn)检查状态，以忽略非活动按键中的事件。

（3）使用
在GUI_Guider平台中为图片按键添加图片具体如图所示：

（4）代码
//Write codes screen_1_imgbtn_1
//创建图片按键
ui->screen_1_imgbtn_1 = lv_imgbtn_create(ui->screen_1);
lv_obj_add_flag(ui->screen_1_imgbtn_1, LV_OBJ_FLAG_CHECKABLE);
//设置图像资源
lv_imgbtn_set_src(ui->screen_1_imgbtn_1, LV_IMGBTN_STATE_RELEASED, NULL, &_prtsc_alpha_132x130, NULL);
lv_imgbtn_set_src(ui->screen_1_imgbtn_1, LV_IMGBTN_STATE_PRESSED, NULL, &_prtsc_1_alpha_132x130, NULL);
//创建按键上的标签
ui->screen_1_imgbtn_1_label = lv_label_create(ui->screen_1_imgbtn_1);
lv_label_set_text(ui->screen_1_imgbtn_1_label, “”);
lv_label_set_long_mode(ui->screen_1_imgbtn_1_label, LV_LABEL_LONG_WRAP);
lv_obj_align(ui->screen_1_imgbtn_1_label, LV_ALIGN_CENTER, 0, 0);
lv_obj_set_style_pad_all(ui->screen_1_imgbtn_1, 0, LV_STATE_DEFAULT);
//设置位置大小
lv_obj_set_pos(ui->screen_1_imgbtn_1, 165, 79);
lv_obj_set_size(ui->screen_1_imgbtn_1, 132, 130);

//Write style for screen_1_imgbtn_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//默认状态样式配置
lv_obj_set_style_text_color(ui->screen_1_imgbtn_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_font(ui->screen_1_imgbtn_1, &lv_font_montserratMedium_12, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(ui->screen_1_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_align(ui->screen_1_imgbtn_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_clip_corner(ui->screen_1_imgbtn_1, true, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_1_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style for screen_1_imgbtn_1, Part: LV_PART_MAIN, State: LV_STATE_PRESSED.
//按下状态的样式配置
lv_obj_set_style_img_recolor_opa(ui->screen_1_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_PRESSED);
lv_obj_set_style_img_opa(ui->screen_1_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_PRESSED);
lv_obj_set_style_text_color(ui->screen_1_imgbtn_1, lv_color_hex(0xFF33FF), LV_PART_MAIN|LV_STATE_PRESSED);
lv_obj_set_style_text_font(ui->screen_1_imgbtn_1, &lv_font_montserratMedium_12, LV_PART_MAIN|LV_STATE_PRESSED);
lv_obj_set_style_text_opa(ui->screen_1_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_PRESSED);
lv_obj_set_style_shadow_width(ui->screen_1_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_PRESSED);

//Write style for screen_1_imgbtn_1, Part: LV_PART_MAIN, State: LV_STATE_CHECKED.
//选中状态的样式配置
lv_obj_set_style_img_recolor_opa(ui->screen_1_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_CHECKED);
lv_obj_set_style_img_opa(ui->screen_1_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_CHECKED);
lv_obj_set_style_text_color(ui->screen_1_imgbtn_1, lv_color_hex(0xFF33FF), LV_PART_MAIN|LV_STATE_CHECKED);
lv_obj_set_style_text_font(ui->screen_1_imgbtn_1, &lv_font_montserratMedium_12, LV_PART_MAIN|LV_STATE_CHECKED);
lv_obj_set_style_text_opa(ui->screen_1_imgbtn_1, 255, LV_PART_MAIN|LV_STATE_CHECKED);
lv_obj_set_style_shadow_width(ui->screen_1_imgbtn_1, 0, LV_PART_MAIN|LV_STATE_CHECKED);

//Write style for screen_1_imgbtn_1, Part: LV_PART_MAIN, State: LV_IMGBTN_STATE_RELEASED.
//释放状态的样式配置
lv_obj_set_style_img_recolor_opa(ui->screen_1_imgbtn_1, 0, LV_PART_MAIN|LV_IMGBTN_STATE_RELEASED);
lv_obj_set_style_img_opa(ui->screen_1_imgbtn_1, 255, LV_PART_MAIN|LV_IMGBTN_STATE_RELEASED);
本文章由威三学社出品
对课程感兴趣可以私信联系