LVGL部件篇：复选框部件(lv_checkbox)

爱学电子的刻刻帝

已于 2025-01-01 14:17:43 修改

阅读量1k

点赞数 28

分类专栏： LVGL 文章标签： LVGL

于 2025-01-01 14:15:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74676415/article/details/144866782

版权

LVGL 专栏收录该内容

12 篇文章

订阅专栏

简介

复选框部件常用于条款、协议的确定，以及一些多选项控制的场景。

复选框部件的组成

lv_obj_t * obj =lv_checkbox_create(lv_scr_act());
lv_obj_center(obj);

复选框部件由两个部分组成：主体和勾选框，示意图如下：

勾选框：LV_PART_INDICATOR)

主体：LV_PART_MAIN

关于部件样式设置的内容，请大家去看LVGL基础知识。

复选框部件的相关知识

设置复选框文本

复选框部件的文本设置函数有两个：lv_checkbox_set_text 和 lv_checkbox_set_text_static，前者设置的文本是保存在动态分配的内存中的，而后者设置的是静态的文本。接下来，我们以简单示例来理解复选框文本的设置，示例代码如下所示：

/**
* @brief LVGL演示
* @param 无
* @return 无
*/
void lv_mainstart(void)
{
lv_obj_t* cb1 = lv_checkbox_create(lv_scr_act()); /* 创建复选框 */
lv_checkbox_set_text(cb1, "CheckBox1"); /* 动态设置复选框的文本 */
lv_obj_align(cb1, LV_ALIGN_CENTER, 0,0);
lv_obj_t* cb2 = lv_checkbox_create(lv_scr_act()); /* 创建复选框 */
lv_checkbox_set_text_static(cb2, "CheckBox2"); /* 静态设置复选框的文本 */
lv_obj_align_to(cb2, cb1,LV_ALIGN_LEFT_MID, 0, 50);

}

复选框部件的状态

复选框的状态有三种：选中、未选中以及禁用，用户需要为其添加、清除状态，可以调用 lv_obj_add_state（添加）和 lv_obj_clear_state（清除）函数，示例如下：

lv_obj_add_state ( cb , LV_STATE_CHECKED );

/* 选中复选框 */

lv_obj_clear_state ( cb , LV_STATE_CHECKED );

/* 清除选中状态（未选中） */

lv_obj_add_state ( cb , LV_STATE_DISABLED );

/* 禁用复选框 */

lv_obj_clear_state ( cb , LV_STATE_DISABLED );

/* 清除禁用状态 */

复选框事件

① LV_EVENT_VALUE_CHANGED：当复选框被切换时发生；

② LV_EVENT_DRAW_PART_BEGIN ：绘制开始；

③ LV_EVENT_DRAW_PART_END ：绘制结束。

复选框部件 API 函数

以下是 lv_checkbox 相关函数的介绍表格，包括函数作用、形参和返回值。

函数名	作用	形参	返回值
`lv_checkbox_create()`	创建一个复选框对象，并将其附加到指定的父对象中。	`lv_obj_t *parent`：父对象，`NULL` 表示添加到当前屏幕。	返回创建的复选框对象的指针。
`lv_checkbox_set_text()`	设置复选框的文本，文本内存由函数管理，调用者可释放传入的文本指针。	`lv_obj_t checkbox`：复选框对象；`const char text`：要设置的文本内容。	无返回值。
`lv_checkbox_set_text_static()`	设置复选框的文本，使用静态文本区（调用者需保证文本生命周期与复选框一致）。	`lv_obj_t checkbox`：复选框对象；`const char text`：静态文本内容。	无返回值。
`lv_checkbox_get_text()`	获取复选框当前的文本内容。	`lv_obj_t *checkbox`：复选框对象。	返回文本字符串的指针。

示例代码：

lv_obj_t *checkbox = lv_checkbox_create(lv_scr_act()); // 创建复选框对象
lv_checkbox_set_text(checkbox, "Accept Terms"); // 设置复选框文本
const char *text = lv_checkbox_get_text(checkbox); // 获取复选框文本
printf("Checkbox text: %s\n", text);

复选框部件实验

例程功能：

屏幕上显示四个复选框、一个主标题（MENU）和一个总价格（Aggregate），勾选不同的项(菜品)，对应的价格会不同，其总价会显示在屏幕下方。

/* 获取当前活动屏幕的宽高 */
#define scr_act_width() lv_obj_get_width(lv_scr_act())
#define scr_act_height() lv_obj_get_height(lv_scr_act())

static int16_t aggregate = 0;                   /* 定义总价格 */

static const lv_font_t *font;                   /* 定义字体 */

static lv_obj_t *label_menu;                    /* 菜单标题标签 */
static lv_obj_t *label_aggregate;               /* 总价格标签 */

/* 定义复选框 */
static lv_obj_t *checkbox1;
static lv_obj_t *checkbox2;
static lv_obj_t *checkbox3;
static lv_obj_t *checkbox4;

/**
 * @brief  回调事件
 * @param  *e ：事件相关参数的集合，它包含了该事件的所有数据
 * @return 无
 */
static void checkbox_event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);                              /* 获取触发源 */

    if(target == checkbox1)                                                 /* 复选框1触发 */
    {
        lv_obj_has_state(checkbox1, LV_STATE_CHECKED) ? (aggregate += 19) : (aggregate -= 19);
    }
    else if(target == checkbox2)                                            /* 复选框2触发 */
    {
        lv_obj_has_state(checkbox2, LV_STATE_CHECKED) ? (aggregate += 29) : (aggregate -= 29);
    }

    lv_label_set_text_fmt(label_aggregate, "Aggregate  :  $%d", aggregate); /* 更新总价格标签 */
}

/**
 * @brief  标题、总价格标签
 * @param  无
 * @return 无
 */
static void lv_example_label(void)
{
    /* 根据活动屏幕宽度选择字体 */
    if (scr_act_width() <= 480)
    {
        font = &lv_font_montserrat_14;
    }
    else
    {
        font = &lv_font_montserrat_20;
    }

    /* 菜单标题标签 */
    label_menu = lv_label_create(lv_scr_act());
    lv_label_set_text(label_menu, "MENU");
    lv_obj_set_style_text_font(label_menu, font, LV_STATE_DEFAULT);
    lv_obj_align(label_menu, LV_ALIGN_CENTER, 0, -scr_act_height() * 2 / 5 );

    /* 总价格标签 */
    label_aggregate = lv_label_create(lv_scr_act());
    lv_label_set_text(label_aggregate, "Aggregate  :  $0");
    lv_obj_set_style_text_font(label_aggregate, font, LV_STATE_DEFAULT);
    lv_obj_align(label_aggregate, LV_ALIGN_CENTER, 0, scr_act_height() * 2 / 5 );
}

/**
 * @brief  菜品复选框
 * @param  无
 * @return 无
 */
static void lv_example_checkbox(void)
{
    /* 创建基础对象作为背景 */
    lv_obj_t *obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj, scr_act_width() * 4 /5 , scr_act_height() * 3 /5);
    lv_obj_align(obj, LV_ALIGN_CENTER, 0 , 0);

    /* 菜品1复选框 */
    checkbox1 = lv_checkbox_create(obj);
    lv_checkbox_set_text(checkbox1, "Roast chicken     $19");
    lv_obj_set_style_text_font(checkbox1, font, LV_STATE_DEFAULT);
    lv_obj_align(checkbox1, LV_ALIGN_LEFT_MID, 0, -scr_act_height() / 5 );
    lv_obj_add_event_cb(checkbox1, checkbox_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    /* 菜品2复选框 */
    checkbox2 = lv_checkbox_create(obj);
    lv_checkbox_set_text(checkbox2, "Roast duck     $29");
    lv_obj_set_style_text_font(checkbox2, font, LV_STATE_DEFAULT);
    lv_obj_align_to(checkbox2, checkbox1, LV_ALIGN_OUT_BOTTOM_LEFT, 0, scr_act_height() / 16);
    lv_obj_add_event_cb(checkbox2, checkbox_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    /* 菜品3复选框 */
    checkbox3 = lv_checkbox_create(obj);
    lv_checkbox_set_text(checkbox3, "Roast fish     $39");
    lv_obj_set_style_text_font(checkbox3, font, LV_STATE_DEFAULT);
    lv_obj_align_to(checkbox3, checkbox2, LV_ALIGN_OUT_BOTTOM_LEFT, 0, scr_act_height() / 16);
    lv_obj_add_state(checkbox3, LV_STATE_DISABLED);

    /* 菜品4复选框 */
    checkbox4 = lv_checkbox_create(obj);
    lv_checkbox_set_text(checkbox4, "Roast lamb     $69");
    lv_obj_set_style_text_font(checkbox4, font, LV_STATE_DEFAULT);
    lv_obj_align_to(checkbox4, checkbox3, LV_ALIGN_OUT_BOTTOM_LEFT, 0, scr_act_height() / 16);
    lv_obj_add_state(checkbox4, LV_STATE_DISABLED);
}

/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
    lv_example_label();     /* 菜单标题、总价标签 */
    lv_example_checkbox();  /* 菜品复选框 */
}

上述源码可分为以下三个部分：

① lv_mainstart 接口函数。在该函数中，我们调用了标签和复选框示例函数；

② 菜品标题、总价格标签的实现。我们先根据当前活动屏幕宽度来选择字体大小，然后再创建菜单标题标签和总价格标签；

③ 菜品复选框的实现。我们先创建出来一个背景（基础对象），然后在背景中添加 4个菜品复选框并为它们添加事件回调。当用户修改某个复选框的状态时，会触发事件回调，在回调函数中，更新当前的总价格。

CodeBlocks 中进行运行查看：