Hi,大家好,欢迎来到树莓派之littlevGL课堂,我们在上节课中学习了页面控件(lv_page),本节课带大家学习预加载控件,不知道大家还不记得我们之前学习圆弧控件的时候有做过一个动态加载的效果,没错,本节课学习的控件跟那个基本一致,不过使用这个更加方便,那么废话不多说! 一 有图有真相 相信现在的人都不愿意看到转圈圈吧,毕竟很多时候这代表网速不好~ 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加preload_test()函数测试。 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),我们下节课再见! |