当前位置：首页 > news >正文

使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第七讲)

news 来源：原创 2025/6/28 14:17:53

这一期来讲解与文本框配套使用的键盘，以及键盘如何在项目中开启。
打开GUI_guider软件平台，在左上角点开工程选项，在该栏目的最下方点击系统设置。在这里插入图片描述
随后在系统设置界面中点击项目选项，选择显示键盘。

在该界面中可以设置键盘文字的大小和文本类型，最下方判断键盘是否支持中文输入（中文输入，当汉字库不够大时，用户点击中文输入会少很多字）。例如下图所示：
在这里插入图片描述
文本选项中只有四个文字，这就是文字库缺少的表现。
键盘分为四种模式：
（1）2.1 LV_KEYBOARD_MODE_TEXT_LOWER
显示小写字母，默认的情况。

（2）LV_KEYBOARD_MODE_TEXT_UPPER
显示大写字母，包括键盘和文本框显示。
在这里插入图片描述
（3）LV_KEYBOARD_MODE_SPECIAL
显示特殊字符

（4） LV_KEYBOARD_MODE_NUMBER
显示数字。

以下是开启键盘功能的文本框代码：
//Write codes screen_v3_z
ui->screen_v3_z = lv_textarea_create(ui->screen);
lv_textarea_set_text(ui->screen_v3_z, “”);
lv_textarea_set_placeholder_text(ui->screen_v3_z, “”);
lv_textarea_set_password_bullet(ui->screen_v3_z, “*”);
lv_textarea_set_password_mode(ui->screen_v3_z, false);
lv_textarea_set_one_line(ui->screen_v3_z, true);
lv_textarea_set_accepted_chars(ui->screen_v3_z, “”);
lv_textarea_set_max_length(ui->screen_v3_z, 16);
//当LV_USE_KEYBOARD为1时启用虚拟键盘，LV_USE_ZH_KEYBOARD为1时支持中文输入
#if LV_USE_KEYBOARD != 0 || LV_USE_ZH_KEYBOARD != 0
lv_obj_add_event_cb(ui->screen_v3_z, ta_event_cb, LV_EVENT_ALL, ui->g_kb_screen);
#endif
lv_obj_set_pos(ui->screen_v3_z, 160, 153);
lv_obj_set_size(ui->screen_v3_z, 195, 33);
默认是第一种键盘模式，当需要切换模式，进入到ta_event_cb函数修改模式，下面代码以数字模式举例子lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER); 只需要改变这行代码即可。
attribute((unused)) void ta_event_cb (lv_event_t *e) {
lv_event_code_t code = lv_event_get_code(e);
#if LV_USE_KEYBOARD || LV_USE_ZH_KEYBOARD
lv_obj_t *ta = lv_event_get_target(e);
#endif
lv_obj_t *kb = lv_event_get_user_data(e);
if (code == LV_EVENT_FOCUSED || code == LV_EVENT_CLICKED)
{
#if LV_USE_ZH_KEYBOARD != 0
lv_zh_keyboard_set_textarea(kb, ta);
#endif
#if LV_USE_KEYBOARD != 0
lv_keyboard_set_textarea(kb, ta);
lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER); // 设置为数字模式
#endif
lv_obj_move_foreground(kb);
lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
v3card_write_cmd_mode0(LCD_MERGE_MODE,2);
v3card_write_cmd_mode0(WINDOW_X_STA,40);
v3card_write_cmd_mode0(WINDOW_X_END,439);
v3card_write_cmd_mode0(WINDOW_Y_STA,79);
v3card_write_cmd_mode0(WINDOW_Y_END,400);
v3card_write_cmd_mode0(PL_PLOT_CHANGE,1);
v3card_write_cmd_mode0(PL_PLOT_CHANGE,0);
}
if (code == LV_EVENT_CANCEL || code == LV_EVENT_DEFOCUSED)
{
#if LV_USE_ZH_KEYBOARD != 0
lv_zh_keyboard_set_textarea(kb, ta);
#endif
#if LV_USE_KEYBOARD != 0
lv_keyboard_set_textarea(kb, ta);
#endif
lv_obj_move_background(kb);
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
v3card_write_cmd_mode0(LCD_MERGE_MODE,2);
v3card_write_cmd_mode0(WINDOW_X_STA,40);
v3card_write_cmd_mode0(WINDOW_X_END,439);
v3card_write_cmd_mode0(WINDOW_Y_STA,79);
v3card_write_cmd_mode0(WINDOW_Y_END,279);
v3card_write_cmd_mode0(PL_PLOT_CHANGE,1);
v3card_write_cmd_mode0(PL_PLOT_CHANGE,0);
}
}
下一期将讲述消息框的使用。