LVGL学习笔记 27 - 图片按键imgbtn

最新推荐文章于 2024-08-06 13:34:39 发布

pq113_6

最新推荐文章于 2024-08-06 13:34:39 发布

阅读量4.3k

点赞数 2

分类专栏： UI 文章标签： LVGL

本文链接：https://blog.csdn.net/pq113_6/article/details/129790932

版权

UI 专栏收录该内容

31 篇文章 97 订阅

订阅专栏

文章介绍了如何使用LVGL库创建图片按键，通过lv_imgbtn_create函数初始化，然后利用lv_imgbtn_set_src设置不同状态下的图片资源，如LEFT、MID、RIGHT。LV_IMGBTN_STATE定义了按键的不同状态，如RELEASED、PRESSED等。图片按键的大小可以调整，LVGL会自动填充MID图片以适应长度。高度应与图片原始高度匹配，否则可能造成图片截断或拉伸。

摘要由CSDN通过智能技术生成

图片按键和按键类似，区别在于背景是图片。创建图片按键句柄：

lv_obj_t* imgBtn = lv_imgbtn_create(lv_scr_act());

还需要通过lv_imgbtn_set_src设置图片

void lv_imgbtn_set_src(lv_obj_t * obj, lv_imgbtn_state_t state, const void * src_left, const void * src_mid, const void * src_right)

src_left/src_mid/src_right分别表示按键的左，中，右图片，下图是一个按键的图片示例：

按键的左边和右边不变，而中间部分可以重复绘制，从而显示任意长度的按键。

参数state表示设置的图片对应按键的哪种状态，定义如下：

typedef enum {
    LV_IMGBTN_STATE_RELEASED,
    LV_IMGBTN_STATE_PRESSED,
    LV_IMGBTN_STATE_DISABLED,
    LV_IMGBTN_STATE_CHECKED_RELEASED,
    LV_IMGBTN_STATE_CHECKED_PRESSED,
    LV_IMGBTN_STATE_CHECKED_DISABLED,
    _LV_IMGBTN_STATE_NUM,
} lv_imgbtn_state_t;

RELEASED是基本的状态，如果其他状态没有设置，其他状态会直接使用RELEASED的图片，所以RELEASED必须设置。可以通过lv_imgbtn_set_state手动改变按键的状态。

按钮的三个图片如下，2个颜色代表2个状态，绿色表示PRESSED状态，蓝色表示RELEASED状态：

extern "C" {
    LV_IMG_DECLARE(imgBtnLeft);
    LV_IMG_DECLARE(imgBtnMid);
    LV_IMG_DECLARE(imgBtnRight);
    LV_IMG_DECLARE(imgBtnLeft2);
    LV_IMG_DECLARE(imgBtnMid2);
    LV_IMG_DECLARE(imgBtnRight2);
}

lv_imgbtn_set_src(imgBtn, LV_IMGBTN_STATE_RELEASED, &imgBtnLeft, &imgBtnMid, &imgBtnRight);
lv_imgbtn_set_src(imgBtn, LV_IMGBTN_STATE_PRESSED, &imgBtnLeft2, &imgBtnMid2, &imgBtnRight2);
lv_obj_set_align(imgBtn, LV_ALIGN_CENTER);