Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了仪表控件(lv_cont)，本节课带大家来学习一下图片控件，其实我们在前面的画布控件一节，也有讲过如何显示一幅图片，不过那是以来别的控件的，本节教程的不同之处是我们单独在窗口中显示一幅图片，那么这里还会给大家展示一下库里自带的一些图标，一些很常见也很有用的图标，那么废话少说！ 一 有图有真相 
可以看到在我们的图片下面还有一排很精致的小Logo，当然这里只是展示了很小的一部分，很有很多没有展示出来，大家可以自己去尝试，有了这些库自带的图标可就极大的方便我们做一些状态指示的显示了，所以熟练的掌握多少图标可以供我们使用也是很有必要的，当然肯定还会有很多你找不到，那么这时候你就需要自己去处理了！ 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加img_test()函数测试。 01 | LV_IMG_DECLARE(WaveShare_LOGO) |
04 | lv_obj_t * img1 = lv_img_create(lv_scr_act(), NULL); |
05 | lv_img_set_src(img1, &WaveShare_LOGO); |
06 | lv_obj_align(img1, NULL, LV_ALIGN_CENTER, 0, -20); |
08 | lv_obj_t * img2 = lv_img_create(lv_scr_act(), NULL); |
09 | lv_img_set_src(img2, LV_SYMBOL_AUDIO LV_SYMBOL_VIDEO |
10 | LV_SYMBOL_OK LV_SYMBOL_LIST |
11 | LV_SYMBOL_CLOSE LV_SYMBOL_HOME |
12 | LV_SYMBOL_WIFI LV_SYMBOL_BATTERY_EMPTY |
13 | LV_SYMBOL_BLUETOOTH ); |
14 | lv_obj_align(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20); |
大家看代码试试不是很熟悉呢？是的，跟之前我们学习画布控件的时候显示图片是一样的，第一个图片对象img1就是显示的我们微雪课堂的logo，如果前面那节画布控件没学，需要下载一下我这里给大家处理的微雪课堂logo的取模文件，大家可以点击下面链接下载： 将文件添加到我们的工程后，记得一定要用这一句函数LV_IMG_DECLARE(WaveShare_LOGO) 声明一下我们的微雪课堂图片文件的C语言数组。
然后第二个img2对象，这里我们是设置了很多图标，是的，大家可以想我那样一次设置很多个图标去测试看看，那么都有哪些自带的图标呢？大家可以看一下下面的代码： 01 | #define LV_SYMBOL_AUDIO "\xef\x80\x81" |
02 | #define LV_SYMBOL_VIDEO "\xef\x80\x88" |
03 | #define LV_SYMBOL_LIST "\xef\x80\x8b" |
04 | #define LV_SYMBOL_OK "\xef\x80\x8c" |
05 | #define LV_SYMBOL_CLOSE "\xef\x80\x8d" |
06 | #define LV_SYMBOL_POWER "\xef\x80\x91" |
07 | #define LV_SYMBOL_SETTINGS "\xef\x80\x93" |
08 | #define LV_SYMBOL_TRASH "\xef\x80\x94" |
09 | #define LV_SYMBOL_HOME "\xef\x80\x95" |
10 | #define LV_SYMBOL_DOWNLOAD "\xef\x80\x99" |
11 | #define LV_SYMBOL_DRIVE "\xef\x80\x9c" |
12 | #define LV_SYMBOL_REFRESH "\xef\x80\xa1" |
13 | #define LV_SYMBOL_MUTE "\xef\x80\xa6" |
14 | #define LV_SYMBOL_VOLUME_MID "\xef\x80\xa7" |
15 | #define LV_SYMBOL_VOLUME_MAX "\xef\x80\xa8" |
16 | #define LV_SYMBOL_IMAGE "\xef\x80\xbe" |
17 | #define LV_SYMBOL_EDIT "\xef\x81\x80" |
18 | #define LV_SYMBOL_PREV "\xef\x81\x88" |
19 | #define LV_SYMBOL_PLAY "\xef\x81\x8b" |
20 | #define LV_SYMBOL_PAUSE "\xef\x81\x8c" |
21 | #define LV_SYMBOL_STOP "\xef\x81\x8d" |
22 | #define LV_SYMBOL_NEXT "\xef\x81\x91" |
23 | #define LV_SYMBOL_EJECT "\xef\x81\x92" |
24 | #define LV_SYMBOL_LEFT "\xef\x81\x93" |
25 | #define LV_SYMBOL_RIGHT "\xef\x81\x94" |
26 | #define LV_SYMBOL_PLUS "\xef\x81\xa7" |
27 | #define LV_SYMBOL_MINUS "\xef\x81\xa8" |
28 | #define LV_SYMBOL_WARNING "\xef\x81\xb1" |
29 | #define LV_SYMBOL_SHUFFLE "\xef\x81\xb4" |
30 | #define LV_SYMBOL_UP "\xef\x81\xb7" |
31 | #define LV_SYMBOL_DOWN "\xef\x81\xb8" |
32 | #define LV_SYMBOL_LOOP "\xef\x81\xb9" |
33 | #define LV_SYMBOL_DIRECTORY "\xef\x81\xbb" |
34 | #define LV_SYMBOL_UPLOAD "\xef\x82\x93" |
35 | #define LV_SYMBOL_CALL "\xef\x82\x95" |
36 | #define LV_SYMBOL_CUT "\xef\x83\x84" |
37 | #define LV_SYMBOL_COPY "\xef\x83\x85" |
38 | #define LV_SYMBOL_SAVE "\xef\x83\x87" |
39 | #define LV_SYMBOL_CHARGE "\xef\x83\xa7" |
40 | #define LV_SYMBOL_BELL "\xef\x83\xb3" |
41 | #define LV_SYMBOL_KEYBOARD "\xef\x84\x9c" |
42 | #define LV_SYMBOL_GPS "\xef\x84\xa4" |
43 | #define LV_SYMBOL_FILE "\xef\x85\x9b" |
44 | #define LV_SYMBOL_WIFI "\xef\x87\xab" |
45 | #define LV_SYMBOL_BATTERY_FULL "\xef\x89\x80" |
46 | #define LV_SYMBOL_BATTERY_3 "\xef\x89\x81" |
47 | #define LV_SYMBOL_BATTERY_2 "\xef\x89\x82" |
48 | #define LV_SYMBOL_BATTERY_1 "\xef\x89\x83" |
49 | #define LV_SYMBOL_BATTERY_EMPTY "\xef\x89\x84" |
50 | #define LV_SYMBOL_BLUETOOTH "\xef\x8a\x93" |
是的，你没看错，足足有50种！相信这些应该可以满足你绝大部分的需求了，当然具体还得你自己亲自去显示出来看一下，最重要的还是要符合你的期待值，个人觉得还是都蛮好看的！
OK，那么本节课先到这里，那么我们下节课学习图片按钮控件，我们下节课再见！    | 
