复选框 (lv_checkbox)

概述

复选框对象由一个“勾选框”和一个标签组成。当点击复选框时,勾选框会切换状态。

部件和样式

  • LV_PART_MAIN 是复选框的背景,使用文本和所有典型的背景样式属性。 pad_column 调整勾选框和标签之间的间距。

  • LV_PART_INDICATOR “勾选框”是一个方形,使用所有典型的背景样式属性。 默认情况下,其大小等于主部分字体的高度。填充属性使勾选框在相应方向上更大。

复选框会添加到默认组(如果已设置)。

用法

文本

可以通过 lv_checkbox_set_text(cb, "新文本") 函数修改文本,并会动态分配内存。

要设置静态文本, 使用 lv_checkbox_set_static_text(cb, txt)。这样,只会存储指向 txt 的指针。在复选框存在期间,不应释放该文本。

勾选、取消勾选、禁用

可以通过使用通用状态添加/清除函数手动勾选、取消勾选和禁用复选框:

lv_obj_add_state(cb, LV_STATE_CHECKED);   /*将复选框设置为勾选状态*/
lv_obj_clear_state(cb, LV_STATE_CHECKED); /*将复选框设置为未勾选状态*/
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); /*将复选框设置为勾选且禁用状态*/

事件

  • LV_EVENT_VALUE_CHANGED 当复选框切换时发送。

  • LV_EVENT_DRAW_PART_BEGINLV_EVENT_DRAW_PART_END 会为以下类型发送:

    • LV_CHECKBOX_DRAW_PART_BOX 复选框的勾选框

      • part: LV_PART_INDICATOR

      • draw_area: 勾选框的区域

      • rect_dsc

请参阅基础对象的事件。

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

按键

以下按键由“按钮”处理:

  • LV_KEY_RIGHT/UP 切换到勾选状态(如果启用了切换)。

  • LV_KEY_LEFT/DOWN 切换到未勾选状态(如果启用了切换)。

  • LV_KEY_ENTER 点击复选框并切换其状态。

注意,与往常一样,LV_KEY_ENTER 的状态会被翻译为 LV_EVENT_PRESSED/PRESSING/RELEASED 等。

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

示例

简单的复选框

C code  

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

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        const char * txt = lv_checkbox_get_text(obj);
        const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";
        LV_LOG_USER("%s: %s", txt, state);
    }
}

void lv_example_checkbox_1(void)
{
    lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);

    lv_obj_t * cb;
    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Apple");
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Banana");
    lv_obj_add_state(cb, LV_STATE_CHECKED);
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Lemon");
    lv_obj_add_state(cb, LV_STATE_DISABLED);
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
    lv_checkbox_set_text(cb, "Melon\nand a new line");
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    lv_obj_update_layout(cb);
}

#endif

MicroPython code  

 GitHub Simulator
def event_handler(e):
    code = e.get_code()
    obj = e.get_target()
    if code == lv.EVENT.VALUE_CHANGED:
        txt = obj.get_text()
        if obj.get_state() & lv.STATE.CHECKED:
            state = "Checked"
        else:
            state = "Unchecked"
        print(txt + ":" + state)


lv.scr_act().set_flex_flow(lv.FLEX_FLOW.COLUMN)
lv.scr_act().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER)

cb = lv.checkbox(lv.scr_act())
cb.set_text("Apple")
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.scr_act())
cb.set_text("Banana")
cb.add_state(lv.STATE.CHECKED)
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.scr_act())
cb.set_text("Lemon")
cb.add_state(lv.STATE.DISABLED)
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.scr_act())
cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
cb.set_text("Melon")
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

cb.update_layout()


将复选框用作单选按钮

C code  

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

static lv_style_t style_radio;
static lv_style_t style_radio_chk;
static uint32_t active_index_1 = 0;
static uint32_t active_index_2 = 0;

static void radio_event_handler(lv_event_t * e)
{
    uint32_t * active_id = lv_event_get_user_data(e);
    lv_obj_t * cont = lv_event_get_current_target(e);
    lv_obj_t * act_cb = lv_event_get_target(e);
    lv_obj_t * old_cb = lv_obj_get_child(cont, *active_id);

    /*Do nothing if the container was clicked*/
    if(act_cb == cont) return;

    lv_obj_clear_state(old_cb, LV_STATE_CHECKED);   /*Uncheck the previous radio button*/
    lv_obj_add_state(act_cb, LV_STATE_CHECKED);     /*Uncheck the current radio button*/

    *active_id = lv_obj_get_index(act_cb);

    LV_LOG_USER("Selected radio buttons: %d, %d", (int)active_index_1, (int)active_index_2);
}


static void radiobutton_create(lv_obj_t * parent, const char * txt)
{
    lv_obj_t * obj = lv_checkbox_create(parent);
    lv_checkbox_set_text(obj, txt);
    lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE);
    lv_obj_add_style(obj, &style_radio, LV_PART_INDICATOR);
    lv_obj_add_style(obj, &style_radio_chk, LV_PART_INDICATOR | LV_STATE_CHECKED);
}

/**
 * Checkboxes as radio buttons
 */
void lv_example_checkbox_2(void)
{
    /* The idea is to enable `LV_OBJ_FLAG_EVENT_BUBBLE` on checkboxes and process the
     * `LV_EVENT_CLICKED` on the container.
     * A variable is passed as event user data where the index of the active
     * radiobutton is saved */


    lv_style_init(&style_radio);
    lv_style_set_radius(&style_radio, LV_RADIUS_CIRCLE);

    lv_style_init(&style_radio_chk);
    lv_style_set_bg_img_src(&style_radio_chk, NULL);

    uint32_t i;
    char buf[32];

    lv_obj_t * cont1 = lv_obj_create(lv_scr_act());
    lv_obj_set_flex_flow(cont1, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_size(cont1, lv_pct(40), lv_pct(80));
    lv_obj_add_event_cb(cont1, radio_event_handler, LV_EVENT_CLICKED, &active_index_1);

    for(i = 0; i < 5; i++) {
        lv_snprintf(buf, sizeof(buf), "A %d", (int)i + 1);
        radiobutton_create(cont1, buf);

    }
    /*Make the first checkbox checked*/
    lv_obj_add_state(lv_obj_get_child(cont1, 0), LV_STATE_CHECKED);

    lv_obj_t * cont2 = lv_obj_create(lv_scr_act());
    lv_obj_set_flex_flow(cont2, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_size(cont2, lv_pct(40), lv_pct(80));
    lv_obj_set_x(cont2, lv_pct(50));
    lv_obj_add_event_cb(cont2, radio_event_handler, LV_EVENT_CLICKED, &active_index_2);

    for(i = 0; i < 3; i++) {
        lv_snprintf(buf, sizeof(buf), "B %d", (int)i + 1);
        radiobutton_create(cont2, buf);
    }

    /*Make the first checkbox checked*/
    lv_obj_add_state(lv_obj_get_child(cont2, 0), LV_STATE_CHECKED);
}


#endif

MicroPython code  

 GitHub Simulator
Error encountered while trying to open D:\lv_port_pc_eclipse-release-v8.3\lvgl\examples\widgets\checkbox\lv_example_checkbox_2.py

API

Enums

enum lv_checkbox_draw_part_type_t

type field in lv_obj_draw_part_dsc_t if class_p = lv_checkbox_class Used in LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END

Values:

enumerator LV_CHECKBOX_DRAW_PART_BOX

The tick box

Functions

lv_obj_t *lv_checkbox_create(lv_obj_t *parent)

Create a check box object

Parameters

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

Returns

pointer to the created check box

void lv_checkbox_set_text(lv_obj_t *obj, const char *txt)

Set the text of a check box. txt will be copied and may be deallocated after this function returns.

Parameters
  • cb -- pointer to a check box

  • txt -- the text of the check box. NULL to refresh with the current text.

void lv_checkbox_set_text_static(lv_obj_t *obj, const char *txt)

Set the text of a check box. txt must not be deallocated during the life of this checkbox.

Parameters
  • cb -- pointer to a check box

  • txt -- the text of the check box.

const char *lv_checkbox_get_text(const lv_obj_t *obj)

Get the text of a check box

Parameters

cb -- pointer to check box object

Returns

pointer to the text of the check box

Variables

const lv_obj_class_t lv_checkbox_class
struct lv_checkbox_t

Public Members

lv_obj_t obj
char *txt
uint32_t static_txt