Quick overview（快速概览）
显示原文
Here you can learn the most important things about LVGL. You should read this first to get a general impression and read the detailed Porting（移植） and Overview（概述） sections after that.
在这里您可以了解有关 LVGL 的最重要的事情。 您应该先阅读本文以获得大致印象，然后再阅读详细的 Porting（移植） 和 Overview（概述） 部分。
Get started in a simulator（从模拟器开始）
显示原文
Instead of porting LVGL to embedded hardware straight away, it's highly recommended to get started in a simulator first.
LVGL is ported to many IDEs to be sure you will find your favorite one. Go to the Simulator on PC（PC端模拟器） section to get ready-to-use projects that can be run on your PC. This way you can save the time of porting for now and get some experience with LVGL immediately.
强烈建议您先在lvgl模拟器上开始学习实验，而不是立即将 LVGL 移植到嵌入式硬件。
LVGL 已适配到许多 IDE，以确保您能找到自己喜欢的一种模拟器开发环境。转到 Simulator on PC（PC端模拟器） 部分以获取可以在您的 PC 上运行的即用型项目。通过这种方式，您可以暂时节省移植时间并立即获得一些使用 LVGL 的经验。(这是非常有用的！)
Add LVGL into your project（将 LVGL 添加到您的项目中）
显示原文
If you would rather try LVGL on your own project follow these steps:
Download or clone the library from GitHub with
git clone https://github.com/lvgl/lvgl.git.Copy the
lvglfolder into your project.Copy
lvgl/lv_conf_template.haslv_conf.hnext to thelvglfolder, change the first#if 0to1to enable the file's content and set theLV_COLOR_DEPTHdefines.Include
lvgl/lvgl.hin files where you need to use LVGL related functions.Call
lv_init()Call lv_tick_inc(x) every
xmilliseconds in a Timer or Task (xshould be between 1 and 10). It is required for the internal timing of LVGL. Alternatively, register atick_get_cbwithlv_tick_set_cb()so that LVGL can retrieve the current time directly.Create a display.
如果您更愿意在自己的项目中尝试 LVGL，请按照以下步骤操作：
使用git命令
git clone https://github.com/lvgl/lvgl.git从 GitHub 下载 或克隆库。将
lvgl文件夹复制到您的项目中。将
lvgl/lv_conf_template.h作为lv_conf.h复制到lvgl文件夹旁边，将其第一个的#if 0更改为1以使能文件的内容并修改设置LV_COLOR_DEPTH宏。在需要使用 LVGL 相关函数的文件中包含
lvgl/lvgl.h。调用
lv_init()(初始化lvgl库)在计时器或任务中每
x毫秒调用一次 lv_tick_inc(x) (x应该在 1 到 10 之间)。 LVGL 的内部时序需要它。或者，使用lv_tick_set_cb()注册tick_get_cb，以便LVGL可以直接检索当前时间。创建一个显示。
lv_display_t *display = lv_display_create(MY_DISP_HOR_RES, MY_DISP_VER_RES);
显示原文
Create a draw buffer: LVGL supports multiple buffering methods. Here you
can see how to set up partial buffering (that is render the screen and the changed areas in a smaller buffer). The buffer size can be set freely but 1/10 screen size is a good starting point.
LVGL支持多种缓冲方法。在这里，你可以看到如何设置部分缓冲（即在较小的缓冲区中渲染屏幕和变更区域）。 缓冲区大小可以自由设置，但 1/10 屏幕大小是一个很好的起点。
/*Declare a buffer for 1/10 screen size*/
#define BYTE_PER_PIXEL (LV_COLOR_FORMAT_GET_SIZE(LV_COLOR_FORMAT_RGB565)) /*will be 2 for RGB565 */
static uint8_t buf1[MY_DISP_HOR_RES * MY_DISP_VER_RES / 10 * BYTE_PER_PIXEL];
lv_display_set_buffers(display, buf1, NULL, sizeof(buf1), LV_DISPLAY_RENDER_MODE_PARTIAL); /*Initialize the display buffer.*/
显示原文
Implement and register a function which can copy the rendered image to an area of your display:
实现并注册一个函数，该函数可以将渲染图像复制到显示区域：
lv_display_set_flush_cb(display, my_disp_flush);
void my_disp_flush(lv_display_t * disp, const lv_area_t * area, lv_color_t * color_p)
{
int32_t x, y;
/*It's a very slow but simple implementation.
*`set_pixel` needs to be written by you to a set pixel on the screen*/
for(y = area->y1; y <= area->y2; y++) {
for(x = area->x1; x <= area->x2; x++) {
set_pixel(x, y, *color_p);
color_p++;
}
}
lv_display_flush_ready(disp); /* Indicate you are ready with the flushing*/
}
显示原文
Implement and register a function which can read an input device. E.g. for a touchpad:
实现并注册一个可以读取输入设备的函数。例如。对于触摸板：
lv_indev_t * indev = lv_indev_create(); /*Create an input device*/
lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER); /*Touch pad is a pointer-like device*/
lv_ondev_set_read_cb(indev, my_touchpad_read); /*Set your driver function*/
void my_touchpad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{
/*`touchpad_is_pressed` and `touchpad_get_xy` needs to be implemented by you*/
if(touchpad_is_pressed()) {
data->state = LV_INDEV_STATE_PRESSED;
touchpad_get_xy(&data->point.x, &data->point.y);
} else {
data->state = LV_INDEV_STATE_RELEASED;
}
}
显示原文
Call
lv_timer_handler()periodically every few milliseconds in the mainwhile(1)loop or in an operating system task. It will redraw the screen if required, handle input devices, animation etc.
For a more detailed guide go to the Porting（移植） section.
在主函数 while(1) 循环或操作系统任务中每隔几毫秒定期调用 lv_timer_handler() 。 如果需要，它将重绘屏幕，处理输入设备，动画等。
有关更详细的指南，请转到 Porting（移植） 部分。
Learn the basics（学习基础知识）
Widgets（部件）
显示原文
The graphical elements like Buttons, Labels, Sliders, Charts etc. are called objects or widgets. Go to Widgets（控件） to see the full list of available widgets.
Every object has a parent object where it is created. For example, if a label is created on a button, the button is the parent of label.
The child object moves with the parent and if the parent is deleted the children will be deleted too.
Children can be visible only within their parent's bounding area. In other words, the parts of the children outside the parent are clipped.
A Screen is the "root" parent. You can have any number of screens.
To get the current screen call lv_screen_active(), and to load a screen
use lv_screen_load(scr1).
You can create a new object with lv_<type>_create(parent). It will
return an lv_obj_t * variable that can be used as a reference to the
object to set its parameters.
For example:
lv_obj_t * slider1 = lv_slider_create(lv_screen_active());
To set some basic attributes lv_obj_set_<parameter_name>(obj, <value>) functions can be used. For
example:
lv_obj_set_x(btn1, 30);
lv_obj_set_y(btn1, 10);
lv_obj_set_size(btn1, 200, 50);
Along with the basic attributes, widgets can have type specific
parameters which are set by lv_<widget_type>_set_<parameter_name>(obj, <value>) functions. For
example:
lv_slider_set_value(slider1, 70, LV_ANIM_ON);
To see the full API visit the documentation of the widgets or the related header file (e.g. lvgl/src/widgets/slider/lv_slider.h).
按钮、标签、滑块、图表等图形元素称为对象或小部件。转到 Widgets（控件） 以查看可用小部件的完整列表。
每个对象都有一个创建它的父对象。例如，如果在按钮上创建标签，则该按钮是标签的父级。
子对象与父对象一起移动，如果删除父对象，子对象也将被删除。
子项只能在其父项上可见。换句话说，父级之外的子级部分被剪掉了。
Screen 是“根”父级。您可以拥有任意数量的屏幕。
要获取当前屏幕调用 lv_screen_active()，并使用 lv_screen_load(scr1) 加载屏幕。
您可以使用 lv_<type>_create(parent) 创建一个新对象。它将返回一个 lv_obj_t * 变量，该变量可用作对象的引用以设置其参数。
For example（例如）:
lv_obj_t * slider1 = lv_slider_create(lv_screen_active());
要设置一些基本属性，可以使用 lv_obj_set_<parameter_name>(obj, <value>) 函数。例如：
lv_obj_set_x(btn1, 30);
lv_obj_set_y(btn1, 10);
lv_obj_set_size(btn1, 200, 50);
除了基本属性外，小部件还可以具有特定于类型的小部件由 lv_<widget_type>_set_<parameter_name>(obj, <value>) 函数设置的参数。例如：
lv_slider_set_value(slider1, 70, LV_ANIM_ON);
要查看完整的 API，请访问小部件的文档或相关的头文件（例如 lvgl/src/widgets/slider/lv_slider.h）。
Events（事件）
显示原文
Events are used to inform the user that something has happened with an object. You can assign one or more callbacks to an object which will be called if the object is clicked, released, dragged, being deleted, etc.
A callback is assigned like this:
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/
...
void btn_event_cb(lv_event_t * e)
{
printf("Clicked\n");
}
LV_EVENT_ALL can be used instead of LV_EVENT_CLICKED to invoke
the callback for any event.
From lv_event_t * e the current event code can be retrieved with:
lv_event_code_t code = lv_event_get_code(e);
The object that triggered the event can be retrieved with:
lv_obj_t * obj = lv_event_get_target(e);
To learn all features of the events go to the Events（事件） section.
事件用于通知用户某个对象发生了某些事情。 您可以将一个或多个回调分配给一个对象，如果该对象被单击、释放、拖动、删除等将被调用。
一个回调是这样分配的：
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/
...
void btn_event_cb(lv_event_t * e)
{
printf("Clicked\n");
}
LV_EVENT_CLICKED 可以代替 LV_EVENT_ALL 调用任何事件的回调。
从 lv_event_t * e 中，可以使用以下命令检索当前事件代码：
lv_event_code_t code = lv_event_get_code(e);
可以使用以下命令检索触发事件的对象：
lv_obj_t * obj = lv_event_get_target(e);
要了解事件的所有功能，请转到 Events（事件） 部分。
Parts（部分）
显示原文
Widgets might be built from one or more parts. For example, a button
has only one part called LV_PART_MAIN. However, a
lv_slider.h has LV_PART_MAIN, LV_PART_INDICATOR
and LV_PART_KNOB.
By using parts you can apply different styles to sub-elements of a widget. (See below)
Read the widgets' documentation to learn which parts each uses.
部件可能由一个或多个 部分 构建。例如，一个按钮只有一个名为 LV_PART_MAIN 的部分。但是， lv_slider(滑块) 具有 LV_PART_MAIN、 LV_PART_INDICATOR 和 LV_PART_KNOB。
通过使用零件，你可以将不同的样式应用于小装置。（见下文）
阅读小部件的文档，了解每个小部件使用的部分。
States（状态）
显示原文
LVGL objects can be in a combination of the following states:
LV_STATE_DEFAULT: Normal, released stateLV_STATE_CHECKED: Toggled or checked stateLV_STATE_FOCUSED: Focused via keypad or encoder or clicked via touchpad/mouseLV_STATE_FOCUS_KEY: Focused via keypad or encoder but not via touchpad/mouseLV_STATE_EDITED: Edit by an encoderLV_STATE_HOVERED: Hovered by mouseLV_STATE_PRESSED: Being pressedLV_STATE_SCROLLED: Being scrolledLV_STATE_DISABLED: Disabled
For example, if you press an object it will automatically go to the
LV_STATE_FOCUSED and LV_STATE_PRESSED states and when you
release it the LV_STATE_PRESSED state will be removed while focus
remains active.
To check if an object is in a given state use
lv_obj_has_state(obj, LV_STATE_...). It will return true if the
object is currently in that state.
To manually add or remove states use:
LVGL 对象可以处于以下状态的组合：
LV_STATE_DEFAULT: 正常，释放状态LV_STATE_CHECKED: 切换或选中状态LV_STATE_FOCUSED: 通过键盘或编码器聚焦或通过触摸板/鼠标点击LV_STATE_FOCUS_KEY: 通过键盘或编码器聚焦，但不通过触摸板/鼠标聚焦LV_STATE_EDITED: 由编码器编辑LV_STATE_HOVERED: 鼠标悬停LV_STATE_PRESSED: 被按下LV_STATE_SCROLLED: 正在滚动
例如，如果你按下一个对象，它会自动进入 LV_STATE_FOCUSED 和 LV_STATE_PRESSED 状态，当你释放它时， LV_STATE_PRESSED 状态将被移除，保持活动状态。
要检查对象是否处于给定状态，请使用 lv_obj_has_state(obj, LV_STATE_...)。如果对象当时处于该状态，它将返回 true 。
要手动添加或删除状态，请使用下面的函数：
lv_obj_add_state(obj, LV_STATE_...);
lv_obj_remove_state(obj, LV_STATE_...);
Styles（样式）
显示原文
A style instance contains properties such as background color, border width, font, etc. that describe the appearance of objects.
Styles are represented with lv_style_t variables. Only their pointer
is saved in the objects so they need to be defined as static or global.
Before using a style it needs to be initialized with
lv_style_init(&style1). After that, properties can be added to
configure the style. For example:
样式实例包含背景颜色、边框等属性 宽度、字体等，用于描述对象的外观。
样式用 lv_style_t 变量表示。只有他们的指针 保存在对象中，因此需要将它们定义为静态或全局。 在使用样式之前，需要使用 lv_style_init(&style1) 对其进行初始化。之后，可以将属性添加到 配置样式。例如：
static lv_style_t style1;
lv_style_init(&style1);
lv_style_set_bg_color(&style1, lv_color_hex(0xa03080))
lv_style_set_border_width(&style1, 2))
显示原文
See the full list of properties here Properties（属性）.
Styles are assigned using the ORed combination of an object's part and state. For example to use this style on the slider's indicator when the slider is pressed:
请参阅此处的完整属性列表 Properties（属性）。
使用对象的零件和的ORed组合指定样式状态。例如，当滑块被按下：
lv_obj_add_style(slider1, &style1, LV_PART_INDICATOR | LV_STATE_PRESSED);
显示原文
If the part is LV_PART_MAIN it can be omitted:
如果是 part ，则 LV_PART_MAIN 可以省略：
lv_obj_add_style(btn1, &style1, LV_STATE_PRESSED); /*Equal to LV_PART_MAIN | LV_STATE_PRESSED*/
显示原文
Similarly, LV_STATE_DEFAULT can be omitted too:
类似地， LV_STATE_DEFAULT 也可以省略：
lv_obj_add_style(slider1, &style1, LV_PART_INDICATOR); /*Equal to LV_PART_INDICATOR | LV_STATE_DEFAULT*/
显示原文
For LV_STATE_DEFAULT and LV_PART_MAIN simply write 0:
对于 LV_STATE_DEFAULT 和 LV_PART_MAIN 只需写下 0:
lv_obj_add_style(btn1, &style1, 0); /*Equal to LV_PART_MAIN | LV_STATE_DEFAULT*/
显示原文
Styles can be cascaded (similarly to CSS). It means you can add more
styles to a part of an object. For example style_btn can set a
default button appearance, and style_btn_red can overwrite the
background color to make the button red:
样式可以级联（类似于 CSS）。这意味着您可以为对象的一部分添加更多样式。 例如 style_btn 可以设置默认按钮外观， style_btn_red 可以覆盖背景颜色使按钮变为红色：
lv_obj_add_style(btn1, &style_btn, 0);
lv_obj_add_style(btn1, &style1_btn_red, 0);
显示原文
If a property is not set on for the current state, the style with
LV_STATE_DEFAULT will be used. A default value is used if the
property is not defined in the default state.
Some properties (typically the text-related ones) can be inherited. This means if a property is not set in an object it will be searched for in its parents too. For example, you can set the font once in the screen's style and all text on that screen will inherit it by default.
Local style properties also can be added to objects. This creates a style which resides inside the object and is used only by the object:
如果没有为当前状态设置属性，则将使用带有 LV_STATE_DEFAULT 的样式。如果即使在默认状态下也未定义该属性，则使用默认值。
一些属性（通常是与文本相关的）可以被继承。这意味着如果一个属性没有在一个对象中设置，它也会在它的父级中搜索。 例如，您可以在屏幕样式中设置一次字体，该屏幕上的所有文本都会默认继承它。
本地样式属性也可以添加到对象中。它创建了一个位于对象内部并且仅由对象使用的样式：
lv_obj_set_style_bg_color(slider1, lv_color_hex(0x2080bb), LV_PART_INDICATOR | LV_STATE_PRESSED);
显示原文
To learn all the features of styles see the Styles（风格样式） section.
要了解样式的所有功能，请参阅 Styles（风格样式） 部分。
Themes（主题）
显示原文
Themes are the default styles for objects. Styles from a theme are applied automatically when objects are created.
The theme for your application is a compile time configuration set in
lv_conf.h.
主题是对象的默认样式。创建对象时，将自动应用来自主题的样式。
应用程序的主题是在 lv_conf.h 中设置的编译时配置。
Examples
A very simple hello world label
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LABEL
/**
* Basic example to create a "Hello world" label
*/
void lv_example_get_started_1(void)
{
/*Change the active screen's background color*/
lv_obj_set_style_bg_color(lv_screen_active(), lv_color_hex(0x003a57), LV_PART_MAIN);
/*Create a white label, set its text and align it to the center*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Hello world");
lv_obj_set_style_text_color(lv_screen_active(), lv_color_hex(0xffffff), LV_PART_MAIN);
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}
#endif
Create a slider and write its value on a label
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_SLIDER
static lv_obj_t * label;
static void slider_event_cb(lv_event_t * e)
{
lv_obj_t * slider = lv_event_get_target(e);
/*Refresh the text*/
lv_label_set_text_fmt(label, "%"LV_PRId32, lv_slider_get_value(slider));
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align top of the slider*/
}
/**
* Create a slider and write its value on a label.
*/
void lv_example_get_started_4(void)
{
/*Create a slider in the center of the display*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_set_width(slider, 200); /*Set the width*/
lv_obj_center(slider); /*Align to the center of the parent (screen)*/
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); /*Assign an event function*/
/*Create a label above the slider*/
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "0");
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align top of the slider*/
}
#endif
MicroPython
显示原文
Learn more about MicroPython.
了解有关 MicroPython 的更多信息。
# Initialize
import display_driver
import lvgl as lv
# Create a button with a label
scr = lv.obj()
btn = lv.button(scr)
btn.align(lv.ALIGN.CENTER, 0, 0)
label = lv.label(btn)
label.set_text('Hello World!')
lv.screen_load(scr)