立即注册 找回密码

微雪课堂

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

STM32之littlevGL系列教程:预加载控件(lv_preload)

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

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了页面控件(lv_page),本节课带大家学习预加载控件,不知道大家还不记得我们之前学习圆弧控件的时候有做过一个动态加载的效果,没错,本节课学习的控 ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了页面控件(lv_page),本节课带大家学习预加载控件,不知道大家还不记得我们之前学习圆弧控件的时候有做过一个动态加载的效果,没错,本节课学习的控件跟那个基本一致,不过使用这个更加方便,那么废话不多说!
一 有图有真相

相信现在的人都不愿意看到转圈圈吧,毕竟很多时候这代表网速不好~
二 代码分析

cpp代码:

void preload_test(void)
{
    /*Create a style for the Preloader*/
    static lv_style_t style;
    lv_style_copy(&style, &lv_style_plain);
    style.line.width = 10;                         /*10 px thick arc*/
    style.line.color = lv_color_hex3(0x258);       /*Blueish arc color*/

    style.body.border.color = lv_color_hex3(0xBBB); /*Gray background color*/
    style.body.border.width = 10;
    style.body.padding.left = 0;

    /*Create a Preloader object*/
    lv_obj_t * preload = lv_preload_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload, 100, 100);
    lv_obj_align(preload, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_preload_set_style(preload, LV_PRELOAD_STYLE_MAIN, &style);
}
大家还记得我们学习圆弧控件的时候是怎么实现类似的效果吗?忘记的同学要回去再看一下哦!
相比之下,这里就比较简单了,我们不用像之前一样需要创建一个任务然后不断的去增加的圆弧的长度去实现了,而且这个控件的效果也远比之前我们自己实现的效果要好多了,那我们分析一下代码:
    static lv_style_t style;
    lv_style_copy(&style, &lv_style_plain);
    style.line.width = 10;                         /*10 px thick arc*/
    style.line.color = lv_color_hex3(0x258);       /*Blueish arc color*/

    style.body.border.color = lv_color_hex3(0xBBB); /*Gray background color*/
    style.body.border.width = 10;
    style.body.padding.left = 0;
这里的样式主要设置了四个地方,一个是旋转的那个蓝色的圆弧的线宽和颜色,然后是那个不旋转的灰色的圆弧的线宽和颜色,这里我们需要重点关注一下的是:
style.body.padding.left = 0;
这个参数主要是设置的两个圆弧的重叠间距,因为实际上是两个圆弧的叠加效果,当你增大这个数值,蓝色圆弧会在灰色圆弧外侧旋转,反之则在内侧旋转,大家可以自己修改一下尝试~
然后接下来的代码相信大家应该一眼就都看懂了~首先创建了一个预加载控件的对象,然后设置大小为100*100,然后居中对齐,最后就是设置我们设置的样式参数,不然是不会生效的~

OK,本节课就到这里,是不是相比之前变得更加简单好看了呢~下节课我们学习滑动列表控件(lv_roller),我们下节课再见!

Tab标签: STM32 littlevGL

47

顶一下

刚表态过的朋友 (47 人)

相关阅读

最新评论

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

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

返回顶部