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

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

这一期来讲解与文本框配套使用的键盘，以及键盘如何在项目中开启。打开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时支持中文输入

    #ifLV_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);

#ifLV_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)

{

#ifLV_USE_ZH_KEYBOARD != 0

lv_zh_keyboard_set_textarea(kb, ta);

#endif

#ifLV_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)

{

#ifLV_USE_ZH_KEYBOARD != 0

lv_zh_keyboard_set_textarea(kb, ta);

#endif

#ifLV_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);

}

}

下一期将讲述消息框的使用。

本文章由威三学院出品

对课程感兴趣可以私信联系