本文理论知识居多，开始一遍了解功能即可，后续用到再当字典查，文中涉及的实操界面，需要先搭建环境，需观看我上一篇文章：创建第一个LVGL工程https://mp.weixin.qq.com/s/zJ8hf4f36GGpJW_8vHf0Jw

LVGL应用编程：文本框和键盘控件详解

一、为什么需要文本框和键盘？

想象一下这些场景：

• • 登录时需要输入用户名和密码
• • 搜索时需要输入关键词
• • 设置WiFi时需要输入密码

在这些情况下，我们需要一个可以输入文字的区域，这就是文本框（Textarea）。而要在嵌入式设备上输入文字，我们需要一个虚拟键盘（Keyboard）。

二、文本框（lv_textarea）：让用户输入文字

2.1 创建第一个文本框

文本框就像一个可以输入文字的白板：

// 创建文本框lv_obj_t *ta = lv_textarea_create(lv_scr_act());// 设置为单行模式（类似搜索框）lv_textarea_set_one_line(ta, true);// 居中显示lv_obj_center(ta);

运行效果：你会看到一个可以输入文字的白色方框。

2.2 理解文本框的四个部分

文本框由四个部分组成：

┌─────────────────────────┐│   [请输入...]            │  ← 占位符（PLACEHOLDER）- 提示文字│                         ││   Hello|                │  ← 光标（CURSOR）- 闪烁的竖线│                         ││   -------------------   │  ← 滚动条（SCROLLBAR）- 内容多时显示│                         │  ← 主区域（MAIN）- 整个文本框└─────────────────────────┘

我们可以为每个部分设置不同的样式：

// 1. 主区域（MAIN）- 整个文本框的背景lv_obj_set_style_bg_color(ta, lv_color_hex(0xFFFFFF), LV_PART_MAIN);  // 白色背景lv_obj_set_style_border_color(ta, lv_color_hex(0x000000), LV_PART_MAIN);  // 黑色边框lv_obj_set_style_radius(ta, 5, LV_PART_MAIN);  // 圆角// 2. 文字（TEXT）- 输入的文字lv_obj_set_style_text_color(ta, lv_color_hex(0xFF0000), LV_PART_MAIN);  // 红色文字// 3. 光标（CURSOR）- 输入位置指示lv_obj_set_style_border_color(ta, lv_color_hex(0x00FF00), LV_PART_CURSOR | LV_STATE_FOCUSED);  // 绿色光标lv_obj_set_style_border_width(ta, 2, LV_PART_CURSOR);  // 光标宽度// 4. 占位符（PLACEHOLDER）- 提示文字lv_obj_set_style_text_color(ta, lv_color_hex(0x888888), LV_PART_TEXTAREA_PLACEHOLDER);  // 灰色提示文字// 5. 滚动条（SCROLLBAR）- 内容滚动指示lv_obj_set_style_bg_color(ta, lv_color_hex(0xCCCCCC), LV_PART_SCROLLBAR);  // 灰色滚动条

2.3 文本框的常用功能

设置占位符（提示文字）

lv_textarea_set_placeholder_text(ta, "请输入用户名...");

效果：文本框为空时显示灰色提示文字，开始输入时自动消失。

密码模式（隐藏输入内容）

// 启用密码模式lv_textarea_set_password_mode(ta, true);// 设置密码显示字符（默认是*）lv_textarea_set_password_bullet(ta, "●");  // 使用圆点代替*

限制输入内容

// 只允许输入数字lv_textarea_set_accepted_chars(ta, "0123456789");// 限制最大长度（最多10个字符）lv_textarea_set_max_length(ta, 10);

多行文本框

// 默认是多行模式，或者明确设置lv_textarea_set_one_line(ta, false);  // 允许多行输入// 设置文本框大小（多行需要更大高度）lv_obj_set_size(ta, 200, 100);

2.4 获取和设置文本内容

// 获取文本框内容const char *text = lv_textarea_get_text(ta);printf("当前文本: %s\n", text);// 设置文本框内容lv_textarea_set_text(ta, "默认文本");// 在光标位置插入文本lv_textarea_add_text(ta, "插入的文字");// 删除光标前的字符lv_textarea_del_char(ta);// 删除光标后的字符lv_textarea_del_char_forward(ta);

三、键盘（lv_keyboard）：虚拟输入设备

3.1 创建第一个键盘

在嵌入式设备上，我们需要虚拟键盘来输入文字：

// 创建键盘lv_obj_t *kb = lv_keyboard_create(lv_scr_act());// 设置键盘大小lv_obj_set_size(kb, 700, 280);// 设置键盘样式lv_obj_set_style_bg_color(kb, lv_color_hex(0x000000), LV_PART_MAIN);  // 黑色背景// 去掉焦点状态（让键盘更干净）lv_obj_clear_state(kb, LV_STATE_FOCUS_KEY);

3.2 将键盘与文本框关联

键盘必须关联到一个文本框才能使用：

// 创建文本框lv_obj_t *ta = lv_textarea_create(lv_scr_act());lv_textarea_set_one_line(ta, true);lv_obj_center(ta);// 创建键盘lv_obj_t *kb = lv_keyboard_create(lv_scr_act());lv_obj_set_size(kb, 500, 280);// 关联键盘和文本框lv_keyboard_set_textarea(kb, ta);// 将键盘放在文本框右侧lv_obj_align_to(kb, ta, LV_ALIGN_OUT_RIGHT_MID, 20, 0);

效果：

四、事件处理：文本框与键盘协同工作

// 创建UI元素static lv_obj_t *ta;static lv_obj_t *kb;// 键盘事件处理函数static void keyboard_event_handler(lv_event_t *e) {    lv_event_code_t code = lv_event_get_code(e);    if(code == LV_EVENT_READY) {        // 用户点击了键盘的"确定"键        const char *text = lv_textarea_get_text(ta);        LV_LOG_USER("输入内容: %s", text);        // 隐藏键盘        lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);    }    else if(code == LV_EVENT_CANCEL) {        // 用户点击了键盘的"取消"键        LV_LOG_USER("取消输入");        // 隐藏键盘        lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);    }}// 文本框点击事件 - 显示键盘static void textarea_click_handler(lv_event_t *e) {    // 显示键盘并绑定到当前文本框    lv_keyboard_set_textarea(kb, ta);    lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);}void setup_ui(void) {    // 1. 创建文本框    ta = lv_textarea_create(lv_scr_act());    lv_obj_set_size(ta, 200, 50);    lv_obj_center(ta);    // 设置文本框属性    lv_textarea_set_placeholder_text(ta, "input");    lv_textarea_set_one_line(ta, true);    // 2. 创建键盘    kb = lv_keyboard_create(lv_scr_act());    lv_obj_set_size(kb, 500, 280);    lv_obj_align_to(kb, ta, LV_ALIGN_OUT_RIGHT_MID, 20, 0);    // 3. 设置事件处理    // 文本框点击时显示键盘    lv_obj_add_event_cb(ta, textarea_click_handler, LV_EVENT_CLICKED, NULL);    // 键盘事件    lv_obj_add_event_cb(kb, keyboard_event_handler, LV_EVENT_ALL, NULL);    // 4. 初始隐藏键盘    lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);}

效果：

五、总结与对比

文本框 vs 标签

虚拟键盘的局限性

1. 1. 没有智能输入法：只能一个一个字符输入，没有联想、预测。
2. 2. 屏幕空间占用：在小屏幕上，键盘会占用大量空间。
3. 3. 输入效率低：相比物理键盘，虚拟键盘输入速度慢。

核心原则：在嵌入式系统中，能用选择就不要用输入，能用数字键盘就不要用全键盘，能避免输入就尽量避免。

快速参考卡片

// 创建文本框lv_obj_t *ta = lv_textarea_create(parent);lv_textarea_set_one_line(ta, true);lv_textarea_set_placeholder_text(ta, "提示文字");// 创建键盘lv_obj_t *kb = lv_keyboard_create(parent);lv_keyboard_set_textarea(kb, ta);// 获取文本框内容const char *text = lv_textarea_get_text(ta);// 文本框事件lv_obj_add_event_cb(ta, event_handler, LV_EVENT_VALUE_CHANGED, NULL);lv_obj_add_event_cb(ta, event_handler, LV_EVENT_READY, NULL);// 键盘事件lv_obj_add_event_cb(kb, event_handler, LV_EVENT_READY, NULL);