Hi，大家好，欢迎来到STM32之littlevGL课堂，我们在上节课中学习了图片控件(lv_img)，本节课带大家来学习一下图片按钮控件，其实我们在前面的教程中既学过图片控件，也学过按钮控件，那么大家可能会好奇了，什么是图片按钮控件呢？其实这个属于按钮控件的派生控件，正如我们前面学习的时候，按钮的风格是很单调的，那么本节课程就是教大家如何做出更加好看的按钮来，废话少说！ 一 有图有真相
看起来是不是像一幅图片？没错，就是一个图片，但是也具备按钮的的属性，这样的效果是不是相比普通的按钮控件更加好看了呢？那大家就继续看教程吧！ 二 代码分析 static lv_obj_t * imgbtn1;
static lv_obj_t * imgbtn_label;
static void imgbtn_event_handler(lv_obj_t * obj, lv_event_t event)
{
static int i = 0;;
static char buffer[32];
if (obj == imgbtn1) {
if(event == LV_EVENT_CLICKED) {
i++;
sprintf(buffer, "imgBtn Clicked %d", i);
lv_label_set_text(imgbtn_label,buffer);
}
}
}
void imgbtn_test(void)
{
static lv_style_t style_pr;
lv_style_copy(&style_pr, &lv_style_plain);
style_pr.image.color = LV_COLOR_BLACK;
style_pr.image.intense = LV_OPA_50;
/*Create an Image button*/
imgbtn1 = lv_imgbtn_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(imgbtn1, imgbtn_event_handler);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_REL, &WaveShare_LOGO);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &WaveShare_LOGO);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &WaveShare_LOGO);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &WaveShare_LOGO);
lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_PR, &style_pr); /*Use the darker style in the pressed state*/
lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_TGL_PR, &style_pr);
lv_imgbtn_set_toggle(imgbtn1, true);
lv_obj_align(imgbtn1, NULL, LV_ALIGN_IN_LEFT_MID, 0, 0);
imgbtn_label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_long_mode(imgbtn_label, LV_LABEL_LONG_BREAK);
lv_obj_set_width(imgbtn_label, 300);
lv_label_set_text(imgbtn_label,"Watting imgBtn for clicked!");
lv_obj_align(imgbtn_label, NULL, LV_ALIGN_IN_LEFT_MID, 0, 90);
lv_label_set_align(imgbtn_label, LV_LABEL_ALIGN_CENTER);
}那么我们继续分析代码： static lv_style_t style_pr;
lv_style_copy(&style_pr, &lv_style_plain);
style_pr.image.color = LV_COLOR_BLACK;
style_pr.image.intense = LV_OPA_50; /*Create an Image button*/
imgbtn1 = lv_imgbtn_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(imgbtn1, imgbtn_event_handler);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_REL, &WaveShare_LOGO);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &WaveShare_LOGO);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &WaveShare_LOGO);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &WaveShare_LOGO);enum {
/**Released*/
LV_BTN_STATE_REL,
/**Pressed*/
LV_BTN_STATE_PR,
/**Toggled released*/
LV_BTN_STATE_TGL_REL,
/**Toggled pressed*/
LV_BTN_STATE_TGL_PR,
/**Inactive*/
LV_BTN_STATE_INA,
/**Number of states*/
_LV_BTN_STATE_NUM,
};
typedef uint8_t lv_btn_state_t; lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_PR, &style_pr); /*Use the darker style in the pressed state*/
lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_TGL_PR, &style_pr);最后我们使能按钮的触发功能，就是让按钮可以被用户按下。 imgbtn_label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_long_mode(imgbtn_label, LV_LABEL_LONG_BREAK);
lv_obj_set_width(imgbtn_label, 300);
lv_label_set_text(imgbtn_label,"Watting imgBtn for clicked!");
lv_obj_align(imgbtn_label, NULL, LV_ALIGN_IN_LEFT_MID, 0, 90);
lv_label_set_align(imgbtn_label, LV_LABEL_ALIGN_CENTER);OK，本节课程就到这里，大家有没有学会呢？下节课我们讲学习键盘控件(lv_kb)！大家有没有很期待呢？终于可以学一个很厉害的控件了！ |
