了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com一、项目介绍1、littleVGL的主要特点如下。它有非常丰富的内置控件，比如按钮、图表、列表、滑块、图像等等。高级图形效果：动画、抗锯齿、透明、平滑滚动。支持多种输入设备，如触摸板、鼠标、键盘、编码器等。支持多种语言的UTF-8编码?支持多种多显示设备，如同时在多个彩色屏幕或单色屏幕上显示。完全可定制的图形元素。硬件独立于任何微控制器或显示器。可以缩小到最小内存（64kB闪存，16kBRAM）。支持操作系统、外部存储和GPU（可选）。仅使用一个帧缓冲设备即可呈现高级视觉效果。用C编写以实现最大兼容性（与C++兼容）。支持PC模拟器。加速GUI设计，提供教程、案例和主题，支持响应式布局。提供在线和离线文档。基于免费和开源的麻省理工学院许可证。2、littleVGL要求如下：16位、32位或64位微控制器（microcontroller）或处理器。微处理器的主频最好高于16MHZ。Flash/ROM：如果只使用littleVGL核心组件，至少需要64kB的容量。如果要完整使用，最好保证180kB以上的容量。RAM：静态RAM：大约8到16kB，具体取决于您使用的组件功能和对象。Stack：至少2Kb，一般推荐值为4kBoDynamicdata（heap）：至少4kB，如果使用多个或多个控件，最好设置为16kB以上，这个可以通过lv_conf.h配置配置文件定义了LV_MEM_SIZE宏。Displaybuffer：至少大于“水平分辨率像素”，一般推荐值为“水平分辨率像素”的10倍，举个例子，如果我们屏幕的水平分辨率是480像素，使用16位色深显示，即一个像素占用2个字节，那么推荐的显示缓冲区大小为104802=9600字节。对于C99或更新版本的编译器，如果是用keil开发的，必须勾选“c99”模式，否则编译会报错。基本的c（或c++）语言知识，如：指针、结构体、回调函数。3.开源项目链接littleVGL官网：https://littlevgl.comlittleVGLgithub网站：https://github.com/littlevgl/lvgllittleVGL在线文档网站：https://docs.littlevgl.com/zh-CN/html/index.html二、littleVGL移植1、开发前准备本共享硬件采用HI3861开发板和SPI驱动的TFT显示屏。环境搭建请参考上一篇文章。软件包已作为附件上传，感兴趣的可以下载体验移植的乐趣。2.项目创建(1)在applications/sample/wifi-iot/app目录下创建一个GUI文件夹。GUI目录用于存放与littleVGL库相关的所有文件。(2)解压lv_pc_simulator.zip包，然后将lv_pc_simulator.zip包中的lv_examples.zip和lvgl.zip子压缩包直接复制到GUI目录下。子压缩包解压到当前目录。解压完成后，lv_examples.zip和lvgl.zip都可以删除。(3)复制配置模板文件然后将GUI/lvgl/lv_conf_template.h和GUI/lv_examples/lv_ex_conf_templ.h这两个配置模板文件复制到GUI目录下，然后将这两个文件分别重命名为lv_conf.h和lv_ex_conf.h.(4)新建lvgl_driver子目录，然后在GUI目录下新建lvgl_driver子目录。该目录用于存放底层显示驱动和触摸驱动文件。最后，GUI的目录结构如下图所示：注：在实际工程中，可以删除lv_examples目录以减少工程占用的磁盘空间，因为该目录专门用于存放官方demodemo，对我们的实际项目没有影响。3.编写BUILD.gn文件，在GUI目录group中添加BUILD.gn文件("GUI"){deps=["lvgl:lvgl","lvgl_driver:lvgl_port",]}在GUI中添加BUILD.gn/lvgl_driver目录文件：static_library("lvgl_port"){sources=["lv_port_disp.c",]include_dirs=["//base/iot_hardware/peripheral/interfaces/kits","../../","../lvgl_driver",]}在GUI/lv_examples目录下添加BUILD.gn文件：#"src/lv_demo_music/lv_demo_music.c",#"src/lv_demo_printer/lv_demo_printer.c",#"src/lv_demo_stress/lv_demo_stress.c","src/lv_demo_widgets/lv_demo_widgets.c",#"src/lv_ex_get_started/lv_start.",#"src/lv_demo_widgets/lv_demo_widgets.c",]cflags=["-Wno-unused-variable"]cflags+=["-Wno-unused-but-set-variable"]cflags+=["-Wno-unused-parameter"]include_dirs=["src/lv_demo_widgets",]}在GUI/lvgl/BUILD.gn目录下添加BUILD.gn文件：static_library("lvgl"){sources=["src/lv_core/lv_disp.c","src/lv_core/lv_group.c","src/lv_core/lv_indev.c","src/lv_core/lv_obj.c","src/lv_core/lv_refr.c","src/lv_core/lv_style.c","src/lv_draw/lv_draw_basic.c","src/lv_draw/lv_draw.c","src/lv_draw/lv_draw_rect.c","src/lv_draw/lv_draw_label.c","src/lv_draw/lv_draw_line.c","src/lv_draw/lv_draw_img.c","src/lv_draw/lv_draw_arc.c","src/lv_draw/lv_draw_triangle.c","src/lv_draw/lv_img_decoder.c","src/lv_draw/lv_img_cache.c","src/lv_font/lv_font.c","src/lv_font/lv_font_fmt_txt.c","src/lv_font/lv_font_roboto_12.c","src/lv_font/lv_font_roboto_16.c","src/lv_font/lv_font_roboto_22.c","src/lv_font/lv_font_roboto_28.c","src/lv_font/lv_font_unscii_8.c","src/lv_hal/lv_hal_disp.c","src/lv_hal/lv_hal_indev.c","src/lv_hal/lv_hal_tick.c","src/lv_misc/lv_circ.c","src/lv_misc/lv_area.c","src/lv_misc/lv_task.c","src/lv_misc/lv_fs.c","src/lv_misc/lv_anim.c","src/lv_misc/lv_mem.c","src/lv_misc/lv_ll.c","src/lv_misc/lv_color.c","src/lv_misc/lv_txt.c","src/lv_misc/lv_math.c","src/lv_misc/lv_log.c","src/lv_misc/lv_gc.c","src/lv_misc/lv_utils.c","src/lv_misc/lv_async.c","src/lv_themes/lv_theme_alien.c","src/lv_themes/lv_theme.c","src/lv_themes/lv_theme_default.c","src/lv_themes/lv_theme_night.c","src/lv_themes/lv_theme_templ.c","src/lv_themes/lv_theme_zen.c","src/lv_themes/lv_theme_material.c","src/lv_themes/lv_theme_nemo.c","src/lv_themes/lv_theme_mono.c","src/lv_objx/lv_arc.c","src/lv_objx/lv_bar.c","src/lv_objx/lv_cb.c","src/lv_objx/lv_ddlist.c","src/lv_objx/lv_kb.c","src/lv_objx/lv_line.c","src/lv_objx/lv_mbox.c","src/lv_objx/lv_preload.c","src/lv_objx/lv_roller.c","src/lv_objx/lv_table.c","src/lv_objx/lv_tabview.c","src/lv_objx/lv_tileview.c","src/lv_objx/lv_btn.c","src/lv_objx/lv_calendar.c","src/lv_objx/lv_chart.c","src/lv_objx/lv_canvas.c","src/lv_objx/lv_gauge.c","src/lv_objx/lv_label.c","src/lv_objx/lv_list.c","src/lv_objx/lv_slider.c","src/lv_objx/lv_ta.c","src/lv_objx/lv_spinbox.c","src/lv_objx/lv_btnm.c","src/lv_objx/lv_cont.c","src/lv_objx/lv_img.c","src/lv_objx/lv_imgbtn.c","src/lv_objx/lv_led.c","src/lv_objx/lv_lmeter.c","src/lv_objx/lv_page.c","src/lv_objx/lv_sw.c","src/lv_objx/lv_win.c",]cflags=["-Wno-unused-variable"]cflags+=["-Wno-unused-but-set-variable"]cflags+=["-Wno-unused-parameter"]include_dirs=["lvgl",]}先分享到这里，接下来小编带大家了解一下要修改的一些细节！想了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com
