LVGL_V7.7.2_快速概述

快速概述

在这里，你可以学到关于LVGL最重要的东西。你应该先读一读，才能得到一般的印象，然后再看详细的内容。移植和概述在那之后。

从模拟器开始

与其将LVGL移植到嵌入式硬件上，不如先在模拟器中开始。
LVGL被移植到许多IDE，以确保您会找到您的福维亚蒂之一。去模拟器准备使用的项目，可以在您的电脑上运行。这样您就可以暂时保存移植，并立即体验LVGL。

将LVGL添加到项目中

以下步骤演示如何在带有显示器和触摸屏的嵌入式系统上设置LVGL。
• 下载或者从GitHub克隆图书馆git clone https://github.com/lvgl/lvgl.git
• 复制 lvgl 文件夹到您的项目中
• 复制 lvgl/lv_conf_template.h 如 lv_conf.h 紧挨着 lvgl 文件夹，更改第一个#if 0到1以启用文件的内容并至少设置 LV_HOR_RES_MAX, LV_VER_RES_MAX 和 LV_COLOR_DEPTH 定义。
• 包括lvgl/lvgl.h您需要使用与LVGL相关的函数。
• 打电话lv_tick_inc(x)每个x毫秒在计时器或任务中 (x应该在1到10之间)。这是必要的内部时间的LVGL。
• 打电话lv_init()
• 为LVGL创建一个显示缓冲区。LVGL将首先在这里呈现图形，并将呈现的图像添加到显示中。缓冲区大小可以自由设置，但1/10屏幕大小是一个很好的起点。

static lv_disp_buf_t disp_buf;
static lv_color_t buf[LV_HOR_RES_MAX * LV_VER_RES_MAX / 10];                    
/*声明1/10屏幕大小的缓冲区*/
lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * LV_VER_RES_MAX / 10);    
/*初始化显示缓冲区*/
•	实现并注册一个可以复制呈现的图像显示的区域：
lv_disp_drv_t disp_drv;               		/*显示驱动程序的描述符*/
lv_disp_drv_init(&disp_drv);          		/*基本初始化*/
disp_drv.flush_cb = my_disp_flush;    		/*设置您的驱动程序功能*/
disp_drv.buffer = &disp_buf;          		/*将缓冲区分配给显示器*/
lv_disp_drv_register(&disp_drv);      		/*最后注册驱动程序*/

void my_disp_flush(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * color_p)
{
    int32_t x, y;
    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_disp_flush_ready(disp);         /* 表明您已准备好刷新*/}

• 实现并注册一个可以读取输入装置。例如用于触控板：

lv_indev_drv_t indev_drv;                  /*输入设备驱动程序的描述符*/
lv_indev_drv_init(&indev_drv);             /*基本初始化*/
indev_drv.type = LV_INDEV_TYPE_POINTER;    /*触摸板是一个类似指针的设备*/
indev_drv.read_cb = my_touchpad_read;      /*设置您的驱动程序功能*/
lv_indev_drv_register(&indev_drv);         /*最后注册驱动程序*/

bool my_touchpad_read(lv_indev_t * indev, lv_indev_data_t * data)
{
    data->state = touchpad_is_pressed() ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL;
    if(data->state == LV_INDEV_STATE_PR) touchpad_get_xy(&data->point.x, &data->point.y);

    return false; /*返回`False`，因为我们没有缓冲，没有更多数据要读取*/}

• 使lv_task_handler()周期性地每隔几毫秒在主while(1)循环，在计时器中断中或在操作系统任务中。如果需要，它将重新绘制屏幕，处理输入设备等。
有关更详细的指南，请访问移植部分。

学习基本知识

Widgets小部件

图形元素如按钮、标签、滑块、图表等在LVGL中称为对象或小部件。去小部件若要查看可用小部件的完整列表，请执行以下操作。
每个对象在创建的地方都有一个父对象。例如，如果在按钮上创建了标签，则该按钮是标签的父级。子对象与父对象一起移动，如果父对象被删除，子对象也将被删除。
子对象只能在他们的父对象身上可见。换句话说，子对象离开父对象的部分被剪掉了。
屏幕是“根”父级。你可以有任意数量的屏幕。若要获取当前屏幕调用，请执行以下操作lv_scr_act()，并加载屏幕使用lv_scr_load(scr1).
您可以使用lv__create(parent, obj_to_copy)。它将返回一个lv_obj_t *变量，该变量应用作对对象的引用，以设置其参数。第一个参数是所需的父对象，第二个参数可以是要复制的对象(NULL未使用)。例如：

lv_obj_t * slider1 = lv_slider_create(lv_scr_act(), NULL);

设置一些基本属性 lv_obj_set_<paramters_name>(obj, )函数可以使用。例如：

lv_obj_set_x(btn1, 30);
lv_obj_set_y(btn1, 10);
lv_obj_set_size(btn1, 200, 50);

对象也具有特定类型的参数，这些参数可以由 lv_set<paramters_name>(obj, )设置。例如：

lv_slider_set_value(slider1, 70, LV_ANIM_ON);

要查看完整的API，请访问小部件的文档或相关的头文件(例如，Lvgl/src/LV_widget/LV_slder.h).

Event事件

事件用于通知用户，如果对象发生了某些事情。您可以为对象分配一个回调，如果对象被单击、释放、拖动、删除等，该对象将被调用。它应该如下所示：

lv_obj_set_event_cb(btn, btn_event_cb);                 /*为按钮分配回调*/
...

void btn_event_cb(lv_obj_t * btn, lv_event_t event)
{
    if(event == LV_EVENT_CLICKED) {
        printf("Clicked\n");
    }
}

中了解更多有关事件的信息。事件概述部分。

零件

小部件可以由一个或多个部件构建。例如，按钮只有一个名为LV_BTN_PART_MAIN。然而，页有LV_PAGE_PART_BG, LV_PAGE_PART_SCROLLABLE, LV_PAGE_PART_SCROLLBAR和LV_PAGE_PART_EDGE_FLASG.
有些零件是虚拟(它们不是真实的对象，只是动态地绘制，例如页面的滚动条)，但其他部分是真品(它们是真实的对象，例如页面中可滚动的部分)。
当您想要设置对象的给定部分的样式和状态时，部件就会发挥作用。(见下文)

States状态

对象可以是以下状态的组合：

•	LV_STATE_DEFAULT 		正常，释放
•	LV_STATE_CHECKED		切换或检查
•	LV_STATE_FOCUSED		通过键盘或编码器聚焦，或通过触摸屏/鼠标点击
•	LV_STATE_EDITED			由编码器编辑
•	LV_STATE_HOVERED		鼠标悬停(现在不支持)
•	LV_STATE_PRESSED		按下
•	LV_STATE_DISABLED		禁用或不活动

例如，如果按下一个对象，则自动获取LV_STATE_PRESSED状态，当您释放时，它将被移除。若要获取当前状态使用，请执行以下操作lv_obj_get_state(obj, part)。它将返回ORed状态。例如，它是checkbox复选框的有效状态：LV_STATE_CHECKED | LV_STATE_PRESSED | LV_STATE_FOCUSED

Styles样式

可以将样式分配给部件对象以更改其外观。例如，样式可以描述背景颜色、边框宽度、文本字体等。见完整列表这里.样式可以级联(类似于CSS)。这意味着您可以向对象的一部分添加更多的样式。例如style_btn可以设置默认按钮外观，以及style_btn_red可以覆盖一些属性使按钮变红-您设置的每个样式属性都是特定于状态的。

例如，您可以设置不同的背景色。LV_STATE_DEFAULT和LV_STATE_PRESSED。库在给定部件的状态和可用的样式属性之间找到最佳匹配。例如，如果对象处于按下状态，并且为按下状态指定边框宽度，则将使用它。但是，如果没有为按下状态指定它，则LV_STATE_DEFAULT将使用边框宽度。如果边框宽度未定义为LV_STATE_DEFAULT或者，将使用默认值。
某些属性(通常是与文本相关的属性)可以继承。这意味着如果一个属性没有在对象中设置，那么它也将在其父对象中被搜索。例如，您可以在屏幕样式中设置一次字体，默认情况下，每个文本都会继承它。还可以将本地样式属性添加到对象中。

Themes主题

主题是对象的默认样式。在创建对象时，主题的样式将自动应用。
可以选择要在其中使用的主题。lv_conf.h.

实例

带标签的按钮

#include "../../lv_examples.h"

static void btn_event_cb(lv_obj_t * btn, lv_event_t event)
{
    if(event == LV_EVENT_CLICKED) {
        static uint8_t cnt = 0;
        cnt++;

        /*获取作为标签的按钮的第一个子项并更改其文本*/
void lv_obj_t * label = lv_obj_get_child(btn, NULL);
        lv_label_set_text_fmt(label, "Button: %d", cnt);
    }
}

/**
 * Create a button with a label and react on Click event.
 */
void lv_ex_get_started_1(void)
{
    lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);     /*在当前屏幕上添加按钮*/
    lv_obj_set_pos(btn, 10, 10);                            /*设置其位置*/
    lv_obj_set_size(btn, 120, 50);                          /*设置其大小*/
    lv_obj_set_event_cb(btn, btn_event_cb);                 /*为该按钮分配回调*/

    lv_obj_t * label = lv_label_create(btn, NULL);          /*向按钮添加标签*/
    lv_label_set_text(label, "Button");                     /*设置标注文本*/
}

造型按钮

#include "../../lv_examples.h"


/**
 * 从头开始为按钮创建样式。
 */
void lv_ex_get_started_2(void)
{
    static lv_style_t style_btn;
    static lv_style_t style_btn_red;

    /*创建简单的按钮样式*/
    lv_style_init(&style_btn);
    lv_style_set_radius(&style_btn, LV_STATE_DEFAULT, 10);
    lv_style_set_bg_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_COVER);
    lv_style_set_bg_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_SILVER);
    lv_style_set_bg_grad_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_GRAY);
    lv_style_set_bg_grad_dir(&style_btn, LV_STATE_DEFAULT, LV_GRAD_DIR_VER);

    /*在按下状态下交换颜色*/
    lv_style_set_bg_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_GRAY);
    lv_style_set_bg_grad_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_SILVER);

    /*添加边框*/
    lv_style_set_border_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);
    lv_style_set_border_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_70);
    lv_style_set_border_width(&style_btn, LV_STATE_DEFAULT, 2);

    /*聚焦状态下的不同边框颜色*/
    lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED, LV_COLOR_BLUE);
    lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED | LV_STATE_PRESSED, LV_COLOR_NAVY);

    /*设置文本样式*/
    lv_style_set_text_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);

    /*按下按钮时使其变小*/
    lv_style_set_transform_height(&style_btn, LV_STATE_PRESSED, -5);
    lv_style_set_transform_width(&style_btn, LV_STATE_PRESSED, -10);
#if LV_USE_ANIMATION
    /*向大小更改添加过渡*/
    static lv_anim_path_t path;
    lv_anim_path_init(&path);
    lv_anim_path_set_cb(&path, lv_anim_path_overshoot);

    lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT);
    lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH);
    lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 300);
    lv_style_set_transition_path(&style_btn, LV_STATE_DEFAULT, &path);
#endif

    /*创建红色样式。只更改一些颜色。*/
    lv_style_init(&style_btn_red);
    lv_style_set_bg_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_RED);
    lv_style_set_bg_grad_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_MAROON);
    lv_style_set_bg_color(&style_btn_red, LV_STATE_PRESSED, LV_COLOR_MAROON);
    lv_style_set_bg_grad_color(&style_btn_red, LV_STATE_PRESSED, LV_COLOR_RED);
    lv_style_set_text_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_WHITE);
#if LV_USE_BTN
    /*创建按钮并使用新样式*/
    lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);     /*在当前屏幕上添加按钮*/
    lv_obj_set_pos(btn, 10, 10);                            /*设置其位置*/
    lv_obj_set_size(btn, 120, 50);                          /*设置其大小*/
    lv_obj_reset_style_list(btn, LV_BTN_PART_MAIN);         /*删除来自主题的样式*/
    lv_obj_add_style(btn, LV_BTN_PART_MAIN, &style_btn);

    lv_obj_t * label = lv_label_create(btn, NULL);          /*向按钮添加标签*/
    lv_label_set_text(label, "Button");                     /*设置标注文本*/

    /*Create a new button*/
    lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), btn);
    lv_obj_set_pos(btn2, 10, 80);
    lv_obj_set_size(btn2, 120, 50);                          /*设置其大小*/
    lv_obj_reset_style_list(btn2, LV_BTN_PART_MAIN);         /*删除来自主题的样式*/
    lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_btn);
    lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_btn_red);/*将红色样式添加到当前*/
    lv_obj_set_style_local_radius(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); /*添加本地样式*/

    label = lv_label_create(btn2, NULL);          			/*向按钮添加标签*/
    lv_label_set_text(label, "Button 2");                     /*设置标注文本*/
#endif
}

滑块和对准

#include "../../lv_examples.h"

static lv_obj_t * label;

static void slider_event_cb(lv_obj_t * slider, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED) {
        /*刷新文本*/
        lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider));
    }
}

/**
 *创建滑块并将其值写在标签上.
 */
void lv_ex_get_started_3(void)
{
    /* 在显示屏中央创建滑块 */
    lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
    lv_obj_set_width(slider, 200);                        /*设置宽度*/
    lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0);    /*与父级(屏幕)中心对齐*/
    lv_obj_set_event_cb(slider, slider_event_cb);         /*分配事件函数*/

    /* 在滑块下方创建标签 */
    label = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(label, "0");
    lv_obj_set_auto_realign(slider, true);                          /*要在文本宽度更改时保持居中对齐，请执行以下操作*/
    lv_obj_align(label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);    /*在滑块下方对齐*/
}

Micropython微蟒

了解更多关于微蟒.

#Create a Button and a Label
scr = lv.obj()
btn = lv.btn(scr)
btn.align(lv.scr_act(), lv.ALIGN.CENTER, 0, 0)
label = lv.label(btn)
label.set_text("Button")
#Load the screen
lv.scr_load(scr)

---

2020年版权所有，LVGL有限责任公司最后更新于2020年11月3日。
Built with Sphinx using a theme provided by Read the Docs.