GUI重要组件之一的复选框，安排，LVGL『Checkbox复选框控件』介绍

原创专注于无线通信的蓬勃 2021-02-25 07:30

【应用手册】TI 全新MCU及C29内核的电动汽车应用方案 如何增强能源基础设施的实时控制？

一. LVGL GUI复选框控件的概念

复选框是一种可同时选中多项的基础控件，他是什么模样来，来几张图说明下

总之这个是GUI中使用频率比较高的一种控件！

二. LVGL GUI复选框小部件和样式

有两种小部件：

LV_CHECKBOX_PART_BG：背景

LV_CHECKBOX_PART_BULLET：指的是复选框本身的小框框，不包含文字

写一个代码来看下：

void lvgl_check_box_part_test(void)
{
    lv_obj_t* cb1 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb1, "Check Box 1");
    lv_obj_align(cb1, NULL, LV_ALIGN_CENTER, 0, -40);

    
    lv_obj_t* cb2 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb2, "Check Box 2");
    lv_obj_align(cb2, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_style_local_bg_color(cb2, LV_CHECKBOX_PART_BG, LV_STATE_DEFAULT, LV_COLOR_RED);

    lv_obj_t* cb3 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb3, "Check Box 3");
    lv_obj_align(cb3, NULL, LV_ALIGN_CENTER, 0, 40);
    lv_obj_set_style_local_bg_color(cb3, LV_CHECKBOX_PART_BULLET, LV_STATE_DEFAULT, LV_COLOR_BLUE);
}

效果：

三. LVGL GU复选框控件的使用

1. 文本(Text)

被复选框添加文本，用这个函数lv_checkbox_set_text(cb, "New text")

代码以及效果如下：

void lvgl_check_box_text_test(void)
{
    lv_obj_t* cb1 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb1, "This check Box 1");
    lv_obj_align(cb1, NULL, LV_ALIGN_CENTER, 0, -40);


    lv_obj_t* cb2 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb2, "This check Box 2");
    lv_obj_align(cb2, NULL, LV_ALIGN_CENTER, 0, 0);


    lv_obj_t* cb3 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb3, "This check Box 3");
    lv_obj_align(cb3, NULL, LV_ALIGN_CENTER, 0, 40);
}

2. 选中/未选中(Check/Uncheck)

复选框是否被选中，用这个函数设置复选框是否被选中，下面我们就创建两个复选框，一个默认选中，一个默认没有选中（默认就是没有选中的）

void lvgl_check_box_check_test(void)
{
    lv_obj_t* cb1 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb1, "This check Box 1");
    lv_obj_align(cb1, NULL, LV_ALIGN_CENTER, 0, -40);


    lv_obj_t* cb2 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb2, "This check Box 2");
    lv_obj_align(cb2, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_checkbox_set_checked(cb2,true);
}

3. 禁用(Disabled)

这个的意思就是把复选框灰掉，导致不可点击，用这个函数实现lv_checkbox_set_disabled(cb, true)。

注意:

LVGL官网是带两个参数的，但是我用的7.10版本已经是一个参数了，只有object指针！
你会发现并没有找到重新enable的函数，我自己试验发现把check状态设置了就是enable了！

我们同样实现三个复选框，一个正常的复选框控件，第二个是禁用的，第三个是禁用后然后设置check状态后重新enable的

void lvgl_check_box_disable_test(void)
{
    lv_obj_t* cb1 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb1, "This check Box 1");
    lv_obj_align(cb1, NULL, LV_ALIGN_CENTER, 0, -40);


    lv_obj_t* cb2 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb2, "This check Box 2");
    lv_obj_align(cb2, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_checkbox_set_disabled(cb2);

    lv_obj_t* cb3 = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb3, "This check Box 3");
    lv_obj_align(cb3, NULL, LV_ALIGN_CENTER, 0, 40);
    lv_checkbox_set_disabled(cb3);
    lv_checkbox_set_checked(cb3, true);
}

4. 获取/设置状态(Get/Set Checkbox State)

获取状态用以下函数lv_checkbox_get_state(cb)

设置状态用以下函数lv_checkbox_set_state(cb, state)

其中状态值有以下：

LV_BTN_STATE_RELEASED
LV_BTN_STATE_PRESSED
LV_BTN_STATE_DISABLED
LV_BTN_STATE_CHECKED_RELEASED
LV_BTN_STATE_CHECKED_PRESSED
LV_BTN_STATE_CHECKED_DISABLED

5. 事件(Event)

除了基本事件外，复选框有个特殊事件

LV_EVENT_VALUE_CHANGED ：当切换复选框状态的时候会产生，我们来写个代码验证下

static void check_box_event_handler(lv_obj_t* obj, lv_event_t event)
{
    if (event == LV_EVENT_VALUE_CHANGED) {
        printf("State: %s\n", lv_checkbox_is_checked(obj) ? "Checked" : "Unchecked");
    }
}

void lvgl_check_box_test(void)
{
    lv_obj_t* cb = lv_checkbox_create(lv_scr_act(), NULL);
    lv_checkbox_set_text(cb, "I agree to terms and conditions.");
    lv_obj_align(cb, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(cb, check_box_event_handler);
}