【LVGL】Windows下拉取并运行LVGL官方代码+基本语法分析

上一节中笔者简单介绍了一下所做项目“基于嵌入式系统的linux图形界面设计与应用”的背景和概述，说到为应对嵌入式系统资源有限的难题，笔者选用了轻量级的嵌入式GUI开发库LVGL，本节将带领读者们初探LVGL的世界。

初步认识LVGL

为了帮助大家更好的理解LVGL是一个什么概念，笔者将结合大家更为熟悉的html网页来类比说明。

一张网页其实背后是由一份html代码支持的（这里我们不考虑css，js等功能代码），比如我想在网页的头部加一行文字“RUNOOB.COM”，那在编写代码的时候其实就可以定义一个文本类型的变量（text）,变量的值就是我们想要显示的文字，再通过设置位置（pos）参数就可以实现目的。这一切基于的是针对网页的GUI语言html语言，我们通过定义不同组件（如文本、按钮、图片等）达到设计一个在浏览器上显示给用户的图形界面的目的。

而LVGL其实就是类似功能的一个GUI库，只是显示界面的载体从浏览器转变成了嵌入式主板连接的显示屏，大体思想与Html有异曲同工之妙，都是定义组件，再把组件放在屏幕上显示给用户看。而之所以称之为GUI库其实是因为LVGL和html不同，它不是一种独立的语言，而是基于C语言设计的一种图形库，本质上我们还是在用C语言写图形界面。

拉取LVGL官方代码（Windows-codeblocks）

Windows上想运行LVGL代码需要一个IDE模拟器，这样才能在Windows显示器主图形界面另开出一块小界面，显示LVGL程序运行的结果。常用的是开源IDE codeblocks，很多朋友初学C语言编程的时候可能就用的这个。

LVGL官方在github上提供了基于各种模拟器的样例工程，我们找到基于codeblocks的lv_port_win_codeblocks工程拉取即可。

LVGL官方主页（github）LVGL (github.com)

lv_port_win_codeblocks：lvgl/lv_port_win_codeblocks: Windows PC simulator project for LVGL embedded GUI Library (github.com)

我们点击code，再Download ZIP即可将工程拉取到本地

如下图所示

下一步打开codeblocks，右上角选项栏选择文件->打开->（你下载的lv_port_win_codeblocks工程所在路径）->打开其中的LittlevGL.cbp文件即可

进入代码界面后，点击上方选项框中的构建->构建并运行，即可看到一个用LVGL设计图形界面的官方样例

可以用鼠标和这个界面进行交互，快去试试吧！

LVGL基本语法

结合LVGL官方的样例代码，我们来看一下LVGL的一些基本语法

使用LVGL必要的初始化

上面的语句是初始化LVGL

下面的语句是初始化Windows下显示LVGL图形界面的小窗口，1440*600是此lvgl项目的默认显示屏尺寸（也就是之后用于添加不同组件的背景板大小）也就是之后用于添加不同组件的背景板大小

创建组件

官方代码将不同的样例封装到不同函数中，主函数中只需调用不同的函数即可看到不同的界面设计。默认的测试样例是lv_demo_widgets();所以我们进入lv_demo_widgets();中一探究竟。

一般创建组件的语法都是 

lv_obj_t * A = lv_组件类型_create(parent);

A是我们组件变量的名字，可以自定义；

lv_obj_t 是一个lvgl中最基本的变量类型，表示一个lvgl组件，它是一个抽象的类，任何组件在定义时都可以声明为这个类型，实际类型会根据等号右边创建变量的语句来具象；

lv_组件类型_create（）是创建组件的函数，想创建什么组件就将组件类型替换成目标组件，比如按钮btn，标签label，屏幕screen等等，变量A的具体类型也会根据这个函数选择的不同而不同，比如lv_btn_create（）创建的就是btn类型的变量A，lv_label_create（）创建的就是label类型的变量A；

parent是变量A是在哪个已有的变量上面创建的，这个上面就是物理层面的上面，比如如果B是一个创建好的屏幕变量，那么

lv_obj_t * A = lv_btn_create(B);

就是在屏幕B上创建一个按钮A

怎么样，是不是还挺容易理解的？几乎所有组件的创建都是这个模版，非常容易记忆。

为组件添加样式

以按钮为例，当我们使用

lv_obj_t * A = lv_btn_create(B);

创建了一个按钮组件后，这时我们只是有了一个默认的按钮，也就是说我们获得了是一个按钮的“毛坯房”，没有任何装修，你要说用吧，它也能用，比如你的确可以住在毛坯房里生活，但是我们设计图形界面的目的是什么？是为了给用户看的，所以装修这个“毛坯房”按钮就十分必要了。这就用到了样式（style）这个功能。

lvgl具有很好的封装性，我们可以将一个按钮所需要的所有样式（style）包括颜色，大小，点击效果等都用一个lv_style_t类型的变量来装载，比如说这个变量是C，C就包含了按钮A所需的所有样式，那么A+C就是我们想要的那个精美的按钮了，这个加的语义是通过

lv_obj_add_style(A,&C,0);

来实现的，刚好也有个add，是不是很好记？第一个参数就是我们想添加样式的组件A，第二个参数是我们为组件A设计的style C，注意要用&C即lv_style_t* 的类型，第三个参数我们不管，一般设置为0。

由于本篇篇幅太长，关于怎样去设计C，我们留到下节再细说。

下节预告

好了，本节的内容就先到这了，我们主要是运行了LVGL官方提供的样例代码，看到了一个LVGL程序运行的效果是怎样的，并且介绍了一些LVGL的基本语法。本篇篇幅太长，所以关于剩下的LVGL基本语法我们将留在下节再细说，除此之外，下节笔者还将介绍项目初期笔者设计的一些LVGL界面，带领读者运用文章中介绍的LVGL基本语法编写代码，设计一个自己的LVGL图形界面，敬请期待！