立即注册 找回密码

微雪课堂

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

STM32之littlevGL系列教程:矩阵按钮控件(lv_btnm)

2020-3-28 21:39| 发布者: imliubo| 查看: 3378| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了按钮控件(lv_btn),本节课带大家来学习一下矩阵按钮控件,废话不多说,先看图!一有图有真相就像上图一样,矩形按钮控件其实就是很多个单按钮的组合 ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了按钮控件(lv_btn),本节课带大家来学习一下矩阵按钮控件,废话不多说,先看图!
一有图有真相

就像上图一样,矩形按钮控件其实就是很多个单按钮的组合,利用这个控件我们可以很方便的生成像上面的矩阵键盘,就比如我们做一个上面的数字键盘,而不是一个个的去生成,然后再算坐标,然后偏移多少多少之类的。总之我们使用这个控件可以快速且方便的生成很多按钮。
二代码分析
static void btm_event_handler(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED) {
        const char * txt = lv_btnm_get_active_btn_text(obj);

        printf("%s was pressed\n", txt);
    }
}


static const char * btnm_map[] = {"1", "2", "3", "4", "5", "\n",
                                  "6", "7", "8", "9", "0", "\n",
                                  "Action1", "Action2", ""};

static void btnm_test(void)
{
    lv_obj_t * btnm1 = lv_btnm_create(lv_scr_act(), NULL);
    lv_btnm_set_map(btnm1, btnm_map);
    lv_btnm_set_btn_width(btnm1, 10, 2);        /*Make "Action1" twice as wide as "Action2"*/
    lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(btnm1, btm_event_handler);
}
代码是不是也很简单,是的,其实跟上一节课我们学习的按钮控件基本一致,唯一不同的就是这里多了一个btnm_map的结构体,那么这里可能细心的同学们已经发现了,结构体的内容就是我们显示在每一个按钮上的文本,是的,我们可以通过这个方式很简单的去完成每一个按钮的文本设置,那么可能就有同学还要问了,这个“\n”是做什么的呢?其实这个就像我们进行文本打印的时候的换行,这里也是用来控制按钮换行使用的,这样的设置使得我们就行按钮排列变得更加简单,这里这个结构体是通过lv_btnm_set_map进行设置的,大家使用的时候一定记得规划好按钮的名称。
然后lv_btnm_set_btn_width这里是设置其中某一个按钮的相对宽度的,这里的相对宽度指的是相对于矩阵键盘内的下一个对象的,然后同样的这里我们也设置一个回调函数,用于处理我们键盘内的每个按钮按下的事件:
static void btm_event_handler(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED) {
        const char * txt = lv_btnm_get_active_btn_text(obj);

        printf("%s was pressed\n", txt);
    }
}
这里的的回调函数就相对简单了,我们获取每一个按下的按钮的名称然后通过控制台打印出来,大家也可以根据上一节课我给大家写的例程一样,将按下的按钮的文本通过label对象在窗口中打印出来,lv_btnm_get_active_btn_text这个函数就是获取我们前面通过lv_btnm_set_map设置给每个按钮的文本信息的,大家就可以通过得到的文本信息针对每一个按钮做不同的处理就好了。

OK,这就是本节课我们要学习的内容了,下一节课我们学习日历控件,教大家如何快速生成一个日历图标,我们下一节课见!


100

顶一下

刚表态过的朋友 (100 人)

相关阅读

最新评论

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

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

返回顶部