首页分享 STM32之littlevGL系列教程：图片控件(lv

STM32之littlevGL系列教程：图片控件(lv

来源：花匠小妙招时间：2024-11-21 00:36

Hi，大家好，欢迎来到STM32之littlevGL课堂，我们在上节课中学习了仪表控件(lv_cont)，本节课带大家来学习一下图片控件，其实我们在前面的画布控件一节，也有讲过如何显示一幅图片，不过那是以来别的控件的，本节教程的不同之处是我们单独在窗口中显示一幅图片，那么这里还会给大家展示一下库里自带的一些图标，一些很常见也很有用的图标，那么废话少说！

一有图有真相

可以看到在我们的图片下面还有一排很精致的小Logo，当然这里只是展示了很小的一部分，很有很多没有展示出来，大家可以自己去尝试，有了这些库自带的图标可就极大的方便我们做一些状态指示的显示了，所以熟练的掌握多少图标可以供我们使用也是很有必要的，当然肯定还会有很多你找不到，那么这时候你就需要自己去处理了！

二代码分析

01LV_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_VIDEO10 LV_SYMBOL_OK LV_SYMBOL_LIST11 LV_SYMBOL_CLOSE LV_SYMBOL_HOME12 LV_SYMBOL_WIFI LV_SYMBOL_BATTERY_EMPTY13 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语言数组，后面教大家如何显示别的图片。

WaveShare_Logo.zip

大家下载上面的文件，解压出来，然后放到跟test.c文件同一个目录中，然后加到工程树中，如下图：

然后第二个img2对象，这里我们是设置了很多图标，是的，大家可以想我那样一次设置很多个图标去测试看看，那么都有哪些自带的图标呢？大家可以看一下下面的代码：

01#define LV_SYMBOL_AUDIO "xefx80x81"02#define LV_SYMBOL_VIDEO "xefx80x88"03#define LV_SYMBOL_LIST "xefx80x8b"04#define LV_SYMBOL_OK "xefx80x8c"05#define LV_SYMBOL_CLOSE "xefx80x8d"06#define LV_SYMBOL_POWER "xefx80x91"07#define LV_SYMBOL_SETTINGS "xefx80x93"08#define LV_SYMBOL_TRASH "xefx80x94"09#define LV_SYMBOL_HOME "xefx80x95"10#define LV_SYMBOL_DOWNLOAD "xefx80x99"11#define LV_SYMBOL_DRIVE "xefx80x9c"12#define LV_SYMBOL_REFRESH "xefx80xa1"13#define LV_SYMBOL_MUTE "xefx80xa6"14#define LV_SYMBOL_VOLUME_MID "xefx80xa7"15#define LV_SYMBOL_VOLUME_MAX "xefx80xa8"16#define LV_SYMBOL_IMAGE "xefx80xbe"17#define LV_SYMBOL_EDIT "xefx81x80"18#define LV_SYMBOL_PREV "xefx81x88"19#define LV_SYMBOL_PLAY "xefx81x8b"20#define LV_SYMBOL_PAUSE "xefx81x8c"21#define LV_SYMBOL_STOP "xefx81x8d"22#define LV_SYMBOL_NEXT "xefx81x91"23#define LV_SYMBOL_EJECT "xefx81x92"24#define LV_SYMBOL_LEFT "xefx81x93"25#define LV_SYMBOL_RIGHT "xefx81x94"26#define LV_SYMBOL_PLUS "xefx81xa7"27#define LV_SYMBOL_MINUS "xefx81xa8"28#define LV_SYMBOL_WARNING "xefx81xb1"29#define LV_SYMBOL_SHUFFLE "xefx81xb4"30#define LV_SYMBOL_UP "xefx81xb7"31#define LV_SYMBOL_DOWN "xefx81xb8"32#define LV_SYMBOL_LOOP "xefx81xb9"33#define LV_SYMBOL_DIRECTORY "xefx81xbb"34#define LV_SYMBOL_UPLOAD "xefx82x93"35#define LV_SYMBOL_CALL "xefx82x95"36#define LV_SYMBOL_CUT "xefx83x84"37#define LV_SYMBOL_COPY "xefx83x85"38#define LV_SYMBOL_SAVE "xefx83x87"39#define LV_SYMBOL_CHARGE "xefx83xa7"40#define LV_SYMBOL_BELL "xefx83xb3"41#define LV_SYMBOL_KEYBOARD "xefx84x9c"42#define LV_SYMBOL_GPS "xefx84xa4"43#define LV_SYMBOL_FILE "xefx85x9b"44#define LV_SYMBOL_WIFI "xefx87xab"45#define LV_SYMBOL_BATTERY_FULL "xefx89x80"46#define LV_SYMBOL_BATTERY_3 "xefx89x81"47#define LV_SYMBOL_BATTERY_2 "xefx89x82"48#define LV_SYMBOL_BATTERY_1 "xefx89x83"49#define LV_SYMBOL_BATTERY_EMPTY "xefx89x84"50#define LV_SYMBOL_BLUETOOTH "xefx8ax93"

是的，你没看错，足足有50种！相信这些应该可以满足你绝大部分的需求了，当然具体还得你自己亲自去显示出来看一下，最重要的还是要符合你的期待值，个人觉得还是都蛮好看的！

三如何处理图片

处理图片我们需要用到littlevGL的在线工具，下面是网址链接：

打开网址后，我们按照下面的步骤就可以得到我们需要的文件了。