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)。

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

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

可能的状态包括：

如果仅在 LV_IMAGEBUTTON_STATE_RELEASED 中设置源，则这些源也将在其他状态使用。如果设置例如 LV_IMAGEBUTTON_STATE_PRESSED 它们将在按下状态下使用，而不是在发布的图像中使用。

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_imagebutton.h