Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了消息弹窗控件(lv_mbox)，本节课带大家学习页面控件，所谓的页面大家可以理解成一个长的文本显示区域，然后我们可以滚动显示查看文本，那么废话不多说！ 一 有图有真相 
二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加page_test()函数测试。 04 | static lv_style_t style_sb; |
05 | lv_style_copy(&style_sb, &lv_style_plain); |
06 | style_sb.body.main_color = LV_COLOR_BLACK; |
07 | style_sb.body.grad_color = LV_COLOR_BLACK; |
08 | style_sb.body.border.color = LV_COLOR_WHITE; |
09 | style_sb.body.border.width = 1; |
10 | style_sb.body.border.opa = LV_OPA_70; |
11 | style_sb.body.radius = LV_RADIUS_CIRCLE; |
12 | style_sb.body.opa = LV_OPA_60; |
13 | style_sb.body.padding.right = 3; |
14 | style_sb.body.padding.bottom = 3; |
15 | style_sb.body.padding.inner = 8; |
18 | lv_obj_t * page = lv_page_create(lv_scr_act(), NULL); |
19 | lv_obj_set_size(page, 150, 200); |
20 | lv_obj_align(page, NULL, LV_ALIGN_CENTER, 0, 0); |
21 | lv_page_set_style(page, LV_PAGE_STYLE_SB, &style_sb); |
24 | lv_obj_t * label = lv_label_create(page, NULL); |
25 | lv_label_set_long_mode(label, LV_LABEL_LONG_BREAK); |
26 | lv_obj_set_width(label, lv_page_get_fit_width(page)); |
27 | lv_label_set_text(label, "Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n" |
28 | "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n" |
29 | "Ut enim ad minim veniam, quis nostrud exercitation ullamco\n" |
30 | "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n" |
31 | "dolor in reprehenderit in voluptate velit esse cillum dolore\n" |
32 | "eu fugiat nulla pariatur.\n" |
33 | "Excepteur sint occaecat cupidatat non proident, sunt in culpa\n" |
34 | "qui officia deserunt mollit anim id est laborum."); |
本节课程代码稍微有些复杂，不过还是复杂在样式设置上，而不是我们的的控件本身上，我们已经分析了很多次这个样式设置了，可能还是有同学不太明白，不过没关系，关于样式设置这一块，在本教程的最后我会专门写一篇文章用来跟大家分析一下，这里我们先简单分析一下： 01 | style_sb.body.main_color = LV_COLOR_BLACK; |
02 | style_sb.body.grad_color = LV_COLOR_BLACK; |
03 | style_sb.body.border.color = LV_COLOR_WHITE; |
04 | style_sb.body.border.width = 1; |
05 | style_sb.body.border.opa = LV_OPA_70; |
06 | style_sb.body.radius = LV_RADIUS_CIRCLE; |
07 | style_sb.body.opa = LV_OPA_60; |
08 | style_sb.body.padding.right = 3; |
09 | style_sb.body.padding.bottom = 3; |
10 | style_sb.body.padding.inner = 8; |
main_color、grad_color和border.color都是设置的滑块的颜色，滑块分为上下两部分颜色和外框颜色，大家可以设置成不同的颜色尝试一下，然后设置外框的线宽为1，线框的透明度为70%，然后做圆角处理，滑块的透明为60%，距离右侧的距离为3，底部距离为3，然后宽度8。
然后我们创建了一个页面对象，就跟创建别的对象一样，设置大小为150*200，然后将我们设置好的滑块样式设置好，但是我们只创建个页面是什么都没有的，所以这里我们还在页面内部创建了一个标签对象，用来展示文本，所以我们创建标签对象是指定页面对象为父对象： 1 | lv_obj_t * label = lv_label_create(page, NULL); |
大家还记得我们前面学习标签对象时，学习的那几种文本过长的处理方式吗？没错，这里我们选择使用换行模式： 1 | lv_label_set_long_mode(label, LV_LABEL_LONG_BREAK); |
然后我们将标签的宽度设置为适应页面对象的宽度，最后我们设置一些文本显示出来，这里需要说明的是，当你页面内显示的内容不足以填满整个页面时，滑块是不会显示的，所以我们为了看滑块效果，才设置了这么多文本来展示。
大家有没有学会呢？OK，本节课就到这里，我们下节课学习预加载控件(lv_perload)，我们下节课再见！ | 
