立即注册 找回密码

微雪课堂

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

STM32之littlevGL系列教程:页面控件(lv_page)

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

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了消息弹窗控件(lv_mbox),本节课带大家学习页面控件,所谓的页面大家可以理解成一个长的文本显示区域,然后我们可以滚动显示查看文本,那么废话不多 ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了消息弹窗控件(lv_mbox),本节课带大家学习页面控件,所谓的页面大家可以理解成一个长的文本显示区域,然后我们可以滚动显示查看文本,那么废话不多说!
一 有图有真相

二 代码分析
void page_test(void)
{
    /*Create a scroll bar style*/
    static lv_style_t style_sb;
    lv_style_copy(&style_sb, &lv_style_plain);
    style_sb.body.main_color = LV_COLOR_BLACK;
    style_sb.body.grad_color = LV_COLOR_BLACK;
    style_sb.body.border.color = LV_COLOR_WHITE;
    style_sb.body.border.width = 1;
    style_sb.body.border.opa = LV_OPA_70;
    style_sb.body.radius = LV_RADIUS_CIRCLE;
    style_sb.body.opa = LV_OPA_60;
    style_sb.body.padding.right = 3;
    style_sb.body.padding.bottom = 3;
    style_sb.body.padding.inner = 8;        /*Scrollbar width*/

    /*Create a page*/
    lv_obj_t * page = lv_page_create(lv_scr_act(), NULL);
    lv_obj_set_size(page, 150, 200);
    lv_obj_align(page, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_page_set_style(page, LV_PAGE_STYLE_SB, &style_sb);           /*Set the scrollbar style*/

    /*Create a label on the page*/
    lv_obj_t * label = lv_label_create(page, NULL);
    lv_label_set_long_mode(label, LV_LABEL_LONG_BREAK);            /*Automatically break long lines*/
    lv_obj_set_width(label, lv_page_get_fit_width(page));          /*Set the label width to max value to not show hor. scroll bars*/
    lv_label_set_text(label, "Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n"
                             "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n"
                             "Ut enim ad minim veniam, quis nostrud exercitation ullamco\n"
                             "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n"
                             "dolor in reprehenderit in voluptate velit esse cillum dolore\n"
                             "eu fugiat nulla pariatur.\n"
                             "Excepteur sint occaecat cupidatat non proident, sunt in culpa\n"
                             "qui officia deserunt mollit anim id est laborum.");
}
本节课程代码稍微有些复杂,不过还是复杂在样式设置上,而不是我们的的控件本身上,我们已经分析了很多次这个样式设置了,可能还是有同学不太明白,不过没关系,关于样式设置这一块,在本教程的最后我会专门写一篇文章用来跟大家分析一下,这里我们先简单分析一下:
    style_sb.body.main_color = LV_COLOR_BLACK;
    style_sb.body.grad_color = LV_COLOR_BLACK;
    style_sb.body.border.color = LV_COLOR_WHITE;
    style_sb.body.border.width = 1;
    style_sb.body.border.opa = LV_OPA_70;
    style_sb.body.radius = LV_RADIUS_CIRCLE;
    style_sb.body.opa = LV_OPA_60;
    style_sb.body.padding.right = 3;
    style_sb.body.padding.bottom = 3;
    style_sb.body.padding.inner = 8;
main_color、grad_color和border.color都是设置的滑块的颜色,滑块分为上下两部分颜色和外框颜色,大家可以设置成不同的颜色尝试一下,然后设置外框的线宽为1,线框的透明度为70%,然后做圆角处理,滑块的透明为60%,距离右侧的距离为3,底部距离为3,然后宽度8。

然后我们创建了一个页面对象,就跟创建别的对象一样,设置大小为150*200,然后将我们设置好的滑块样式设置好,但是我们只创建个页面是什么都没有的,所以这里我们还在页面内部创建了一个标签对象,用来展示文本,所以我们创建标签对象是指定页面对象为父对象:
lv_obj_t * label = lv_label_create(page, NULL);
大家还记得我们前面学习标签对象时,学习的那几种文本过长的处理方式吗?没错,这里我们选择使用换行模式:
lv_label_set_long_mode(label, LV_LABEL_LONG_BREAK);
然后我们将标签的宽度设置为适应页面对象的宽度,最后我们设置一些文本显示出来,这里需要说明的是,当你页面内显示的内容不足以填满整个页面时,滑块是不会显示的,所以我们为了看滑块效果,才设置了这么多文本来展示。

大家有没有学会呢?OK,本节课就到这里,我们下节课学习预加载控件(lv_perload),我们下节课再见!


Tab标签: STM32 littlevGL

52

顶一下

刚表态过的朋友 (52 人)

相关阅读

最新评论

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

GMT+8, 2020-11-28 18:28 , Processed in 0.014352 second(s), 14 queries .

返回顶部