lvgl小部件-基础对象学习篇(二)

lvgl小部件-基础对象学习篇(二)

学习材料/工具

• QT Creator 5.12.3

• lvgl 源代码

• 极客笔记

学习过程/内容

• LVGL 基础对象-坐标

  • 尺寸

  • 位置

  • 对齐

• 父子关系

• 屏幕

• 层次

• 事件处理

• 部件

• 状态

• 风格

• 属性

• 保护

• 组

• 扩展点击区域

• 事件

• 按键

• 范例

  • 具有自定义样式的基础对象

• 相关API

  • Typedefs

  • enums

  • 函数

简介

基础对象 (lv_obj)，LVGL基础对象-概述

基础对象 实现了屏幕上小部件的基本属性 ，例如：

• 坐标

• 父对象

• 子对象

• 主要风格

• 属性，例如点击启用、拖动启用等

在面向对象的思想中，它是继承LVGL中所有其他对象的基类。这尤其有助于减少代码重复。

Base 对象的功能也可以与其他小部件一起使用。例如lv_obj_set_width(slider,100);

Base 对象可以直接用作简单的小部件。然后就是矩形。

坐标

1. 尺寸

可以使用lv_obj_set_width(obj, new_width)和lv_obj_set_height(obj, new_height)在单个坐标轴方向(横向、纵向)上修改对象的大小，或者可以使用lv_obj_set_size(obj, new_width,new_height)同时修改两个坐标轴方向(横向和纵向)的大小。

样式可以向对象添加边距。 Margin(边距)说 “我想要我周围的空间” 。那么我们可以设置对象的宽度： lv_obj_set_width_margin(obj，new_width) 或高度： lv_obj_set_height_margin(obj，new_height) 。更确切地讲是这样： new_width = left_margin + object_width + right_margin 。

要获取包含边距的宽度或高度，请使用lv_obj_get_width/height_margin(obj)。

样式也可以向对象添加填充。填充的意识是我不要我的孩子们离我的身体太近，所以要保留这个空间 。通过lv_obj_set_width_fit(obj,new_width)或高度：lv_obj_set_height_fit(obj, new_height)设置需要填充减小的宽度或高度。

可以以更精确的方式：new_width = left_pad + object_width + right_pad。要获得通过填充减少的宽度或高度。请使用lv_obj_get_widtn/height_fit(obj)。可以将其视为对象的有用大小。

当其他窗口小部件使用布局或自动调整时，边距和填充变得很重要。

2. 位置

可以使用lv_obj_set_x(obj, new_x)和lv_obj_set_y(obj, new_y)设置对象相对于父级的x和y坐标，或者同时使用lv_obj_set_pos(obj,new_x,new_y)设置相对于父级的x和y坐标。

3. 对齐

可以使用lv_obj_align(obj, obj_ref, LV_ALIGN_…,x_ofs,y_ofs)将对象与另一个对象对齐。

• obj 是要对齐的对象

• obj_ref 是参考对象。obj将与其对齐。如果obj_ref = NULL，则将使用obj的父级。

• 第三个参数是对齐方式的类型。这些是可能的选项。

对齐类型的构建类似于LV_ALIGN_OUT_TOP_MID。-最后两个参数允许在对齐对象后将其移动指定数量的像素。

例如，要在图像下方对齐文本：lv_obj_align(text,image,LV_ALIGN_OUT_BUTTON_MID，0,10)。或在父级中间对齐文本：lv_obj_align(text,NULL,LV_ALIGN_CENTER,0,0) lv_obj_align_arigo的工作方式与lv_obj_align类似，但它使对象的中心对齐。

例如，lv_obj_align_origo(btn,image,LV_ALIGN_OUT_BOTTOM_MID,0,0)将使按钮的中心与图像底部对齐。

如果在lv_conf.h中启用了LV_USR_OBJ_REALIGN，则路线的参数将保存在对象中。然后，只需调用lv_obj_realign(obj)即可重新对齐对象。等效于使用相同的参数再次调用lv_obj_align。

如果对齐是通过lv_obj_align_origo进行的，则在重新对齐对象时将使用它。

函数lv_obj_align_x/y和lv_obj_align_origo_x/y只能在一个轴上对齐。

如果使用lv_obj_set_auto_realign(obj,true)，并且对象的大小在lv_obj_set_width/height/size()函数中更改，则对象将自动重新对齐。当将尺寸动画应用于对象并且需要保留原始位置时，这非常有用。

请注意，屏幕的坐标无法更改。尝试在屏幕上使用这些功能将导致不确定的行为 。

父子关系

可以使用lv_obj_set_parent(obj,new_parent)为对象设置新的父对象。要获取当前的父对象，请使用lv_obj_get_parent(obj)。

要获取对象的子代，请使用lv_obj_get_child(obj,child_id)(从最后到第一 )或者lv_obj_get_child_back(obj, child_prev)(从第一到最后 )。要获得第一个子代 , 请将NULL作为第二个参数传递，并使用返回值遍历子代。如果没有更多的子级，该函数将返回NULL。例如：

lv_obj_t *child = lv_obj_get_child(parent, NULL);

while(child)
{
    child = lv_obj_get_child(parent,child);
}

lv_obj_count_children(obj) 告知对象上的子代数。

lv_obj_count_children_recursive(obj)也会告知子代数，使用递归计算子代数。

屏幕

创建了lv_obj_t *screen = lv_obj_create(NULL, NULL)之类的屏幕后，可以使用lv_scr_load(screen)加载它。lv_scr_act()函数提供了指向当前屏幕的指针。

如果有更多的显示，那么我们就要知道这些功能，可以在最后创建的或明确选择的显示上运行(使用lv_disp_set_default)。

要获取对象的屏幕，请使用lv_obj_get_screen(obj)函数。

层次

有两个自动生成的层：

• 顶层lv_layer_top()

• 系统层lv_layer_sys()

它们独立于屏幕(lv_scr_act())，并且将显示在每个屏幕上。顶层位于屏幕上每个对象的上方，而系统层也位于顶层上方。可以将任何弹窗口自由添加到顶层。但是，系统层仅限于系统级 的内容(例如，鼠标光标将放在lv_index_set_cursor()中)。

层级关系：lv_scr_act() < lv_layer_top() < lv_layer_sys()

lv_layer_top()和lv_layer_sys()函数提供了指向顶层或系统层的指针。

可以使用lv_obj_move_foreground(obj)和lv_obj_move_background(obj)将对象置于前景或背景发送至背景。

阅读对象层级(layer)部分，以了解有关图层的更多信息。

事件处理

要为对象设置事件回调，请使用lv_obj_set_event_cb(obj,event_cb)，

要将事件手动发送到对象，请使用lv_event_send(obj,LV_EVENT_…,data)

阅读事件概述以了解有关事件的更多信息。

部件

小部件可以包含多个部件。例如，按钮仅具有主要部分，而滑块则由背景，指示器和旋钮组成。

零件名称的构造类似于LV_ + PART。例如LV_BTN_PART_MAIN或LV_SLIDR_PART_KNOB通常在将样式添加到对象时使用零件。使用零件可以将不同的样式分配给对象的不同零件。

要了解有关零件的更多信息，请阅读样式概述的相关部分。

状态

对象可以处于以下状态的组合：

• LV_STATE_DEFAULT 默认或正常状态

• LV_STATE_CHECKED 选中或点击

• LV_STATE_FOCUSED 通过键盘或编码器聚焦或通过触摸板/鼠标单击

• LV_STATE_EDITED 由编码器编辑

• LV_STATE_HOVERED 鼠标悬停(现在还不支持)

• LV_STATE_PRESSED 按下

• LV_STATE_DISABLED 禁用或无效

当用户按下、释放、聚焦等对象时，状态通常由库自动检测更改。当然状态也可以手动检测更改。

要完全覆盖当前状态，调用lv_obj_set_state(obj, part,LV_STATE…)

要设置或清除某个状态(但不更改其他状态)，调用lv_obj_add/clear/state(obj, part, LV_STATE…)

可以组合使用状态值。例如：lv_obj_set_state(obj, part, LV_STATE_PRESSED | LV_PRESSED_CHECKED)。

要了解有关状态的更多信息，样式概述的相关部分。

风格

确保首先阅读了样式概述部分内容

要将样式添加到对象，请使用lv_obj_add_style(obj,part,&new_style)函数。基础对象使用所有类似矩形的样式属性。

要从对象中删除所有的样式，请使用lv_obj_reset_style_list(obj,part)

如果修改对象已使用的样式，为了刷新影响的对象，可以使用每个对象在对象上使用lv_obj_refresh_style(obj)或使用lv_obj_report_style_mod(&style)通知具有给定样式的所有对象。如果lv_obj_report_style_mod修改为NULL，则将通知所有对象。

属性

调用lv_obj_set_…(obj,true/false)可以启用/禁用一些属性：

• hidden 隐藏对象。它不会被绘制，输入设备会将其视为不存在。它的子项也将被隐藏。

• click 允许通过输入设备单击对象。如果禁用，则单击事件将传递到此事件后面的对象。(默认情况下无法点击标签)

• top 如果启用，则单击此对象或其任何子级时，该对象将进入前台。

• drag 启用拖动(通过输入设备移动)

• drag_dir 启用仅在特定方向上拖动。可以是LV_DRAG_DIR_HOR/VER/ALL.

• drag_throw 通过拖动启用"投掷"，就像对象将具有动量一样

• drag_parent 如果启用，则对象的父对象将在拖动过程中移动。看起来就像拖动父级。递归检查，因此也可以传递给祖父母。

• parent_event 也将事件传播给父母。递归检查，因此可以传播给祖父母。

• opa_scale_enable 启用不透明缩放。

保护

库中有一些自动发生的特定操作。为了防止一种或多种此类行为，可以保护对象免受它们侵害。存在以下保护：

• LV_PROTECT_NONE 没用保护

• LV_PROTECT_POS 防止自动定位(例如容器中的布局)

• LV_PROTECT_FOLLOW 防止在自动排序(例如容器布局)中遵循该对象(“换行”)

• LV_PROTECT_PARENT 防止自动更改父母。(例如，页面将在背景上创建的子代移动到可滚动页面)

• LV_PROTECT_PRESS_LOST 防止手指滑过对象时丢失。(例如，如果按下某个按钮，则可以将其释放)

• LV_PROTECT_CLICK_FOCUS 如果对象在"组"中并启用了单击焦点，则阻止其自动聚焦。

• LV_PROTECT_CHILD_CHG 禁用子对象更换信号。库内部使用。=

lv_obj_add/clear_protect(obj, LV_PROTECT_…)设置/清除保护。也可以使用保护类型的"或"值。

组

一旦将对象添加具有lv_group_add_obj(group, obj)的组中，则可以通过lv_obj_get_group(obj)获得该对象的当前组。

lv_obj_is_fouced(obj)告知对象当前是否集中在其组上。如果未将对象添加到组中，则将返回false。

阅读输入设备概述以了解有光组的更多信息。

点击扩展区域

默认情况下，只能在对象的坐标上单击对象，但是可以使用lv_obj_set_ext_click_area(obj,left,right,top,bottom)扩展该区域。左侧(left)/右侧(right)/顶部(top)/底部(bottom)描述了可点击区域应在每个方向上超出默认范围的程度。

前提是要在lv_conf.h使能LV_USR_EXT_CLICK_AREA启用此功能。可能的值为：

• LV_EXT_CLICK_AREA_FULL 将所有4个坐标存储为lv_coord_t

• LV_EXT_CLICK_AREA_TINY 仅将水平和垂直坐标(使用 左/右和上/下的较大值)存储为uint8_t

• LV_EXT_CLICK_AREA_OFF 禁用此功能

事件

仅 通用事件 是按对象类型发送的。

了解有关事件更多信息。

按键

对象类型不处理任何输入按键。

进一步了解 按键

范例

1. 具有自定义样式的基础对象

static void prvCustomBaseObject(void)
{
    lv_obj_t *prObjOne = lv_obj_create(lv_scr_act());

    lv_obj_set_size(prObjOne, 100,50);

    lv_obj_align(prObjOne, NULL, LV_ALIGN_CENTER, -60, -30);

    lv_obj_t *prObjTwo = lv_obj_create(lv_scr_act(),prObjOne);

    lv_obj_align(prObjTwo, NULL, LV_ALIGN_CENTER, 0,0);

    lv_obj_set_drag(prObjTwo,true);

    static lv_style_t prstyleShadow;

    lv_style_init(&prstyleShadow);

    lv_style_set_shadow_width(&prstyleShadow, LV_STATE_DEFAULT, 1,0);

    lv_style_set_shadow_spread(&prstyleShadow, LV_STATE_DEFAULT, 5);

    lv_style_set_shadow_color(&prstyleShadow, LV_STATE_DEFAULT, LV_COLOR_BLUE);

    lv_obj_t  *prObjThree = lv_obj_create(lv_scr_act(), prObjTwo);

    lv_obj_add_style(prObjThree, LV_OBJ_PART_MAIN, &prstyleShadow);

    lv_obj_align(prObjThree, NULL, LV_ALIGN_CENTER, 60,30);

}

学习结果

本篇文章记录了LVGL中有关事件的学习内容。