Hi，大家好，欢迎来到STM32之littlevGL课堂，我们在上节课中学习了图片按钮控件(lv_imgbtn)，本节课带大家来学习一下键盘控件(lv_kb)和文本区域控件(lv_ta)，没错，就是我们在开发环境搭建那一节课程中第一次看到的那个界面，判断一个GUI的功能强大之处，个人认为文本输入是一个加分点，大家觉得呢？废话少说！ 一 有图有真相
大家看到这个键盘有没有很惊讶呢？虽然目前还不支持中文输入，毕竟中文输入真是一个大工程，不过好像也有人研究过，之前在交流群里看见过，等官方支持怕是得有生之年，所以说还是得学好英语呀~ 二 代码分析 void kb_test(void)
{
/*Create styles for the keyboard*/
static lv_style_t rel_style, pr_style;
lv_style_copy(&rel_style, &lv_style_btn_rel);
rel_style.body.radius = 0;
rel_style.body.border.width = 1;
lv_style_copy(&pr_style, &lv_style_btn_pr);
pr_style.body.radius = 0;
pr_style.body.border.width = 1;
/*Create a keyboard and apply the styles*/
lv_obj_t *kb = lv_kb_create(lv_scr_act(), NULL);
lv_kb_set_cursor_manage(kb, true);
lv_kb_set_style(kb, LV_KB_STYLE_BG, &lv_style_transp_tight);
lv_kb_set_style(kb, LV_KB_STYLE_BTN_REL, &rel_style);
lv_kb_set_style(kb, LV_KB_STYLE_BTN_PR, &pr_style);
/*Create a text area. The keyboard will write here*/
lv_obj_t *ta = lv_ta_create(lv_scr_act(), NULL);
lv_obj_align(ta, NULL, LV_ALIGN_IN_TOP_MID, 0, 10);
lv_ta_set_text(ta, "");
/*Assign the text area to the keyboard*/
lv_kb_set_ta(kb, ta);
}那么我们开始分析一下代码，对了，这里之所以两个控件一块讲，其实主要原因是这两个控件关系还是比较大的，相辅相成的。 /*Create styles for the keyboard*/
static lv_style_t rel_style, pr_style;
lv_style_copy(&rel_style, &lv_style_btn_rel);
rel_style.body.radius = 0;
rel_style.body.border.width = 1;
lv_style_copy(&pr_style, &lv_style_btn_pr);
pr_style.body.radius = 0;
pr_style.body.border.width = 1; /*Create a keyboard and apply the styles*/
lv_obj_t *kb = lv_kb_create(lv_scr_act(), NULL);
lv_kb_set_cursor_manage(kb, true);
lv_kb_set_style(kb, LV_KB_STYLE_BG, &lv_style_transp_tight);
lv_kb_set_style(kb, LV_KB_STYLE_BTN_REL, &rel_style);
lv_kb_set_style(kb, LV_KB_STYLE_BTN_PR, &pr_style);extern lv_style_t lv_style_scr; extern lv_style_t lv_style_transp; extern lv_style_t lv_style_transp_fit; extern lv_style_t lv_style_transp_tight; extern lv_style_t lv_style_plain; extern lv_style_t lv_style_plain_color; extern lv_style_t lv_style_pretty; extern lv_style_t lv_style_pretty_color; extern lv_style_t lv_style_btn_rel; extern lv_style_t lv_style_btn_pr; extern lv_style_t lv_style_btn_tgl_rel; extern lv_style_t lv_style_btn_tgl_pr; extern lv_style_t lv_style_btn_ina; 然后就是设置了一个每一个按键按下和释放后的显示样式，也就是我们最开始的时候copy的那两个按钮的样式。 对了键盘默认宽度是充满屏幕的，然后默认位置也是在屏幕底部。 /*Create a text area. The keyboard will write here*/
lv_obj_t *ta = lv_ta_create(lv_scr_act(), NULL);
lv_obj_align(ta, NULL, LV_ALIGN_IN_TOP_MID, 0, 10);
lv_ta_set_text(ta, "");上面创建了一个文本区域用来显示我们用键盘打出的文字，这里就很简单了，你还可以设置默认的文字，不过这里我们设置为空。那么键盘我们创建好了，文本显示区域我们也创建好了，现在我们打字就可以在文本区域显示了吗？答案当然是不可能的，就像你使用电脑时，如果没有将光标点到某一个可以进行输入的文本区域，虽然可以打出字来，但是最后由于没有接收的地方还是会被释放掉，所以同样的，这里我们也需要将两个控件关联起来，就是将我们通过键盘输入的文本或者字符在文本区域显示出来，怎么做？很难吗？ lv_kb_set_ta(kb, ta); OK，本节课程就到这里，大家有没有get到呢？大家抓紧时间去尝试一下各种不同风格的键盘样式吧，下节课我们学习标签控件(lv_label)和LED控件(lv_led)，虽然我们已经多次使用标签控件了，但是貌似还没有好好学习一下，我们下节课见！ |
