LVGL学习笔记12 - 复选框CheckBox

目录

1. Parts

1.1 LV_PART_MAIN

1.2 LV_PART_INDICATOR

2. 状态

3. 样式

3.1 设置字符串颜色

 3.2 设置点击框外框颜色

 3.3 修改点击框弧度

 3.4 修改字符串与点击框的间隔

4. 事件

---

复选框通过lv_checkbox_create创建。一个CheckBox由一个点击框加一个Label组成。

obj1 = lv_checkbox_create(lv_scr_act());
lv_obj_align(obj1, LV_ALIGN_TOP_LEFT, 10, 10);

注意，CheckBox的size可以不用设置，会自动匹配字符串长度。

字符串可以通过lv_checkbox_set_text和lv_checkbox_set_text_static更改。

1. Parts

1.1 LV_PART_MAIN

对应背景和字符串，可以理解为这部分就是一个Label（功能比较少，比如不支持长字符串卷动）。

背景默认是透明的。

lv_obj_set_style_bg_color(obj1, lv_color_make(252, 144, 181), LV_PART_MAIN);
lv_obj_set_style_bg_opa(obj1, LV_OPA_50, LV_PART_MAIN);

lv_obj_set_style_text_color(obj1, lv_color_make(246, 174, 49), LV_PART_MAIN);

 

1.2 LV_PART_INDICATOR

对应方框。默认情况下，方框的大小和字体大小一致。

lv_obj_set_style_bg_color(obj1, lv_color_make(252, 144, 181), LV_PART_INDICATOR);

2. 状态

复选框的状态包括：Check和Uncheck、Disable和Enable、Focused和Unfocused，通过lv_obj_add_state设置为LV_STATE_CHECKED和/或LV_STATE_DISABLED和/或LV_STATE_FOCUSED，通过lv_obj_clear_state解除对应的状态。

lv_obj_add_state(obj1, LV_STATE_CHECKED);
lv_obj_add_state(obj2, LV_STATE_DISABLED);

3. 样式

3.1 设置字符串颜色

lv_obj_set_style_text_color(obj1, lv_color_hex(0xFF0000), LV_PART_MAIN);

 

 3.2 设置点击框外框颜色

lv_obj_set_style_border_color(obj1, lv_color_make(252, 144, 181), LV_PART_INDICATOR);

 3.3 修改点击框弧度

lv_obj_set_style_radius(obj1, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);

 3.4 修改字符串与点击框的间隔

lv_obj_set_style_pad_column(obj1, 40, LV_PART_MAIN);

4. 事件

当CheckBox 触发时产生LV_EVENT_VALUE_CHANGED事件。

lv_obj_add_event_cb(obj1, chkboxEventHandle, LV_EVENT_VALUE_CHANGED, NULL);

static void chkboxEventHandle(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_checkbox_set_text(obj, state);

    }
}