Hi，大家好，欢迎来到STM32之littlevGL课堂，我们在上节课中学习了仪表控件(lv_cont)，本节课带大家来学习一下图片控件，其实我们在前面的画布控件一节，也有讲过如何显示一幅图片，不过那是以来别的控件的，本节教程的不同之处是我们单独在窗口中显示一幅图片，那么这里还会给大家展示一下库里自带的一些图标，一些很常见也很有用的图标，那么废话少说！ 一 有图有真相
可以看到在我们的图片下面还有一排很精致的小Logo，当然这里只是展示了很小的一部分，很有很多没有展示出来，大家可以自己去尝试，有了这些库自带的图标可就极大的方便我们做一些状态指示的显示了，所以熟练的掌握多少图标可以供我们使用也是很有必要的，当然肯定还会有很多你找不到，那么这时候你就需要自己去处理了！ 二 代码分析 LV_IMG_DECLARE(WaveShare_LOGO)
void img_test(void)
{
lv_obj_t * img1 = lv_img_create(lv_scr_act(), NULL);
lv_img_set_src(img1, &WaveShare_LOGO);
lv_obj_align(img1, NULL, LV_ALIGN_CENTER, 0, -20);
lv_obj_t * img2 = lv_img_create(lv_scr_act(), NULL);
lv_img_set_src(img2, LV_SYMBOL_AUDIO LV_SYMBOL_VIDEO
LV_SYMBOL_OK LV_SYMBOL_LIST
LV_SYMBOL_CLOSE LV_SYMBOL_HOME
LV_SYMBOL_WIFI LV_SYMBOL_BATTERY_EMPTY
LV_SYMBOL_BLUETOOTH );
lv_obj_align(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
}大家下载上面的文件，解压出来，然后放到跟test.c文件同一个目录中，然后加到工程树中，如下图：
然后第二个img2对象，这里我们是设置了很多图标，是的，大家可以想我那样一次设置很多个图标去测试看看，那么都有哪些自带的图标呢？大家可以看一下下面的代码： #define LV_SYMBOL_AUDIO "\xef\x80\x81" #define LV_SYMBOL_VIDEO "\xef\x80\x88" #define LV_SYMBOL_LIST "\xef\x80\x8b" #define LV_SYMBOL_OK "\xef\x80\x8c" #define LV_SYMBOL_CLOSE "\xef\x80\x8d" #define LV_SYMBOL_POWER "\xef\x80\x91" #define LV_SYMBOL_SETTINGS "\xef\x80\x93" #define LV_SYMBOL_TRASH "\xef\x80\x94" #define LV_SYMBOL_HOME "\xef\x80\x95" #define LV_SYMBOL_DOWNLOAD "\xef\x80\x99" #define LV_SYMBOL_DRIVE "\xef\x80\x9c" #define LV_SYMBOL_REFRESH "\xef\x80\xa1" #define LV_SYMBOL_MUTE "\xef\x80\xa6" #define LV_SYMBOL_VOLUME_MID "\xef\x80\xa7" #define LV_SYMBOL_VOLUME_MAX "\xef\x80\xa8" #define LV_SYMBOL_IMAGE "\xef\x80\xbe" #define LV_SYMBOL_EDIT "\xef\x81\x80" #define LV_SYMBOL_PREV "\xef\x81\x88" #define LV_SYMBOL_PLAY "\xef\x81\x8b" #define LV_SYMBOL_PAUSE "\xef\x81\x8c" #define LV_SYMBOL_STOP "\xef\x81\x8d" #define LV_SYMBOL_NEXT "\xef\x81\x91" #define LV_SYMBOL_EJECT "\xef\x81\x92" #define LV_SYMBOL_LEFT "\xef\x81\x93" #define LV_SYMBOL_RIGHT "\xef\x81\x94" #define LV_SYMBOL_PLUS "\xef\x81\xa7" #define LV_SYMBOL_MINUS "\xef\x81\xa8" #define LV_SYMBOL_WARNING "\xef\x81\xb1" #define LV_SYMBOL_SHUFFLE "\xef\x81\xb4" #define LV_SYMBOL_UP "\xef\x81\xb7" #define LV_SYMBOL_DOWN "\xef\x81\xb8" #define LV_SYMBOL_LOOP "\xef\x81\xb9" #define LV_SYMBOL_DIRECTORY "\xef\x81\xbb" #define LV_SYMBOL_UPLOAD "\xef\x82\x93" #define LV_SYMBOL_CALL "\xef\x82\x95" #define LV_SYMBOL_CUT "\xef\x83\x84" #define LV_SYMBOL_COPY "\xef\x83\x85" #define LV_SYMBOL_SAVE "\xef\x83\x87" #define LV_SYMBOL_CHARGE "\xef\x83\xa7" #define LV_SYMBOL_BELL "\xef\x83\xb3" #define LV_SYMBOL_KEYBOARD "\xef\x84\x9c" #define LV_SYMBOL_GPS "\xef\x84\xa4" #define LV_SYMBOL_FILE "\xef\x85\x9b" #define LV_SYMBOL_WIFI "\xef\x87\xab" #define LV_SYMBOL_BATTERY_FULL "\xef\x89\x80" #define LV_SYMBOL_BATTERY_3 "\xef\x89\x81" #define LV_SYMBOL_BATTERY_2 "\xef\x89\x82" #define LV_SYMBOL_BATTERY_1 "\xef\x89\x83" #define LV_SYMBOL_BATTERY_EMPTY "\xef\x89\x84" #define LV_SYMBOL_BLUETOOTH "\xef\x8a\x93" 三 如何处理图片 处理图片我们需要用到littlevGL的在线工具，下面是网址链接：
那么我们如何使用呢？其实很简单，首先我们需要将文件加入到我们的工程树中，然后在需要的地方声明一下就可以了，可以用下面两种方式： extern const lv_img_t my_image_name; LV_IMG_DECLARE(my_image_name); 我们再来看看转换出来的图片文件的一些信息，就在我们的刚下载的文件最后就可以看到一个结构体，如下图： const lv_img_dsc_t WaveShare_LOGO = {
.header.always_zero = 0,
.header.w = 287,
.header.h = 81,
.data_size = 11728,
.header.cf = LV_IMG_CF_INDEXED_4BIT,
.data = WaveShare_LOGO_map,
};OK，那么本节课先到这里，那么我们下节课学习图片按钮控件，我们下节课再见！ |
