LVGL 控件之复选框（lv_checkbox）和下拉列表（lv_dropdown）

于 2024-09-05 08:54:59 发布
阅读量2.2w 收藏 27
点赞数 25
分类专栏： # LVGl 文章标签： 嵌入式 LVGL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/teminator_/article/details/141913386
版权

目录

一、复选框

1、组成

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

  • LV_PART_MAIN 这是复选框的背景，它使用文本和所有典型的背景样式属性。 pad_column 调整复选框和标签之间的间距
  • LV_PART_INDICATOR “勾选框”是一个使用所有典型背景样式属性的正方形。 默认情况下，它的大小等于主要部分字体的高度。 填充属性使复选框在相应方向上变大。

void my_gui(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);
}

2、设置复选框文本

复选框部件的文本设置函数有两个：lv_checkbox_set_text 和 lv_checkbox_set_text_static，前者设置的文本是保存在动态分配的内存中的，而后者设置的是静态的文本。

在这里插入图片描述

void my_gui(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);
}

3、复选框部件的状态

复选框的状态有三种：选中、未选中以及禁用，用户需要为其添加、清除状态，可以调用 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); /* 清除禁用状态 */

在这里插入图片描述

void my_gui(void)
{
    lv_obj_t *cb1 = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb1, "CheckBox1");
    lv_obj_add_state(cb1, LV_STATE_CHECKED);  // 设置选中状态
    lv_obj_align(cb1, LV_ALIGN_CENTER, 0,0);

    lv_obj_t *cb2 = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb2, "CheckBox2");
    lv_obj_add_state(cb2, LV_STATE_DISABLED);
    lv_obj_add_state(cb2, LV_STATE_CHECKED);  // 设置选中并禁用状态

    lv_obj_align(cb2, LV_ALIGN_CENTER, 0, 50);

    lv_obj_t *cb3 = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb3, "CheckBox3");
    lv_obj_add_state(cb3, LV_STATE_DISABLED);  // 设置禁用状态
    lv_obj_align(cb3, LV_ALIGN_CENTER, 0, 100);
}

4、复选框事件

  1. LV_EVENT_VALUE_CHANGED：当复选框被切换时发送；
  2. LV_EVENT_DRAW_PART_BEGIN：绘制开始；
  3. LV_EVENT_DRAW_PART_END：绘制结束。

例：通过点击复选框触发事件，并打印记录下事件：

static lv_obj_t* cb1;
static lv_obj_t* cb2;
static lv_obj_t* cb3;

static void checkbox_event_cb(lv_event_t *e) {
    lv_obj_t *target = lv_event_get_target(e);

    if(target == cb1) {
        printf("cb1 clicked!\r\n");
    } else if (target == cb2) {
        printf("cb2 clicked!\r\n");
    } else if (target == cb3) {
        printf("cb3 clicked!\r\n");
    }
}

void my_gui(void) {
    cb1 = lv_checkbox_create(lv_scr_act());    /* 创建复选框 */
    lv_checkbox_set_text(cb1, "CheckBox1");    /* 动态设置复选框的文本 */
    lv_obj_align(cb1, LV_ALIGN_CENTER, 0, 0);

    cb2 = lv_checkbox_create(lv_scr_act());    /* 创建复选框 */
    lv_checkbox_set_text(cb2, "CheckBox2");    /* 动态设置复选框的文本 */
    lv_obj_align(cb2, LV_ALIGN_CENTER, 0, 50);

    cb3 = lv_checkbox_create(lv_scr_act());    /* 创建复选框 */
    lv_checkbox_set_text(cb3, "CheckBox3");    /* 动态设置复选框的文本 */
    lv_obj_align(cb3, LV_ALIGN_CENTER, 0, 100);


    lv_obj_add_event_cb(cb1, checkbox_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_add_event_cb(cb2, checkbox_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_add_event_cb(cb3, checkbox_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

5、API 函数

函数含义
lv_checkbox_create()创建复选框
lv_checkbox_set_text()设置复选框的文本。文本的内存可能会被释放
lv_checkbox_set_text_static()设置复选框的文本。文本将在静态区中
lv_checkbox_get_text()获取复选框的文本

二、下拉列表

1、组成

下拉列表部件由五个部分组成，示意图如下：

按钮部分：

  1. LV_PART_MAIN：按钮的主体背景；
  2. LV_PART_INDICATOR：指示器，例如上图向下的箭头。

列表部分：

  1. LV_PART_SELECTED：当前选中的选项；
  2. LV_PART_SCROLLBAR：滚动条；
  3. LV_PART_MAIN：列表主体背景。

下拉列表允许用户从选项列表中选择一个值。

下拉列表的选项表默认是关闭的，其中的选项可以是单个值或预定义文本。 当单击下拉列表后，其将创建一个列表，用户可以从中选择一个选项。 当用户选择了一个值后，该列表将被删除，下次点击会再重新生成。

下拉列表已经添加到默认组。此外，下拉列表是一个可编辑的对象，允许通过编码器导航选项。

lv_obj_t *dd = lv_dropdown_create(lv_scr_act());
lv_obj_center(dd);

2、选项

2.1 添加选项

用户需要在下拉列表中添加选项，可以使用以下三种方法：

  1. 调用 lv_dropdown_set_options 函数添加选项，该函数如下所示：
lv_dropdown_set_options(dropdown，"First \n Second \n Third");

在上述的函数中，我们通过字符串传递下拉列表选项，这些选项字符串之间通过‘\n’ 进行分隔。

  1. 调用 lv_dropdown_add_option 函数添加选项，该函数如下所示：
lv_dropdown_add_option(dropdown，"New option"，pos);

上述的函数只会添加一个选项，其形参 pos 表示添加的位置，注意：0 表示列表最上面的位置，以此向下类推。

  1. 调用 lv_dropdown_set_static_options 函数添加选项，该函数如下所示：
lv_dropdown_set_options_static (dropdown，options);

上述函数所添加的是静态选项，在这种情况下，用户不能再使用 lv_dropdown_add_option 函数添加选项，否则有可能会出现问题。

例：

void my_gui(void)
{
    // 方案一
    lv_obj_t *dd1 = lv_dropdown_create(lv_scr_act());
    lv_dropdown_set_options(dd1, "a\nb\nc\nd");
    lv_dropdown_set_selected(dd1, 0);  // 默认显示的选项
    lv_obj_set_pos(dd1, 100, 100);

    // 方案二
    lv_obj_t *dd2 = lv_dropdown_create(lv_scr_act());
    lv_dropdown_add_option(dd2, "0", 0);
    lv_dropdown_add_option(dd2, "1", 1);
    lv_dropdown_add_option(dd2, "2", 2);
    lv_dropdown_add_option(dd2, "3", 3);
    lv_dropdown_set_selected(dd2, 1);  // 默认显示的选项
    lv_obj_set_pos(dd2, 300, 100);

    // 方案三
    lv_obj_t *dd3 = lv_dropdown_create(lv_scr_act());
    lv_dropdown_set_options_static (dd3, "1");
    lv_obj_set_pos(dd3, 500, 100);
}

2.2 获取当前选中的选项

当用户选中所需的选项之后，如果没有任何反馈，这将无法和其他板块进行交互，因此，我们需要在触发的事件回调中获取当前选中的选项索引和文本，相关函数如下：

lv_dropdown_get_selected(dropdown)  /* 获取选中的选项索引 */

lv_dropdown_get_selected_str(dropdown，buf, buf_size)  /* 获取选项字符串，保存到buf */

上述源码中，第一个函数用于获取选中的选项索引，第二个函数用于获取选中的选项文本，并将其保存到指定的 buf 中。

3、设置

3.1 设置列表展开方向

在默认的情况下，当用户点击下拉列表后，其都是往下展开的，如果用户想修改列表展开的方向，可以调用以下函数：

lv_dropdown_set_dir(dropdown，LV_DIR_LEFT/RIGHT/UP/BOTTOM)  /* 设置展开方向 */

在上述函数中，第二个形参代表列表的展开方向，用户可以选择上、下、左、右四个方向。

lv_dropdown_set_dir(dd1, LV_DIR_LEFT); /* 设置为左侧展开 */

其它几种情况就不一一展示。

3.2 设置下拉列表图标

下拉列表的图标箭头默认是向下的，如果用户修改了列表的展开方向，此时的箭头方向和展开方向就对应不上了。为了解决上述的问题，LVGL 提供了相关的图标设置函数：

lv_dropdown_set_symbol(dropdown，LV_SYMBOL_…)  /* 设置图标 */

在上述函数中，第二个形参代表的是图标，一般情况下，我们调用内部的字体图标即可满足需求，修改后的图标如下图所示：

3.3 设置列表常显文本

在默认情况下，当用户选中某个选项后，该选项的文本会更新到列表的头部，示意图如下：

在上图中， 当用户选中第一个选项，其文本内容（a）将更新到列表头部，如果用户需要设置列表头部的文本为固定内容，可以调用lv_dropdown_set_text 函数。

4、事件

除了 通用事件 ，下拉列表还可以发送以下 特殊事件 ：

  • LV_EVENT_VALUE_CHANGED 在选择新选项或打开/关闭列表时发送。
  • LV_EVENT_CANCEL 列表关闭时发送
  • LV_EVENT_READY 打开列表时发送

5、API 函数

函数描述
lv_dropdown_create()创建下拉列表
lv_dropdown_set_text()设置下拉列表按钮的文本（常显文本）
lv_dropdown_set_options()添加选项（动态）
lv_dropdown_set_options_static()添加选项（静态）
lv_dropdown_add_option()添加单个选项
lv_dropdown_clear_options()清除所有选项
lv_dropdown_set_selected()设置当前所选项
lv_dropdown_set_dir()设置展开方向
lv_dropdown_set_symbol()设置图标
lv_dropdown_set_selected_highlight()设置当前选中的选项是否高亮
lv_dropdown_get_list()获取下拉列表，以设置样式或进行其他修改
lv_dropdown_get_text()获取下拉列表按钮的文本
lv_dropdown_get_options()获取下拉列表的选项
lv_dropdown_get_selected()获取所选选项的索引
lv_dropdown_get_option_cnt()获取选项的总数
lv_dropdown_get_selected_str()获取当前选中的选项文本
lv_dropdown_get_symbol()获取图标
lv_dropdown_get_selected_highlight()判断当前选中的选项是否高亮
lv_dropdown_get_dir()获取展开方向
lv_dropdown_open()打开下拉列表
lv_dropdown_close()关闭下拉列表
Projectsauron
关注
专栏目录
LVGL---复选框(lv_checkbox)
weixin_42162924的博客
11-26 1027
LVGL---复选框(lv_checkbox)
LVGL_基础控件dropdown
会选科技的博客
10-05 711
【代码】LVGL_基础控件dropdown。
LVGL--复选框部件（lv_checkbox)
m0_63472758的博客
02-22 446
复选框部件常用于选择某个内容的开启和关闭，可以理解为自带的开关。复选框的组成部分：@主体（LV_PART_MAIN)@勾选框（LV_PART_INDICATOR)
LVGL学习笔记12 - 复选框CheckBox
pq的博客
01-03 1955
复选框通过lv_checkbox_create创建。一个CheckBox由一个点击框加一个Label组成。注意，CheckBox的size可以不用设置，会自动匹配字符串长度。字符串可以通过lv_checkbox_set_text和lv_checkbox_set_text_static更改。
【LVGL-下拉列表部件 lv_dropdown】
最新发布
sinat_23896491的博客
08-25 504
在上述源码中，我们调用了 lv_dropdown_set_tex函数，把第一个列表（ lv_ddlist1）的头部文本固定为“ dropdown”当用户选中所需的选项之后，如果没有任何反馈，这将无法和其他板块进行交互，因此， 我们需要在触发的事件回调中获取当前选中的选项索引和文本，② LV_PART_INDICATOR：指示器，例如上图向下的箭头。③ LV_PART_SELECTED：当前选中的选项；lv_dropdown_set_text 函数，① LV_PART_MAIN：按钮的主体背景；
LVGL——复选框部件
weixin_63780683的博客
12-11 686
4、获取（判断）复选框状态。3、添加、清除复选框状态。
CXListCtrl-x64_编辑框_列表控件_下拉框_复选框_
09-29
综上所述，这个项目提供了一个功能丰富的CXListCtrl控件，集成了编辑框、复选框和下拉框，增强了列表控件的交互性和可用性，适配了现代开发环境，是Windows应用程序开发中的一个实用工具。开发者可以通过这些源代码...
STM32H562实现LVGL lv_checkbox(复选框)【支持STM32H系列单片机】.zip
07-08
STM32H562 LVGL绘画实战，支持STM32H系列单片机。 项目代码可直接编译运行~
labview-data.rar_LABVIEW 复选框_labview复选框_labview曲线可见_可见labview
07-14
在LabVIEW编程中，复选框（Checkbox）和曲线图是两种常见的用户界面元素，它们在数据可视化和交互式操作中扮演着重要角色。本文将详细介绍如何利用LabVIEW的复选框控制曲线图的可见性，以及涉及的相关知识点。 首先...
BootStrap表单控件之复选框checkbox和单选择按钮radio
08-30
Bootstrap 表单控件之复选框Checkbox和单选择按钮Radio Bootstrap框架提供了多种表单控件，包括复选框Checkbox和单选择按钮Radio。这些控件可以帮助开发者快速搭建Web应用程序的表单界面。 复选框Checkbox ...
LVGL学习笔记19 - 下拉列表dropdown
pq的博客
03-12 5938
下拉列表由lv_dropdown_create创建。
lvgl-复选框学习篇(六)
weixin_41080308的博客
01-12 1394
本篇文章介绍了lvgl中复选框基本知识
LVGL——下拉列表
weixin_63780683的博客
12-13 883
【代码】LVGL——下拉列表。
LVGL---下拉列表(lv_dropdown)
weixin_42162924的博客
11-26 961
LVGL---下拉列表(lv_dropdown)
LVGL--下拉列表部件(lv_dropdwon)
m0_63472758的博客
02-23 523
【代码】LVGL--下拉列表部件(lv_dropdwon)
lvgl cb（复选框）
chenliang0224的专栏
01-06 529
1.创建复选框对象 2.设置复选框文本 3.设置复选框位置 5.为复选框绑定事件 //5.复选框 //5.1 创建复选框对象 lv_obj_t * cb = lv_cb_create(lv_scr_act(), NULL); //5.2 设置复选框文本 lv_cb_set_text(cb, "I am the check box!"); //5.3 设置位置 lv_obj_align(cb, NULL, LV_ALIGN_CENTER, 0, 0); //5.4 绑定事件 ...
GUI重要组件之一的复选框，安排，LVGL『Checkbox复选框控件』介绍
朝气蓬勃
02-25 3896
一. 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_c
LVGL_基础控件checkbox
会选科技的博客
10-05 627
【代码】LVGL_基础控件checkbox。
lvgl 左右滑动列表
05-19
在LVGL中实现左右滑动列表可以使用lv_sw的组件。 首先，你需要创建一个父容器，并将该容器设置为滑动容器(lv_sw)，将其方向设置为水平滑动。 然后，你需要在该容器中添加一个或多个子容器，每个子容器代表列表中的一个项目。 最后，你可以在每个子容器中添加需要显示的控件，例如文本标签(lv_label)或图像(lv_img)等。 下面是一个示例代码，其中包含了一个滑动容器和三个子容器，每个子容器包含一个文本标签： ```c //创建一个父容器 lv_obj_t *sw = lv_sw_create(lv_scr_act(), NULL); //设置容器方向为水平滑动 lv_sw_set_dir(sw, LV_DIR_HOR); //创建第一个子容器 lv_obj_t *cont1 = lv_cont_create(sw, NULL); lv_obj_set_width(cont1, 100); //设置容器宽度 lv_cont_set_fit(cont1, LV_FIT_TIGHT); //设置容器适应内容大小 lv_cont_set_layout(cont1, LV_LAYOUT_COLUMN_MID); //设置容器布局方式 lv_cont_set_style(cont1, LV_CONT_STYLE_MAIN, &lv_style_transp_tight); //设置容器样式 //在第一个子容器中添加一个文本标签 lv_obj_t *label1 = lv_label_create(cont1, NULL); lv_label_set_text(label1, "Item 1"); //设置标签文本 //创建第二个子容器，添加标签 lv_obj_t *cont2 = lv_cont_create(sw, cont1); //使用第一个子容器作为父容器 lv_obj_set_width(cont2, 100); lv_cont_set_fit(cont2, LV_FIT_TIGHT); lv_cont_set_layout(cont2, LV_LAYOUT_COLUMN_MID); lv_cont_set_style(cont2, LV_CONT_STYLE_MAIN, &lv_style_transp_tight); lv_obj_t *label2 = lv_label_create(cont2, NULL); lv_label_set_text(label2, "Item 2"); //创建第三个子容器，添加标签 lv_obj_t *cont3 = lv_cont_create(sw, cont2); lv_obj_set_width(cont3, 100); lv_cont_set_fit(cont3, LV_FIT_TIGHT); lv_cont_set_layout(cont3, LV_LAYOUT_COLUMN_MID); lv_cont_set_style(cont3, LV_CONT_STYLE_MAIN, &lv_style_transp_tight); lv_obj_t *label3 = lv_label_create(cont3, NULL); lv_label_set_text(label3, "Item 3"); ``` 注意，在实际应用中，你需要根据自己的需求来调整容器和子控件的大小和位置。
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值