Hi,大家好,欢迎来到树莓派之littlevGL课堂,我们在上节课中学习了页面控件(lv_page),本节课带大家学习预加载控件,不知道大家还不记得我们之前学习圆弧控件的时候有做过一个动态加载的效果,没错,本节课学习的控件跟那个基本一致,不过使用这个更加方便,那么废话不多说! 一 有图有真相 
相信现在的人都不愿意看到转圈圈吧,毕竟很多时候这代表网速不好~ 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加preload_test()函数测试。 01 | void preload_test( void ) |
04 | static lv_style_t style; |
05 | lv_style_copy(&style, &lv_style_plain); |
06 | style.line.width = 10; |
07 | style.line.color = lv_color_hex3(0x258); |
09 | style.body.border.color = lv_color_hex3(0xBBB); |
10 | style.body.border.width = 10; |
11 | style.body.padding.left = 0; |
14 | lv_obj_t * preload = lv_preload_create(lv_scr_act(), NULL); |
15 | lv_obj_set_size(preload, 100, 100); |
16 | lv_obj_align(preload, NULL, LV_ALIGN_CENTER, 0, 0); |
17 | lv_preload_set_style(preload, LV_PRELOAD_STYLE_MAIN, &style); |
大家还记得我们学习圆弧控件的时候是怎么实现类似的效果吗?忘记的同学要回去再看一下哦! 相比之下,这里就比较简单了,我们不用像之前一样需要创建一个任务然后不断的去增加的圆弧的长度去实现了,而且这个控件的效果也远比之前我们自己实现的效果要好多了,那我们分析一下代码: 1 | static lv_style_t style; |
2 | lv_style_copy(&style, &lv_style_plain); |
4 | style.line.color = lv_color_hex3(0x258); |
6 | style.body.border.color = lv_color_hex3(0xBBB); |
7 | style.body.border.width = 10; |
8 | style.body.padding.left = 0; |
这里的样式主要设置了四个地方,一个是旋转的那个蓝色的圆弧的线宽和颜色,然后是那个不旋转的灰色的圆弧的线宽和颜色,这里我们需要重点关注一下的是: 1 | style.body.padding.left = 0; |
这个参数主要是设置的两个圆弧的重叠间距,因为实际上是两个圆弧的叠加效果,当你增大这个数值,蓝色圆弧会在灰色圆弧外侧旋转,反之则在内侧旋转,大家可以自己修改一下尝试~ 然后接下来的代码相信大家应该一眼就都看懂了~首先创建了一个预加载控件的对象,然后设置大小为100*100,然后居中对齐,最后就是设置我们设置的样式参数,不然是不会生效的~
OK,本节课就到这里,是不是相比之前变得更加简单好看了呢~下节课我们学习滑动列表控件(lv_roller),我们下节课再见! |