Image button （图像按钮）(lv_imagebutton)

Overview（概述）

显示原文

The Image button is very similar to the simple 'Button' object. The only difference is that it displays user-defined images in each state instead of drawing a rectangle.

You can set a left, right and center image, and the center image will be repeated to match the width of the object.

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

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

Parts and Styles（部分和样式）

显示原文

LV_PART_MAIN Refers to the image(s). If background style properties are used, a rectangle will be drawn behind the image button.

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

Usage（用法）

Image sources（图片来源）

显示原文

To set the image in a state, use the lv_imagebutton_set_src(imagebutton, LV_IMAGEBUTTON_STATE_..., src_left, src_center, src_right).

The image sources work the same as described in the Image object except that "Symbols" are not supported by the Image button. Any of the sources can NULL.

If only src_center is specified, the width of the widget will be set automatically to the width of the image. However, if all three sources are set, the width needs to be set by the user (using e.g. lv_obj_set_width) and the center image will be tiled to fill the given size.

The possible states are:

If you set sources only in LV_IMAGEBUTTON_STATE_RELEASED, these sources will be used in other states too. If you set e.g. LV_IMAGEBUTTON_STATE_PRESSED they will be used in pressed state instead of the released images.

要将图像设置为某个状态，请使用 lv_imagebutton_set_src(imagebutton, LV_IMAGEBUTTON_STATE_..., src_left, src_center, src_right) 。

图像源的工作原理与图片对象中所述的相同，但是 "图像" 按钮不支持 "Symbols（符号）" 。任何源都可以为 NULL 。

如果只指定了 src_center ，则控件的宽度将自动设置为图像的宽度。但是，如果设置了所有三个源，则宽度需要由用户设置（例如使用 lv_obj_set_width ），并且中心图像将被平铺以填充给定的大小。

状态可以是：

如果只给状态 LV_IMAGEBUTTON_STATE_RELEASED 设置源，这些源也将在其他状态使用。如果设置了例如 LV_IMAGEBUTTON_STATE_PRESSED ，它们将在按下状态下使用图像源，而不是在 LV_IMAGEBUTTON_STATE_RELEASED 中使用。

States（状态）

显示原文

Instead of the regular lv_obj_add_state() and lv_obj_remove_state() functions, the lv_imagebutton_set_state(imagebutton, LV_IMAGEBUTTON_STATE_...) function should be used to manually set a state.

应使用 lv_imagebutton_set_state(imagebutton, LV_IMAGEBUTTON_STATE_...) 函数来手动设置状态，而不是常规的 lv_obj_add_state() 和 lv_obj_remove_state() 函数。

Events（事件）

显示原文

LV_EVENT_VALUE_CHANGED Sent when the button is toggled.

Learn more about Events（事件）.

LV_EVENT_VALUE_CHANGED 切换按钮时发送该事件。

详细了解更多阅读 Events（事件）。

Keys（按键）

显示原文

LV_KEY_RIGHT/UP Go to toggled state if LV_OBJ_FLAG_CHECKABLE is enabled.
LV_KEY_LEFT/DOWN Go to non-toggled state if LV_OBJ_FLAG_CHECKABLE is enabled.
LV_KEY_ENTER Clicks the button

Learn more about Keys（按键）.

LV_KEY_RIGHT/UP 如果 LV_OBJ_FLAG_CHECKABLE 已启用，则转到切换状态。
LV_KEY_LEFT/DOWN 如果 LV_OBJ_FLAG_CHECKABLE 已启用，则转到非切换状态。
LV_KEY_ENTER 点击按钮

Example

[English]

Simple Image button

#include "../../lv_examples.h"
#if LV_USE_IMAGEBUTTON && LV_BUILD_EXAMPLES

void lv_example_imagebutton_1(void)
{
    LV_IMAGE_DECLARE(imagebutton_left);
    LV_IMAGE_DECLARE(imagebutton_right);
    LV_IMAGE_DECLARE(imagebutton_mid);

    /*Create a transition animation on width transformation and recolor.*/
    static lv_style_prop_t tr_prop[] = {LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_IMAGE_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_image_recolor_opa(&style_pr, LV_OPA_30);
    lv_style_set_image_recolor(&style_pr, lv_color_black());
    lv_style_set_transform_width(&style_pr, 20);

    /*Create an image button*/
    lv_obj_t * imagebutton1 = lv_imagebutton_create(lv_screen_active());
    lv_imagebutton_set_src(imagebutton1, LV_IMAGEBUTTON_STATE_RELEASED, &imagebutton_left, &imagebutton_mid,
                           &imagebutton_right);
    lv_obj_add_style(imagebutton1, &style_def, 0);
    lv_obj_add_style(imagebutton1, &style_pr, LV_STATE_PRESSED);

    lv_obj_set_width(imagebutton1, 100);
    lv_obj_align(imagebutton1, LV_ALIGN_CENTER, 0, 0);

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

#endif

API

lv_types.h

lv_imagebutton.h