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

2024-09-05 10:52
文章标签 列表 控件 复选框 lvgl dropdown checkbox lv

本文主要是介绍LVGL 控件之复选框（lv_checkbox）和下拉列表（lv_dropdown），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

  • 一、复选框
    • 1、组成
    • 2、设置复选框文本
    • 3、复选框部件的状态
    • 4、复选框事件
    • 5、API 函数
  • 二、下拉列表
    • 1、组成
    • 2、选项
      • 2.1 添加选项
      • 2.2 获取当前选中的选项
    • 3、设置
      • 3.1 设置列表展开方向
      • 3.2 设置下拉列表图标
      • 3.3 设置列表常显文本
    • 4、事件
    • 5、API 函数

一、复选框

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()关闭下拉列表

这篇关于LVGL 控件之复选框（lv_checkbox）和下拉列表（lv_dropdown）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1138757。

相关文章

c++的初始化列表与const成员

c++的初始化列表与const成员

初始化列表与const成员 const成员 使用const修饰的类、结构、联合的成员变量，在类对象创建完成前一定要初始化。 不能在构造函数中初始化const成员，因为执行构造函数时，类对象已经创建完成，只有类对象创建完成才能调用成员函数，构造函数虽然特殊但也是成员函数。 在定义const成员时进行初始化，该语法只有在C11语法标准下才支持。 初始化列表 在构造函数小括号后面，主要用于给
阅读更多...
Spring+MyBatis+jeasyui 功能树列表

Spring+MyBatis+jeasyui 功能树列表

java代码@EnablePaging@RequestMapping(value = "/queryFunctionList.html")@ResponseBodypublic Map<String, Object> queryFunctionList() {String parentId = "";List<FunctionDisplay> tables = query(parent
阅读更多...
lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局，其中 label 控件位于 image 控件下方，你可以使用 lv_obj_set_flex_flow 来设置布局为垂直，并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例： 创建父容器：首先创建一个容器对象，该对象将作为布局的基础。设置容器为垂直布局：使用 lv_obj_set_flex_flow 设置容器
阅读更多...
小程序button控件上下边框的显示和隐藏

小程序button控件上下边框的显示和隐藏

问题 想使用button自带的loading图标功能，但又不需要button显示边框线 button控件有一条淡灰色的边框，在控件上了样式 border:none; 无法让button边框隐藏 代码如下： <button class="btn">.btn{border:none; /*一般使用这个就是可以去掉边框了*/} 解决方案 发现button控件有一个伪元素（::after
阅读更多...
MFC中Spin Control控件使用，同时数据在Edit Control中显示

MFC中Spin Control控件使用，同时数据在Edit Control中显示

实现mfc spin control 上下滚动，只需捕捉spin control 的 UDN_DELTAPOD 消息，如下：  OnDeltaposSpin1(NMHDR *pNMHDR, LRESULT *pResult) {  LPNMUPDOWN pNMUpDown = reinterpret_cast(pNMHDR);  // TODO: 在此添加控件通知处理程序代码    if
阅读更多...
Exchange 服务器地址列表的配置方法与注意事项

Exchange 服务器地址列表的配置方法与注意事项

Exchange Server 是微软推出的一款企业级邮件服务器软件，广泛应用于企业内部邮件系统的搭建与管理。配置 Exchange 服务器地址列表是其中一个关键环节。本文将详细介绍 Exchange 服务器地址列表的配置方法与注意事项，帮助系统管理员顺利完成这一任务。 内容目录 1. 引言 2. 准备工作 3. 配置地址列表 3.1 创建地址列表 3.2 使用 Exchange
阅读更多...
MFC 控件重绘(2) NM_CUSTOMDRAW, WM_DRAWITEM, 虚函数DrawItem

MFC 控件重绘(2) NM_CUSTOMDRAW, WM_DRAWITEM, 虚函数DrawItem

控件重绘有三种方法： 1 设定界面属性 2 利用Windows的消息机制，通过Windows消息映射(Message Mapping)和反映射(Message Reflecting)，在合适的时机修改控件的状态和行为。此方式涉及NM_CUSTOMDRAW和WM_DRAWITEM 3 利用虚函数机制，重载虚函数。即DrawItem虚函数。 对于NM_CUSTOMDRAW,某些支持此消息的控件
阅读更多...
Python--列表简介

Python--列表简介

列表是什么 列表让你能够在⼀个地方存储成组的信息，其中既可以只包含几个元素，也可以包含数百万个元素。列表是新手可直接使用的最强大的Python 功能之⼀。 列表（list）是一种可变的序列类型，用于存储一系列有序的元素。这些元素可以是任何类型，包括整数、浮点数、字符串、其他列表（即嵌套列表）等。列表是动态的，可以在运行时增加或删除元素。 用方括号（[ ]）表示列表，用逗号分隔其中的元素。
阅读更多...
C# 通过拖控件移动窗体

C# 通过拖控件移动窗体

目录 引言一、通过控件事件移动窗体1、创建窗体界面2、添加控件事件3、添加代码 二、通过windowsAPI移动窗体1、 构建窗体和添加事件2、代码展示 引言 在C#Form窗体设计中，如果我们不需要使用默认边框设计自己个性化的窗体（FromBorderStyle=none时），这时候你会发现拖动窗体的功能就没有了，这里需要自己构建方法让用户可以拖动整个窗体，这里我们使用前辈的
阅读更多...
Qt-常用控件（3）-多元素控件、容器类控件和布局管理器

Qt-常用控件（3）-多元素控件、容器类控件和布局管理器

1. 多元素控件 Qt 中提供的多元素控件有: QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeView xxWidget 和 xxView 之间的区别，以 QTableWidget 和 QTableView 为例. QTableView 是基于 MVC 设计的控件.QTableView 自身不持有数据,使用 QTab
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2