图像按钮 (lv_imgbtn)

概述

图像按钮与普通的“按钮”对象非常相似。唯一的区别是它在每种状态下显示用户定义的图像，而不是绘制矩形。

您可以设置左图像、右图像和中心图像，中心图像将重复以匹配对象的宽度。

部件和样式

  • LV_PART_MAIN 指代图像。如果使用背景样式属性，将在图像按钮后面绘制一个矩形。

用法

图像来源

要在某个状态下设置图像，请使用 lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_center, src_right)。

图像来源的工作方式与图像对象中描述的相同，但图像按钮不支持“符号”。 任何来源都可以为 NULL。

可能的状态包括：

  • 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_RELEASED 中设置来源，这些来源也将在其他状态中使用。 如果例如设置了 LV_IMGBTN_STATE_PRESSED，它们将在按下状态中使用，而不是释放状态的图像。

状态

要手动设置状态，应使用 lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_...) 函数，而不是常规的 lv_obj_add/clear_state() 函数。

事件

  • LV_EVENT_VALUE_CHANGED 当按钮切换时发送。

了解更多关于事件的信息。

按键

  • LV_KEY_RIGHT/UP 如果启用了 LV_OBJ_FLAG_CHECKABLE，切换到选中状态。

  • LV_KEY_LEFT/DOWN 如果启用了 LV_OBJ_FLAG_CHECKABLE，切换到未选中状态。

  • LV_KEY_ENTER 点击按钮。

了解更多关于按键的信息。

示例

简单的图像按钮

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_IMGBTN && LV_BUILD_EXAMPLES

void lv_example_imgbtn_1(void)
{
    LV_IMG_DECLARE(imgbtn_left);
    LV_IMG_DECLARE(imgbtn_right);
    LV_IMG_DECLARE(imgbtn_mid);

    /*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);

    /*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_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());
    lv_imgbtn_set_src(imgbtn1, LV_IMGBTN_STATE_RELEASED, &imgbtn_left, &imgbtn_mid, &imgbtn_right);
    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);

    /*Create a label on the image button*/
    lv_obj_t * label = lv_label_create(imgbtn1);
    lv_label_set_text(label, "Button");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, -4);
}

#endif

MicroPython code  

 GitHub Simulator
from imagetools import get_png_info, open_png

# Register PNG image decoder
decoder = lv.img.decoder_create()
decoder.info_cb = get_png_info
decoder.open_cb = open_png

# Create an image from the png file
try:
    with open('../../assets/imgbtn_left.png','rb') as f:
        imgbtn_left_data = f.read()
except:
    print("Could not find imgbtn_left.png")
    sys.exit()

imgbtn_left_dsc = lv.img_dsc_t({
  'data_size': len(imgbtn_left_data),
  'data': imgbtn_left_data
})

try:
    with open('../../assets/imgbtn_mid.png','rb') as f:
        imgbtn_mid_data = f.read()
except:
    print("Could not find imgbtn_mid.png")
    sys.exit()

imgbtn_mid_dsc = lv.img_dsc_t({
  'data_size': len(imgbtn_mid_data),
  'data': imgbtn_mid_data
})

try:
    with open('../../assets/imgbtn_right.png','rb') as f:
        imgbtn_right_data = f.read()
except:
    print("Could not find imgbtn_right.png")
    sys.exit()

imgbtn_right_dsc = lv.img_dsc_t({
  'data_size': len(imgbtn_right_data),
  'data': imgbtn_right_data
})

# Create a transition animation on width transformation and recolor.
tr_prop = [lv.STYLE.TRANSFORM_WIDTH, lv.STYLE.IMG_RECOLOR_OPA, 0]
tr = lv.style_transition_dsc_t()
tr.init(tr_prop, lv.anim_t.path_linear, 200, 0, None)

style_def = lv.style_t()
style_def.init()
style_def.set_text_color(lv.color_white())
style_def.set_transition(tr)

# Darken the button when pressed and make it wider
style_pr = lv.style_t()
style_pr.init()
style_pr.set_img_recolor_opa(lv.OPA._30)
style_pr.set_img_recolor(lv.color_black())
style_pr.set_transform_width(20)

# Create an image button
imgbtn1 = lv.imgbtn(lv.scr_act())
imgbtn1.set_src(lv.imgbtn.STATE.RELEASED, imgbtn_left_dsc, imgbtn_mid_dsc, imgbtn_right_dsc)
imgbtn1.add_style(style_def, 0)
imgbtn1.add_style(style_pr, lv.STATE.PRESSED)

imgbtn1.align(lv.ALIGN.CENTER, 0, 0)

# Create a label on the image button
label = lv.label(imgbtn1)
label.set_text("Button")
label.align(lv.ALIGN.CENTER, 0, -4)

API

Enums

enum lv_imgbtn_state_t

Values:

enumerator LV_IMGBTN_STATE_RELEASED
enumerator LV_IMGBTN_STATE_PRESSED
enumerator LV_IMGBTN_STATE_DISABLED
enumerator LV_IMGBTN_STATE_CHECKED_RELEASED
enumerator LV_IMGBTN_STATE_CHECKED_PRESSED
enumerator LV_IMGBTN_STATE_CHECKED_DISABLED
enumerator _LV_IMGBTN_STATE_NUM

Functions

lv_obj_t *lv_imgbtn_create(lv_obj_t *parent)

Create an image button object

Parameters

parent -- pointer to an object, it will be the parent of the new image button

Returns

pointer to the created image button

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

Set images for a state of the image button

Parameters

  • imgbtn -- pointer to an image button object

  • state -- for which state set the new image

  • src_left -- pointer to an image source for the left side of the button (a C array or path to a file)

  • src_mid -- pointer to an image source for the middle of the button (ideally 1px wide) (a C array or path to a file)

  • src_right -- pointer to an image source for the right side of the button (a C array or path to a file)

void lv_imgbtn_set_state(lv_obj_t *imgbtn, lv_imgbtn_state_t state)

Use this function instead of lv_obj_add/clear_state to set a state manually

Parameters

  • imgbtn -- pointer to an image button object

  • state -- the new state

const void *lv_imgbtn_get_src_left(lv_obj_t *imgbtn, lv_imgbtn_state_t state)

Get the left image in a given state

Parameters

  • imgbtn -- pointer to an image button object

  • state -- the state where to get the image (from lv_btn_state_t) `

Returns

pointer to the left image source (a C array or path to a file)

const void *lv_imgbtn_get_src_middle(lv_obj_t *imgbtn, lv_imgbtn_state_t state)

Get the middle image in a given state

Parameters

  • imgbtn -- pointer to an image button object

  • state -- the state where to get the image (from lv_btn_state_t) `

Returns

pointer to the middle image source (a C array or path to a file)

const void *lv_imgbtn_get_src_right(lv_obj_t *imgbtn, lv_imgbtn_state_t state)

Get the right image in a given state

Parameters

  • imgbtn -- pointer to an image button object

  • state -- the state where to get the image (from lv_btn_state_t) `

Returns

pointer to the left image source (a C array or path to a file)

Variables

const lv_obj_class_t lv_imgbtn_class
struct lv_imgbtn_t

Public Members

lv_obj_t obj
const void *img_src_mid[_LV_IMGBTN_STATE_NUM]
const void *img_src_left[_LV_IMGBTN_STATE_NUM]
const void *img_src_right[_LV_IMGBTN_STATE_NUM]
lv_img_cf_t act_cf