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。

相关文章

Python中DataFrame转列表的最全指南

Python中DataFrame转列表的最全指南

《Python中DataFrame转列表的最全指南》在Python数据分析中,Pandas的DataFrame是最常用的数据结构之一,本文将为你详解5种主流DataFrame转换为列表的方法,大家可以... 目录引言一、基础转换方法解析1. tolist()直接转换法2. values.tolist()矩阵
阅读更多...
Android App安装列表获取方法(实践方案)

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式
阅读更多...
python展开嵌套列表的多种方法

python展开嵌套列表的多种方法

《python展开嵌套列表的多种方法》本文主要介绍了python展开嵌套列表的多种方法,包括for循环、列表推导式和sum函数三种方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、嵌套列表格式二、嵌套列表展开方法（一）for循环（1）for循环+append()（2）for循环+pyPhWiFd
阅读更多...
Python容器类型之列表/字典/元组/集合方式

Python容器类型之列表/字典/元组/集合方式

《Python容器类型之列表/字典/元组/集合方式》：本文主要介绍Python容器类型之列表/字典/元组/集合方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 列表（List） - 有序可变序列1.1 基本特性1.2 核心操作1.3 应用场景2. 字典（D
阅读更多...
Java中数组转换为列表的两种实现方式(超简单)

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架（Arrays.asList）1.1 示例代码1.
阅读更多...
python中列表list切分的实现

python中列表list切分的实现

《python中列表list切分的实现》列表是Python中最常用的数据结构之一,经常需要对列表进行切分操作,本文主要介绍了python中列表list切分的实现,文中通过示例代码介绍的非常详细,对大家... 目录一、列表切片的基本用法1.1 基本切片操作1.2 切片的负索引1.3 切片的省略二、列表切分的高
阅读更多...
Python如何计算两个不同类型列表的相似度

Python如何计算两个不同类型列表的相似度

《Python如何计算两个不同类型列表的相似度》在编程中,经常需要比较两个列表的相似度,尤其是当这两个列表包含不同类型的元素时,下面小编就来讲讲如何使用Python计算两个不同类型列表的相似度吧... 目录摘要引言数字类型相似度欧几里得距离曼哈顿距离字符串类型相似度Levenshtein距离Jaccard相
阅读更多...
Redis存储的列表分页和检索的实现方法

Redis存储的列表分页和检索的实现方法

《Redis存储的列表分页和检索的实现方法》在Redis中,列表（List）是一种有序的数据结构,通常用于存储一系列元素,由于列表是有序的,可以通过索引来访问元素,因此可以很方便地实现分页和检索功能,... 目录一、Redis 列表的基本操作二、分页实现三、检索实现3.1 方法 1：客户端过滤3.2 方法
阅读更多...
C#实现WinForm控件焦点的获取与失去

C#实现WinForm控件焦点的获取与失去

《C#实现WinForm控件焦点的获取与失去》在一个数据输入表单中,当用户从一个文本框切换到另一个文本框时,需要准确地判断焦点的转移,以便进行数据验证、提示信息显示等操作,本文将探讨Winform控件... 目录前言获取焦点改变TabIndex属性值调用Focus方法失去焦点总结最后前言在一个数据输入表单
阅读更多...
Python实现将实体类列表数据导出到Excel文件

Python实现将实体类列表数据导出到Excel文件

《Python实现将实体类列表数据导出到Excel文件》在数据处理和报告生成中,将实体类的列表数据导出到Excel文件是一项常见任务,Python提供了多种库来实现这一目标,下面就来跟随小编一起学习一... 目录一、环境准备二、定义实体类三、创建实体类列表四、将实体类列表转换为DataFrame五、导出Da
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2