立即注册 找回密码

微雪课堂

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

STM32之littlevGL系列教程:滑动条控件(lv_slider)

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

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了滑动列表控件(lv_roller),本节课带大家学习滑动条控件,那么什么是滑动条呢?举个最简单的例子——音量调节,这下大家应该都知道了吧~废话不多说! ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了滑动列表控件(lv_roller),本节课带大家学习滑动条控件,那么什么是滑动条呢?举个最简单的例子——音量调节,这下大家应该都知道了吧~废话不多说!
一 有图有真相

像不像你调节音量的时候那个滑动条呢~
二 代码分析
static lv_obj_t * slider_label;
static void slider_event_cb(lv_obj_t * slider, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED) {
        static char buf[4]; /* max 3 bytes for number plus 1 null terminating byte */
        snprintf(buf, 4, "%u", lv_slider_get_value(slider));
        lv_label_set_text(slider_label, buf);
    }
}

static void slider_test(void)
{
    /* Create a slider in the center of the display */
    lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
    lv_obj_set_width(slider, 200);
    lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(slider, slider_event_cb);
    lv_slider_set_range(slider, 0, 100);

    /* Create a label below the slider */
    slider_label = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(slider_label, "0");
    lv_obj_set_auto_realign(slider_label, true);
    lv_obj_align(slider_label, slider, LV_ALIGN_CENTER, 0, 30);

    /* Create an informative label */
    lv_obj_t * info = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(info, "Welcome to the slider+label demo!\n"
                            "Move the slider and see that the label\n"
                            "updates to match it.");
    lv_obj_align(info, NULL, LV_ALIGN_CENTER, 0, -50);
}
看起来是不是有点复杂呢?其实代码这么多行的原因是我们还创建了两个标签对象用来展示提示消息和滑块改变为的值,之前我们学习过标签控件了,所以这里我们只分析滑动条部分。
    lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
    lv_obj_set_width(slider, 200);
    lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(slider, slider_event_cb);
    lv_slider_set_range(slider, 0, 100);
同样的,我们还是创建了一个滑动条对象,然后我们设置宽度(或者长度)为200,对齐方式是居中对齐,然后我们还设置了一个回调函数,之前讲过一般有结果输出的控件都可以设置回调函数,滑动条输出什么结果呢?当然就是数值了!最后我们设置滑动的数值区间为0~100。
lv_slider_get_value(slider)
我们可以在回调函数里通过这个API获取当前滑块所处位置对应的数值大小。

OK,本节课就到这里,大家有没有学会呢?最重要的还是要多实践。下节课我们学习微调框控件(lv_spinbox),我们下节课再见!
Tab标签: STM32 littlevGL

59

顶一下

刚表态过的朋友 (59 人)

相关阅读

最新评论

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

GMT+8, 2020-11-28 22:35 , Processed in 0.015261 second(s), 14 queries .

返回顶部