立即注册 找回密码

微雪课堂

搜索
微雪课堂 图形用户界面(GUI) 查看内容

STM32之littlevGL系列教程:键盘控件(lv_kb)与文本区域控件(lv_ta)

2020-3-29 12:03| 发布者: imliubo| 查看: 3724| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了图片按钮控件(lv_imgbtn),本节课带大家来学习一下键盘控件(lv_kb)和文本区域控件(lv_ta),没错,就是我们在开发环境搭建那一节课程中第一次看到的 ...
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);
}
大家看到代码是不是很惊讶?才这么几行?是的,没错,这就是原生控件的好处,很多你以为的很复杂的控件,统统都给你写好了,你只需要调用几个API就好,大家可以想想这个控件的麻烦,每个字符对应的区域都需要计算出来,当你按下的时候再转成字符,当然还很很多操作,我这里也是大致的讲了一下流程,大家感兴趣的可以自己去看一下源码。
那么我们开始分析一下代码,对了,这里之所以两个控件一块讲,其实主要原因是这两个控件关系还是比较大的,相辅相成的。
    /*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);
这里同样的,我们创建了一个名kb的键盘对象,当然跟创建别的控件方法是一样的,然后我们设置了一下是否在文本区域显示光标,就是那个跳动的竖直线的光标,你设置为false就不显示了,接下来我们设置了键盘的几个样式属性,第一个设置的是键盘的背景样式,或者说是显示样式,大家不要以为只有这样一个默认样式,后面你要是学的很精通了,也是可以自己修改样式的,那么又有哪些样式可让让我们使用呢?
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;
没错,我暂时发现目前有这13种的键盘显示样式可以让大家去使用,大家可以都替换一下试试,看看哪一种样式才是你的菜~
然后就是设置了一个每一个按键按下和释放后的显示样式,也就是我们最开始的时候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),虽然我们已经多次使用标签控件了,但是貌似还没有好好学习一下,我们下节课见!



109

顶一下

刚表态过的朋友 (109 人)

相关阅读

最新评论

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2024-12-27 02:25 , Processed in 0.016249 second(s), 17 queries .

返回顶部