LVGL v9官方文档完美翻译(第二部分)

Widgets

Base object (lv_obj)

概述

“基础对象”实现了屏幕上小部件的基本属性,如:

  • 坐标
  • 父对象
  • 子对象
  • 包含样式
  • 属性如可点击可滚动
    在面向对象的思维中,它是LVGL中所有其他对象继承的基类。
    基础对象的功能和功能也可以与其他小部件一起使用。例如,lv_obj_set_width(slider, 100)
    基础对象可以直接用作一个简单的小部件:它不过是一个矩形。用HTML术语来说,可以将其视为一个<div>
坐标

这里只描述了一小部分坐标设置功能。要查看LVGL的所有功能(填充、样式中的坐标、布局等),请访问坐标页面。

尺寸

可以使用lv_obj_set_width(obj, new_width)和lv_obj_set_height(obj, new_height)分别修改对象的宽度和高度,或使用lv_obj_set_size(obj, new_width, new_height)同时修改两个轴的尺寸。

位置

可以使用lv_obj_set_x(obj, new_x)和lv_obj_set_y(obj, new_y)设置相对于父对象的位置,或使用lv_obj_set_pos(obj, new_x, new_y)同时设置两个轴的位置。

对齐

可以使用lv_obj_set_align(obj, LV_ALIGN_…)在其父对象上对齐对象。之后,每个x和y设置都将相对于设置的对齐模式。例如,这将使对象相对于其父对象中心移动10;20像素:

lv_obj_set_align(obj, LV_ALIGN_CENTER);
lv_obj_set_pos(obj, 10, 20);
//或者用一个函数
lv_obj_align(obj, LV_ALIGN_CENTER, 10, 20);

要将一个对象对齐到另一个对象,请使用:lv_obj_align_to(obj_to_align, obj_reference, LV_ALIGN_…, x, y)
例如,要将文本对齐到图像下方:lv_obj_align_to(text, image, LV_ALIGN_OUT_BOTTOM_MID, 0, 10)。
以下是存在的对齐类型:
image1

父对象和子对象

可以使用lv_obj_set_parent(obj, new_parent)设置对象的新父对象。要获取当前父对象,请使用lv_obj_get_parent(obj)。
要获取父对象的特定子对象,请使用lv_obj_get_child(parent, idx)。一些idx的示例:

  • 0 获取第一个创建的子对象
  • 1 获取第二个创建的子对象
  • -1 获取最后创建的子对象
    可以像这样遍历子对象:
uint32_t i;
for(i = 0; i < lv_obj_get_child_count(parent); i++) {
  lv_obj_t * child = lv_obj_get_child(parent, i);
  /*对child进行操作*/
}

lv_obj_get_index(obj)返回对象在其父对象中的索引。它等同于父对象中较小子对象的数量。
可以使用lv_obj_move_foreground(obj)将对象移到前景或使用lv_obj_move_background(obj)将其移到背景。
可以使用lv_obj_move_to_index(obj, index)更改对象在其父对象中的索引。
可以使用lv_obj_swap(obj1, obj2)交换两个对象的位置。

显示和屏幕

在LVGL对象层次结构的最高级别是显示,它表示显示设备(物理显示器或模拟器)的驱动程序。一个显示器可以有一个或多个与之关联的屏幕。每个屏幕包含一层对象,用于表示覆盖整个显示器的布局的图形小部件。
当创建一个屏幕,如lv_obj_t * screen = lv_obj_create(NULL),可以使用lv_screen_load(screen)将其激活。函数lv_screen_active()会返回指向活动屏幕的指针。
如果有多个显示器,重要的是要知道屏幕功能作用于最近创建的显示器或通过lv_display_set_default()显式选择的显示器。
要获取对象的屏幕,请使用lv_obj_get_screen(obj)函数。

事件

要为对象设置事件回调,请使用lv_obj_add_event_cb(obj, event_cb, LV_EVENT_…, user_data)。
要手动发送事件到对象,请使用lv_event_send(obj, LV_EVENT_…, param)。
阅读事件概述了解更多关于事件的信息。

样式

请务必阅读样式概述。这里只描述了最基本的函数。
可以使用lv_obj_add_style(obj, &new_style, selector)函数向对象添加新样式。selector是部分和状态的OR组合。例如,LV_PART_SCROLLBAR | LV_STATE_PRESSED
基础对象使用LV_PART_MAIN样式属性和LV_PART_SCROLLBAR与典型的背景样式属性。

标志

有一些属性可以通过lv_obj_add/remove_flag(obj, LV_OBJ_FLAG_...)lv_obj_set_flag(obj, LV_OBJ_FLAG_..., true/false)启用/禁用

/*隐藏对象*/
lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN);
/*使对象不可点击*/
lv_obj_remove_flag(obj, LV_OBJ_FLAG_CLICKABLE);

阅读输入设备概述了解更多关于的信息。
可以使用lv_group_add_obj(group, obj)将对象添加到中,您可以使用lv_obj_get_group(obj)查看对象属于哪个组。
lv_obj_is_focused(obj)返回对象是否当前在其组中获得焦点。如果对象未添加到组中,则返回false

扩展点击区域

默认情况下,对象只能在其边界区域内被点击。但是,可以使用lv_obj_set_ext_click_area(obj, size)扩展点击区域。

事件

按键

如果LV_OBJ_FLAG_CHECKABLE启用,LV_KEY_RIGHTLV_KEY_UP将使对象被选中,LV_KEY_LEFTLV_KEY_DOWN将取消选中对象。
如果LV_OBJ_FLAG_SCROLLABLE启用,但对象不可编辑(由小部件类声明),箭头键(LV_KEY_UPLV_KEY_DOWNLV_KEY_LEFTLV_KEY_RIGHT)会滚动对象。如果对象只能垂直滚动,LV_KEY_LEFTLV_KEY_RIGHT将会滚动上下,使其与编码器输入设备兼容。请参阅输入设备概述了解更多关于编码器行为和编辑模式的信息。
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
尺寸设置宽度lv_obj_set_width(obj, new_width)lv_obj_set_width(obj, 100);
设置高度lv_obj_set_height(obj, new_height)lv_obj_set_height(obj, 50);
设置尺寸lv_obj_set_size(obj, new_width, new_height)lv_obj_set_size(obj, 100, 50);
位置设置X坐标lv_obj_set_x(obj, new_x)lv_obj_set_x(obj, 10);
设置Y坐标lv_obj_set_y(obj, new_y)lv_obj_set_y(obj, 20);
设置坐标lv_obj_set_pos(obj, new_x, new_y)lv_obj_set_pos(obj, 10, 20);
对齐对齐到父对象lv_obj_set_align(obj, LV_ALIGN_...)lv_obj_set_align(obj, LV_ALIGN_CENTER);
对齐到某对象lv_obj_align_to(obj_to_align, obj_reference, LV_ALIGN_..., x, y)lv_obj_align_to(text, image, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
父子对象设置父对象lv_obj_set_parent(obj, new_parent)lv_obj_set_parent(child, parent);
获取父对象lv_obj_get_parent(obj)lv_obj_t * parent = lv_obj_get_parent(child);
获取子对象lv_obj_get_child(parent, idx)lv_obj_t * child = lv_obj_get_child(parent, 0);
显示和屏幕创建屏幕lv_obj_create(NULL)lv_obj_t * screen = lv_obj_create(NULL);
激活屏幕lv_screen_load(screen)lv_screen_load(screen);
获取活动屏幕lv_screen_active()lv_obj_t * act_screen = lv_screen_active();
获取对象屏幕lv_obj_get_screen(obj)lv_obj_t * obj_screen = lv_obj_get_screen(obj);
事件添加事件回调lv_obj_add_event_cb(obj, event_cb, LV_EVENT_..., user_data)lv_obj_add_event_cb(obj, event_cb, LV_EVENT_CLICKED, NULL);
手动发送事件lv_event_send(obj, LV_EVENT_..., param)lv_event_send(obj, LV_EVENT_CLICKED, NULL);
样式添加样式lv_obj_add_style(obj, &new_style, selector)`lv_obj_add_style(obj, &style, LV_PART_MAIN
标志添加标志lv_obj_add_flag(obj, LV_OBJ_FLAG_...)lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN);
移除标志lv_obj_remove_flag(obj, LV_OBJ_FLAG_...)lv_obj_remove_flag(obj, LV_OBJ_FLAG_CLICKABLE);
添加对象到组lv_group_add_obj(group, obj)lv_group_add_obj(group, obj);
获取对象组lv_obj_get_group(obj)lv_group_t * group = lv_obj_get_group(obj);
扩展点击区域设置点击区域大小lv_obj_set_ext_click_area(obj, size)lv_obj_set_ext_click_area(obj, 10);
事件值变化事件LV_EVENT_VALUE_CHANGED-
按键设置键盘事件LV_KEY_RIGHT, LV_KEY_UP, LV_KEY_LEFT, LV_KEY_DOWN-

弧形 Arc (lv_arc)

概述

弧形控件包括背景弧和前景弧。前景弧(指示器)可以通过触摸进行调整。

部件和样式

  • LV_PART_MAIN 使用典型的背景样式属性绘制背景,并使用弧形样式属性绘制弧形。弧形的大小和位置将遵循填充样式属性。
  • LV_PART_INDICATOR 使用弧形样式属性绘制另一个弧形。其填充值相对于背景弧进行解释。
  • LV_PART_KNOB 使用所有背景属性和填充值在指示器末端绘制一个手柄。填充为零时,手柄大小与指示器宽度相同。填充较大时手柄变大,填充较小时手柄变小。

使用方法

值和范围

可以使用 lv_arc_set_value(arc, new_value) 设置新值。该值在一个范围(最小值和最大值)内解释,可以通过 lv_arc_set_range(arc, min, max) 修改范围。默认范围是0到100。
指示器弧形绘制在主弧形上。如果值设置为最大值,指示器弧形将覆盖整个“背景”弧形。可以使用 lv_arc_set_bg_angles(arc, start_angle, end_angle) 函数或 lv_arc_set_bg_start/end_angle(arc, angle) 设置背景弧的起始和结束角度。
零度位于对象的右中(3点钟方向),角度顺时针增加。角度应在[0;360]范围内。

旋转

可以使用 lv_arc_set_rotation(arc, deg) 添加一个零度位置的偏移量。

模式

弧形控件可以有以下几种模式:

变化速率

如果按下弧形,当前值将根据设定的变化速率以有限速度设置。变化速率以度/秒为单位,可以通过 lv_arc_set_change_rage(arc, rate) 设置。

手柄偏移

更改手柄偏移可以相对于弧形末端移动手柄的位置。可以通过 lv_arc_set_knob_offset(arc, offset_angle) 设置手柄偏移,仅当 LV_PART_KNOB 可见时可见。

手动设置指示器

还可以使用 lv_arc_set_angles(arc, start_angle, end_angle) 函数或 lv_arc_set_start/end_angle(arc, start_angle) 直接设置指示器弧的角度。在这种情况下,设置的“值”和“模式”将被忽略。
换句话说,角度和值设置是独立的。应独立使用其中之一。混合使用可能导致意外行为。
为了使弧形不可调整,移除手柄样式并使对象不可点击:

lv_obj_remove_style(arc, NULL, LV_PART_KNOB);
lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE);
高级点击测试

如果启用 LV_OBJ_FLAG_ADV_HITTEST 标志,则可以在中间通过弧形进行点击。点击仅在背景弧的环上被识别。lv_obj_set_ext_click_size() 使敏感区域在内外增加给定像素数。

将另一个对象放置到手柄

可以根据弧形的当前位置放置另一个对象,以跟随弧形的当前值(角度)。为此,请使用 lv_arc_align_obj_to_angle(arc, obj_to_align, radius_offset)。
类似地,lv_arc_rotate_obj_to_angle(arc, obj_to_rotate, radius_offset) 可以用于将对象旋转到弧形的当前值。
在弧形的 VALUE_CHANGED 事件中调用这些函数是一个典型的用例。

事件

  • LV_EVENT_VALUE_CHANGED 在按下/拖动弧形以设置新值时发送。
  • LV_EVENT_DRAW_PART_BEGINLV_EVENT_DRAW_PART_END 发送以下类型:
    • LV_ARC_DRAW_PART_BACKGROUND 背景弧。
      • part: LV_PART_MAIN
      • p1: 弧的中心
      • radius: 弧的半径
      • arc_dsc
    • LV_ARC_DRAW_PART_FOREGROUND 前景弧。
    • LV_ARC_DRAW_PART_KNOB 手柄

按键

  • LV_KEY_RIGHT/UP 将值增加一。
  • LV_KEY_LEFT/DOWN 将值减少一。
    了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主弧形样式LV_PART_MAIN-
指示器弧形样式LV_PART_INDICATOR-
手柄样式LV_PART_KNOB-
值和范围设置弧形值lv_arc_set_value(arc, new_value)lv_arc_set_value(arc, 50);
设置弧形范围lv_arc_set_range(arc, min, max)lv_arc_set_range(arc, 0, 100);
设置背景弧起始和结束角度lv_arc_set_bg_angles(arc, start_angle, end_angle)lv_arc_set_bg_angles(arc, 0, 270);
旋转设置弧形旋转角度lv_arc_set_rotation(arc, deg)lv_arc_set_rotation(arc, 90);
模式设置弧形模式lv_arc_set_mode(arc, LV_ARC_MODE_...)lv_arc_set_mode(arc, LV_ARC_MODE_SYMMETRICAL);
变化速率设置弧形变化速率lv_arc_set_change_rate(arc, rate)lv_arc_set_change_rate(arc, 10);
手柄偏移设置手柄偏移lv_arc_set_knob_offset(arc, offset_angle)lv_arc_set_knob_offset(arc, 15);
手动设置指示器设置指示器角度lv_arc_set_angles(arc, start_angle, end_angle)lv_arc_set_angles(arc, 0, 180);
不可调整移除手柄和点击功能lv_obj_remove_style(arc, NULL, LV_PART_KNOB) lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE)lv_obj_remove_style(arc, NULL, LV_PART_KNOB); lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE);
高级点击测试启用高级点击测试lv_obj_add_flag(arc, LV_OBJ_FLAG_ADV_HITTEST)lv_obj_add_flag(arc, LV_OBJ_FLAG_ADV_HITTEST);
对象放置到手柄对象跟随弧形值移动lv_arc_align_obj_to_angle(arc, obj_to_align, radius_offset)lv_arc_align_obj_to_angle(arc, obj, 10);
对象跟随弧形值旋转lv_arc_rotate_obj_to_angle(arc, obj_to_rotate, radius_offset)lv_arc_rotate_obj_to_angle(arc, obj, 10);
事件值变化事件LV_EVENT_VALUE_CHANGED-
开始绘制部分事件LV_EVENT_DRAW_PART_BEGIN LV_ARC_DRAW_PART_BACKGROUND-
结束绘制部分事件LV_EVENT_DRAW_PART_END LV_ARC_DRAW_PART_FOREGROUND LV_ARC_DRAW_PART_KNOB-
增加弧形值LV_KEY_RIGHT LV_KEY_UP-
减少弧形值LV_KEY_LEFT LV_KEY_DOWN-

动画图片 Animation Image (lv_animimg)

概述

动画图片类似于普通的“图片”对象。唯一的区别是,您设置的是多个源图像的数组,而不是一个源图像。
您可以指定持续时间和重复次数。

部件和样式

  • LV_PART_MAIN 一个背景矩形,使用典型的背景样式属性和图像样式属性。

使用方法

图像源

要在某个状态下设置图像,请使用 lv_animimg_set_src(animimg, dsc[], num)。

事件

动画图片对象不发送特殊事件。
请参阅基础对象的事件。
了解更多关于 事件 的信息。

按键

动画图片对象不处理按键。
了解更多关于 按键 的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
图片源设置图片源数组lv_animimg_set_src(imagebutton, dsc[], num)lv_animimg_set_src(animimg, images, num_images);
事件不发送特殊事件参考Base object的事件-
按键不处理按键--

进度条 Bar (lv_bar)

概述

进度条对象具有一个背景和一个指示器。指示器的宽度根据进度条的当前值设置。
如果对象的宽度小于其高度,可以创建垂直进度条。
不仅可以设置进度条的结束值,还可以设置开始值,这会改变指示器的起始位置。

部件和样式

  • LV_PART_MAIN 进度条的背景,使用典型的背景样式属性。添加填充可以使指示器变小或变大。anim_time 样式属性设置动画时间,如果使用 LV_ANIM_ON 设置值时生效。
  • LV_PART_INDICATOR 指示器本身,也使用所有典型的背景属性。

使用方法

值和范围

可以使用 lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF) 设置新值。该值在一个范围(最小值和最大值)内解释,可以通过 lv_bar_set_range(bar, min, max) 修改范围。默认范围是0到100,默认绘制方向在水平模式下是从左到右,在垂直模式下是从下到上。如果最小值大于最大值,例如100到0,绘制方向会变为相反方向。
lv_bar_set_value() 中的新值可以根据最后一个参数 (LV_ANIM_ON/OFF) 设置为有动画或无动画。

模式

进度条可以有以下几种模式:

  • LV_BAR_MODE_NORMAL 如上所述的普通进度条
  • LV_BAR_MODE_SYMMETRICAL 从零值到当前值绘制指示器。需要负的最小范围和正的最大范围。
  • LV_BAR_MODE_RANGE 允许通过 lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF) 设置开始值。开始值必须始终小于结束值。

事件

也请参见基础对象的事件。
了解更多关于事件的信息。

按键

此对象类型不处理任何
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主进度条样式LV_PART_MAIN-
指示器样式LV_PART_INDICATOR-
值和范围设置进度条值lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF)lv_bar_set_value(bar, 75, LV_ANIM_ON);
设置进度条范围lv_bar_set_range(bar, min, max)lv_bar_set_range(bar, 0, 100);
模式普通模式LV_BAR_MODE_NORMAL-
对称模式LV_BAR_MODE_SYMMETRICALlv_bar_set_mode(bar, LV_BAR_MODE_SYMMETRICAL);
范围模式LV_BAR_MODE_RANGElv_bar_set_mode(bar, LV_BAR_MODE_RANGE);
设置开始值lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF)lv_bar_set_start_value(bar, 25, LV_ANIM_ON);
事件值变化事件LV_EVENT_VALUE_CHANGED-

按钮 Button (lv_button)

概述

基础对象相比,按钮没有新功能。它们用于语义目的,并且具有稍微不同的默认设置。
默认情况下,按钮与基础对象的不同之处在于:

  • 不可滚动
  • 添加到默认组
  • 默认高度和宽度设置为 LV_SIZE_CONTENT

部件和样式

  • LV_PART_MAIN 按钮的背景。使用典型的背景样式属性。

使用方法

基础对象相比,没有新功能。

事件

按键

注意,LV_KEY_ENTER 的状态会转换为 LV_EVENT_PRESSEDLV_EVENT_PRESSINGLV_EVENT_RELEASED 等事件。
也请参见基础对象的事件。
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主按钮样式LV_PART_MAIN-
使用方法按钮无新功能基础对象相同-
事件值变化事件LV_EVENT_VALUE_CHANGED 当启用 LV_OBJ_FLAG_CHECKABLE 时被点击触发-
按钮状态LV_KEY_ENTER 转换为 LV_EVENT_PRESSEDLV_EVENT_PRESSINGLV_EVENT_RELEASED-

按钮矩阵 Button matrix (lv_buttonmatrix)

概述

按钮矩阵对象是一种轻量级方式,可以在行和列中显示多个按钮。之所以称为轻量级,是因为这些按钮实际上并未真正创建,而是通过虚拟绘制实现。因此,每个按钮仅使用额外的8字节内存,而普通按钮对象大约需要100-150字节,另外加上标签对象大约100字节。
如果设置了默认组,按钮矩阵会自动添加到默认组。此外,按钮矩阵是一个可编辑对象,可以通过编码器导航选择和点击按钮。

部件和样式

  • LV_PART_MAIN 按钮矩阵的背景,使用典型的背景样式属性。pad_rowpad_column 设置按钮之间的间距。
  • LV_PART_ITEMS 所有按钮都使用文本和典型的背景样式属性,但不包括转换和变换。

使用方法

按钮的文本

每个按钮上都有文本。要指定它们,需要使用一个称为map的描述符字符串数组。可以通过 lv_buttonmatrix_set_map(buttonm, my_map) 设置map。map的声明应如下所示:const char * map[] = {"button1", "button2", "button3", NULL}。注意,最后一个元素必须是NULL或空字符串("")!
在map中使用 "\n" 插入换行符。例如,{"button1", "button2", "\n", "button3", ""}。每行按钮的宽度将自动计算。因此,在示例中,第一行将有两个按钮,每个按钮占50%的宽度,第二行有一个按钮,占100%的宽度。

控制按钮

可以使用 lv_buttonmatrix_set_button_width(buttonm, button_id, width) 设置按钮相对于同一行中其他按钮的宽度。例如,在一行中有两个按钮:buttonA, width = 1buttonB, width = 2buttonA 将占33%的宽度,buttonB 将占66%的宽度。这类似于CSS中的"flex-grow"属性。宽度必须在[1…15]范围内,默认宽度为1。
除了宽度,每个按钮还可以通过以下参数进行自定义:

单选

可以通过 lv_buttonmatrix_set_one_checked(buttonm, true) 启用“单选”功能,以确保一次只允许一个按钮被选中。

事件

按键

  • LV_KEY_RIGHT/UP/LEFT/RIGHT 用于在按钮之间导航以选择一个按钮
  • LV_KEY_ENTER 用于按下/释放选定的按钮
    注意,长按按钮矩阵与编码器时可能意味着进入/离开编辑模式,并且简单长按按钮也会触发重复。为了避免这种矛盾,建议在使用编码器时为按钮矩阵添加 lv_buttonmatrix_set_button_ctrl_all(buttonm, LV_BUTTONMATRIX_CTRL_CLICK_TRIG | LV_BUTTONMATRIX_CTRL_NO_REPEAT)。这样可以禁用按钮按下的重复功能,并在离开编辑模式时不会激活选定的按钮。
    了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主按钮矩阵样式LV_PART_MAIN-
按钮样式LV_PART_ITEMS-
按钮文本设置按钮文本lv_buttonmatrix_set_map(buttonm, my_map)const char * map[] = {"button1", "button2", "button3", NULL}; lv_buttonmatrix_set_map(buttonm, map);
控制按钮设置按钮宽度lv_buttonmatrix_set_button_width(buttonm, button_id, width)lv_buttonmatrix_set_button_width(buttonm, 0, 2);
设置按钮控制属性lv_buttonmatrix_set_button_ctrl(buttonm, button_id, LV_BUTTONMATRIX_CTRL_...)lv_buttonmatrix_set_button_ctrl(buttonm, 0, LV_BUTTONMATRIX_CTRL_HIDDEN);
清除按钮控制属性lv_buttonmatrix_clear_button_ctrl(buttonm, button_id, LV_BUTTONMATRIX_CTRL_...)lv_buttonmatrix_clear_button_ctrl(buttonm, 0, LV_BUTTONMATRIX_CTRL_HIDDEN);
设置所有按钮控制属性lv_buttonmatrix_set_button_ctrl_all(buttonm, LV_BUTTONMATRIX_CTRL_...)lv_buttonmatrix_set_button_ctrl_all(buttonm, LV_BUTTONMATRIX_CTRL_CLICK_TRIG);
清除所有按钮控制属性lv_buttonmatrix_clear_button_ctrl_all(buttonm, LV_BUTTONMATRIX_CTRL_...)lv_buttonmatrix_clear_button_ctrl_all(buttonm, LV_BUTTONMATRIX_CTRL_CLICK_TRIG);
设置按钮控制地图lv_buttonmatrix_set_ctrl_map(buttonm, ctrl_map)lv_buttonmatrix_set_ctrl_map(buttonm, ctrl_map);
单选启用单选功能lv_buttonmatrix_set_one_checked(buttonm, true)lv_buttonmatrix_set_one_checked(buttonm, true);
事件值变化事件LV_EVENT_VALUE_CHANGED 当按钮被按下/释放或长按后重复时发送-
获取选中按钮lv_buttonmatrix_get_selected_button(buttonm)uint16_t btn_id = lv_buttonmatrix_get_selected_button(buttonm);
获取按钮文本lv_buttonmatrix_get_button_text(buttonm, button_id)const char * btn_text = lv_buttonmatrix_get_button_text(buttonm, 0);
按键导航和选择按钮LV_KEY_RIGHTLV_KEY_UPLV_KEY_LEFTLV_KEY_DOWN 导航 LV_KEY_ENTER 按下/释放选定按钮-

日历 Calendar (lv_calendar)

概述

日历对象是一个经典的日历,可以:

  • 以7x7矩阵显示任意月份的天数
  • 显示日期名称
  • 高亮当前日期(今天)
  • 高亮任何用户定义的日期
    如果设置了默认组,日历将被添加到默认组中。日历是一个可编辑对象,可以通过编码器导航选择和点击日期。
    为了使日历更灵活,默认情况下不显示当前年份或月份。相反,可以为日历附加可选的“标题”。

部件和样式

日历对象使用按钮矩阵对象来将日期排列成矩阵。

  • LV_PART_MAIN 日历的背景,使用所有与背景相关的样式属性。
  • LV_PART_ITEMS 指日期和日期名称。按钮矩阵控制标志用于区分按钮,并添加了自定义绘制事件来修改按钮的属性,如下:
    • 日期名称没有边框、没有背景,用灰色绘制
    • 上个月和下个月的日期具有 LV_BUTTONMATRIX_CTRL_DISABLED 标志
    • 今天的日期有一个较厚的边框,使用主题的主要颜色
    • 高亮日期具有一些不透明度,使用主题的主要颜色

使用方法

一些函数使用 lv_calendar_date_t 类型,这是一个包含 yearmonthday 字段的结构。

当前日期

要设置当前日期(今天),使用 lv_calendar_set_today_date(calendar, year, month, day) 函数。month 需要在1到12范围内,day 需要在1到31范围内。

显示日期

要设置显示的日期,使用 lv_calendar_set_shown_date(calendar, year, month)

高亮日期

高亮日期列表应存储在一个 lv_calendar_date_t 数组中,通过 lv_calendar_set_highlighted_dates(calendar, highlighted_dates, date_num) 加载。仅会保存数组的指针,因此数组应为静态或全局变量。

日期名称

日期名称可以通过 lv_calendar_set_day_names(calendar, day_names) 调整,其中 day_names 形如 const char * day_names[7] = {"Su", "Mo", ...};。仅保存日期名称的指针,因此这些元素应为静态、全局或常量变量。

自定义年份列表

通过 lv_calendar_header_dropdown_set_year_list(calendar, years_list) 设置自定义年份列表,其中 years_list 是指向自定义年份列表的指针。它可以是一个常量字符串,如 static const char * years = "2023\n2022\n2021\n2020\n2019";,也可以动态生成到缓冲区中。

中国日历

中国日历是一种传统文化工具,结合了农历、节气和传统节日等元素,在中国社会生活中被广泛使用,帮助人们了解农历日期、安排节日活动,并传承中华民族优秀传统文化。无论在家庭、企业还是教育中,中国日历都发挥着不可替代的作用,使人们更好地了解和欣赏中国传统文化的魅力。
如果您想使用中国日历,请使用 lv_calendar_set_chinese_mode(calendar, true) 启用它。

事件

按键

  • LV_KEY_RIGHT/UP/LEFT/RIGHT 用于在日期之间导航
  • LV_KEY_ENTER 用于按下/释放选定的日期
    了解更多关于的信息。

标题

从 v8.1 开始,标题直接添加到日历小部件中,标题的API已更改。

箭头按钮

lv_calendar_header_arrow_create(calendar) 创建一个包含左右箭头和中间当前年份和月份文本的标题。

下拉菜单

lv_calendar_header_dropdown_create(calendar) 创建一个包含两个下拉列表的标题:一个用于年份,另一个用于月份。

总结

功能分类功能描述使用方法示例代码
部件和样式主日历样式LV_PART_MAIN-
日期和日期名称样式LV_PART_ITEMS-
当前日期设置当前日期lv_calendar_set_today_date(calendar, year, month, day)lv_calendar_set_today_date(calendar, 2023, 6, 11);
显示日期设置显示的日期lv_calendar_set_shown_date(calendar, year, month)lv_calendar_set_shown_date(calendar, 2023, 6);
高亮日期设置高亮日期lv_calendar_set_highlighted_dates(calendar, highlighted_dates, date_num)static lv_calendar_date_t highlighted_dates[] = {{2023, 6, 11}, {2023, 6, 18}};
lv_calendar_set_highlighted_dates(calendar, highlighted_dates, 2);
日期名称设置日期名称lv_calendar_set_day_names(calendar, day_names)const char * day_names[7] = {"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"};
lv_calendar_set_day_names(calendar, day_names);
自定义年份列表设置自定义年份列表lv_calendar_header_dropdown_set_year_list(calendar, years_list)static const char * years = "2023\n2022\n2021\n2020\n2019";
lv_calendar_header_dropdown_set_year_list(calendar, years);
中国日历启用中国日历模式lv_calendar_set_chinese_mode(calendar, true)lv_calendar_set_chinese_mode(calendar, true);
事件值变化事件LV_EVENT_VALUE_CHANGED 当点击日期时发送-
获取按下的日期lv_calendar_get_pressed_date(calendar, &date)lv_calendar_date_t date;
if (lv_calendar_get_pressed_date(calendar, &date) == LV_RESULT_OK) { /* Use date */ }
导航和选择日期LV_KEY_RIGHTLV_KEY_UPLV_KEY_LEFTLV_KEY_DOWN 导航
LV_KEY_ENTER 按下/释放选定日期
-
标题创建箭头按钮标题lv_calendar_header_arrow_create(calendar)lv_calendar_header_arrow_create(calendar);
创建下拉菜单标题lv_calendar_header_dropdown_create(calendar)lv_calendar_header_dropdown_create(calendar);

图表 Chart (lv_chart)

概述

图表是一种基本对象,用于可视化数据点。目前支持折线图(用线连接点和/或在点上绘制点)和柱状图
图表可以具有:

  • 分割线
  • 双Y轴
  • 轴刻度和刻度文字
  • 光标
  • 滚动和缩放

部件和样式

  • LV_PART_MAIN 图表的背景。使用所有典型的背景和线条(用于分割线)相关样式属性。填充使系列区域变小。对于柱状图,pad_column 设置相邻索引的柱子之间的间距。
  • LV_PART_SCROLLBAR 如果图表被缩放,使用的滚动条。详情请参见基础对象的文档。
  • LV_PART_ITEMS 指折线图或柱状图系列。
    • 折线图:线条属性用于线条。widthheightbg_colorradius 用于设置点的外观。
    • 柱状图:典型的背景属性用于样式化柱子。pad_column 设置相同索引柱子之间的间距。
  • LV_PART_INDICATOR 指折线图和散点图上的点(小圆圈或方块)。
  • LV_PART_CURSOR 线条属性用于样式化光标。widthheightbg_colorradius 用于设置点的外观。

使用方法

图表类型

存在以下数据展示类型:

数据系列

可以通过 lv_chart_add_series(chart, color, axis) 添加任意数量的系列。这会分配一个 lv_chart_series_t 结构,该结构包含所选的color和一个数据点数组。axis 可以有以下值:

修改数据

有几种方法可以设置系列的数据:

  1. 手动在数组中设置值,例如 ser1->points[3] = 7 并使用 lv_chart_refresh(chart) 刷新图表。
  2. 使用 lv_chart_set_value_by_id(chart, ser, id, value) 其中id是要更新的点的索引。
  3. 使用 lv_chart_set_next_value(chart, ser, value)。
  4. 使用 lv_chart_set_all_value(chart, ser, value) 将所有点初始化为给定值。
    使用 LV_CHART_POINT_NONE 作为值可以使库跳过绘制该点、柱子或线段。
    对于 LV_CHART_TYPE_SCATTER 类型,可以使用 lv_chart_set_value_by_id2(chart, ser, id, value) 和 lv_chart_set_next_value2(chart, ser, x_value, y_value)。
更新模式

[lv_chart_set_next_value()](https://docs.lvgl.io/master/API/widgets/chart/lv_chart.html#_CPPv423lv_chart_set_next_valueP8lv_obj_tP17
lv_chart_series_t7int32_t) 可以根据更新模式以两种方式工作:

点的数量

系列中的点数可以通过 lv_chart_set_point_count(chart, point_num) 修改。默认值为10。注意:这也会影响分配给系列的外部缓冲区中的点数,因此需要确保外部数组足够大。

处理大量点

在折线图上,如果点数大于水平像素数,图表将仅绘制垂直线条,以有效绘制大量数据。例如,如果每像素有10个点,LVGL会搜索最小值和最大值,并在它们之间绘制垂直线,以确保不遗漏峰值。

垂直范围

可以使用 lv_chart_set_range(chart, axis, min, max) 指定Y方向的最小值和最大值。axis 可以是 LV_CHART_AXIS_PRIMARY(左轴)或 LV_CHART_AXIS_SECONDARY(右轴)。
点的值将按比例缩放。默认范围为:0到100。

分割线

水平和垂直分割线的数量可以通过 lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num) 修改。默认设置为3条水平分割线和5条垂直分割线。如果某一侧有可见边框且该侧没有填充,分割线会绘制在边框上,因此不会被绘制。

覆盖系列的默认起点

如果希望图从默认的系列point[0]之外的点开始绘制,可以使用 lv_chart_set_x_start_point(chart, ser, id) 函数设置另一个起始索引,其中id是新起始点的索引。
注意 LV_CHART_UPDATE_MODE_SHIFT 也会更改 start_point

刻度和标签

借助 Scale,可以非常灵活地添加垂直和水平刻度。请参阅以下示例了解更多信息。

缩放

要缩放图表,只需将其包装到一个父容器中,并设置图表的宽度或高度为更大的值。这样图表在其父容器中是可滚动的。

光标

可以使用 lv_chart_cursor_t * c1 = lv_chart_add_cursor(chart, color, dir); 添加光标。dir的可能值为 LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL 或它们的OR值,以指定光标应绘制的方向。
lv_chart_set_cursor_pos(chart, cursor, &point) 设置光标的位置。pos 是指向 lv_point_t 变量的指针。例如,lv_point_t point = {10, 20}。如果图表滚动,光标将保持在相同的位置。
lv_chart_get_point_pos_by_id(chart, series, id, &point_out) 获取给定点的坐标。这对于将光标放置在给定点非常有用。
lv_chart_set_cursor_point(chart, cursor, series, point_id) 将光标固定在一个点上。如果点的位置改变(新值或滚动),光标将随点移动。

事件

按键

此对象类型不处理任何
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主图表样式LV_PART_MAIN-
滚动条样式LV_PART_SCROLLBAR-
折线图或柱状图系列样式LV_PART_ITEMS-
折线图和散点图上的点样式LV_PART_INDICATOR-
光标样式LV_PART_CURSOR-
图表类型设置图表类型lv_chart_set_type(chart, LV_CHART_TYPE_...)lv_chart_set_type(chart, LV_CHART_TYPE_LINE);
数据系列添加数据系列lv_chart_add_series(chart, color, axis)lv_chart_add_series(chart, LV_COLOR_RED, LV_CHART_AXIS_PRIMARY_Y);
设置外部Y数组lv_chart_set_ext_y_array(chart, ser, value_array)lv_chart_set_ext_y_array(chart, ser, y_array);
获取系列的Y数组lv_chart_get_y_array(chart, ser)int32_t * y_array = lv_chart_get_y_array(chart, ser);
设置外部X数组(散点图)lv_chart_set_ext_x_array(chart, ser, value_array)lv_chart_set_ext_x_array(chart, ser, x_array);
获取系列的X数组(散点图)lv_chart_get_x_array(chart, ser)int32_t * x_array = lv_chart_get_x_array(chart, ser);
修改数据设置单个数据点lv_chart_set_value_by_id(chart, ser, id, value)lv_chart_set_value_by_id(chart, ser, 3, 7);
设置下一个数据点lv_chart_set_next_value(chart, ser, value)lv_chart_set_next_value(chart, ser, 15);
设置所有数据点lv_chart_set_all_value(chart, ser, value)lv_chart_set_all_value(chart, ser, 0);
设置单个数据点(散点图)lv_chart_set_value_by_id2(chart, ser, id, x_value, y_value)lv_chart_set_value_by_id2(chart, ser, 3, 10, 20);
设置下一个数据点(散点图)lv_chart_set_next_value2(chart, ser, x_value, y_value)lv_chart_set_next_value2(chart, ser, 10, 20);
更新模式设置更新模式lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_...)lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);
点的数量设置点的数量lv_chart_set_point_count(chart, point_num)lv_chart_set_point_count(chart, 20);
垂直范围设置Y轴范围lv_chart_set_range(chart, axis, min, max)lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
分割线设置分割线数量lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num)lv_chart_set_div_line_count(chart, 3, 5);
覆盖系列的默认起点设置系列的起始点lv_chart_set_x_start_point(chart, ser, id)lv_chart_set_x_start_point(chart, ser, 2);
缩放缩放图表将图表包装到一个父容器中,并设置图表的宽度或高度为更大的值-
光标添加光标lv_chart_add_cursor(chart, color, dir)lv_chart_cursor_t * c1 = lv_chart_add_cursor(chart, LV_COLOR_RED, LV_DIR_RIGHT);
设置光标位置lv_chart_set_cursor_pos(chart, cursor, &point)lv_point_t point = {10, 20}; lv_chart_set_cursor_pos(chart, c1, &point);
获取点的坐标lv_chart_get_point_pos_by_id(chart, series, id, &point_out)lv_point_t point_out; lv_chart_get_point_pos_by_id(chart, ser, 3, &point_out);
将光标固定在一个点上lv_chart_set_cursor_point(chart, cursor, series, point_id)lv_chart_set_cursor_point(chart, c1, ser, 3);
事件值变化事件LV_EVENT_VALUE_CHANGED 当按下新点时发送-
获取按下的点的索引lv_chart_get_pressed_point(chart)int32_t point_id = lv_chart_get_pressed_point(chart);

画布 Canvas (lv_canvas)

概述

画布继承自图像,用户可以在上面绘制任何内容。可以使用lvgl的绘图引擎绘制矩形、文本、图像、线条、弧线等。

部件和样式

  • LV_PART_MAIN 使用典型的矩形样式属性和图像样式属性。

使用方法

缓冲区

画布需要一个缓冲区来存储绘制的图像。要为画布分配缓冲区,请使用 lv_canvas_set_buffer(canvas, buffer, width, height, LV_COLOR_FORMAT_…)。其中,buffer 是一个静态缓冲区(不仅仅是一个局部变量),用于存储画布的图像。例如,对于一个100x50的ARGB8888缓冲区:static uint8_t buffer[100 * 50 * 4]
或者你可以使用 static uint8_t buffer[LV_CANVAS_BUF_SIZE(width, height, bit_per_pixel, stride_in_bytes)]
画布支持所有颜色格式,如 LV_COLOR_FORMAT_ARGB8888LV_COLOR_FORMAT_I2。完整列表请参见颜色格式部分。

索引颜色

对于 LV_COLOR_FORMAT_I1/2/4/8 颜色格式,需要使用 lv_canvas_set_palette(canvas, 3, lv_color_hex(0xff0000)) 初始化调色板。它将索引=3的像素设置为红色。

绘图

要在画布上设置像素的颜色,请使用 lv_canvas_set_px_color(canvas, x, y, color, opa)。对于 LV_COLOR_FORMAT_I1/2/4/8,需要将颜色的索引作为颜色传递,如 lv_color_from_int(13),它将索引13传递为颜色。
lv_canvas_fill_bg(canvas, lv_color_hex(0x00ff00), LV_OPA_50) 以50%的不透明度将整个画布填充为蓝色。注意,如果当前颜色格式不支持颜色(例如 LV_COLOR_FORMAT_A8),则颜色将被忽略。同样,如果不支持不透明度(例如 LV_COLOR_FORMAT_RGB565),也将被忽略。
可以使用 lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height) 将像素数组复制到画布上。缓冲区和画布的颜色格式需要匹配。
要在画布上绘制内容,直接使用LVGL的绘图函数。请参阅示例以了解更多细节。
绘图函数可以绘制到任何LVGL可以渲染的颜色格式。通常包括 LV_COLOR_FORMAT_RGB565LV_COLOR_FORMAT_RGB888LV_COLOR_FORMAT_XRGB888LV_COLOR_FORMAT_ARGB8888

事件

画布对象不会发送特殊事件。与其他对象类型一样,画布也会发送相同的事件。
请参见 lv_image.h 的事件部分。
了解更多关于事件的信息。

按键

此对象类型不处理任何
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主画布样式LV_PART_MAIN-
缓冲区设置画布缓冲区lv_canvas_set_buffer(canvas, buffer, width, height, LV_COLOR_FORMAT_...)static uint8_t buffer[100 * 50 * 4]; lv_canvas_set_buffer(canvas, buffer, 100, 50, LV_COLOR_FORMAT_ARGB8888); 或者 static uint8_t buffer[LV_CANVAS_BUF_SIZE(100, 50, 32, 0)]; lv_canvas_set_buffer(canvas, buffer, 100, 50, LV_COLOR_FORMAT_ARGB8888);
索引颜色设置调色板lv_canvas_set_palette(canvas, 3, lv_color_hex(0xff0000))lv_canvas_set_palette(canvas, 3, lv_color_hex(0xff0000));
绘图设置像素颜色lv_canvas_set_px_color(canvas, x, y, color, opa)lv_canvas_set_px_color(canvas, 10, 20, lv_color_hex(0xff0000), LV_OPA_50);
填充背景lv_canvas_fill_bg(canvas, lv_color_hex(0x00ff00), LV_OPA_50)lv_canvas_fill_bg(canvas, lv_color_hex(0x00ff00), LV_OPA_50);
复制缓冲区lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height)lv_canvas_copy_buf(canvas, buffer_to_copy, 0, 0, 100, 50);
事件处理事件画布对象不会发送特殊事件,参见 lv_image 的事件部分。-
按键处理键盘此对象类型不处理任何按键-

复选框 Checkbox (lv_checkbox)

概述

复选框对象由一个“勾选框”和一个标签组成。当点击复选框时,勾选框会切换状态。

部件和样式

  • LV_PART_MAIN 复选框的背景,使用文本和所有典型的背景样式属性。pad_column 调整勾选框和标签之间的间距。
  • LV_PART_INDICATOR 勾选框是一个方形,使用所有典型的背景样式属性。默认情况下,其大小等于主部分字体的高度。填充属性使勾选框在相应方向上变大。
    复选框会自动添加到默认组(如果已设置)。

使用方法

文本

可以使用 lv_checkbox_set_text(cb, “New text”) 函数修改文本,文本将被动态分配。
要设置静态文本,请使用 lv_checkbox_set_static_text(cb, txt)。这样,只有 txt 的指针会被存储。在复选框存在期间,不应释放该文本。

勾选、取消勾选、禁用

可以使用通用状态添加/清除函数手动勾选、取消勾选和禁用复选框:

lv_obj_add_state(cb, LV_STATE_CHECKED);   /* 使复选框勾选 */
lv_obj_remove_state(cb, LV_STATE_CHECKED); /* 使复选框取消勾选 */
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); /* 使复选框勾选并禁用 */

要获取复选框是否被勾选,请使用: lv_obj_has_state(cb, LV_STATE_CHECKED)。

事件

按键

复选框处理以下

  • LV_KEY_RIGHT/UP 如果启用切换,切换到勾选状态
  • LV_KEY_LEFT/DOWN 如果启用切换,切换到未勾选状态
  • LV_KEY_ENTER 点击复选框并切换状态
    注意,与往常一样,LV_KEY_ENTER 的状态会转换为 LV_EVENT_PRESSED/PRESSING/RELEASED 等。
    了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主复选框样式LV_PART_MAIN-
勾选框样式LV_PART_INDICATOR-
文本设置复选框文本lv_checkbox_set_text(cb, "New text")lv_checkbox_set_text(cb, "New text");
设置静态文本lv_checkbox_set_static_text(cb, txt)static const char * txt = "Static text"; lv_checkbox_set_static_text(cb, txt);
勾选、取消勾选、禁用勾选复选框lv_obj_add_state(cb, LV_STATE_CHECKED)lv_obj_add_state(cb, LV_STATE_CHECKED);
取消勾选复选框lv_obj_remove_state(cb, LV_STATE_CHECKED)lv_obj_remove_state(cb, LV_STATE_CHECKED);
禁用复选框lv_obj_add_state(cb, LV_STATE_DISABLED)lv_obj_add_state(cb, LV_STATE_DISABLED);
勾选并禁用复选框`lv_obj_add_state(cb, LV_STATE_CHECKEDLV_STATE_DISABLED)`
检查复选框是否被勾选lv_obj_has_state(cb, LV_STATE_CHECKED)if (lv_obj_has_state(cb, LV_STATE_CHECKED)) { /* Checked */ }
事件值变化事件LV_EVENT_VALUE_CHANGED 当复选框状态切换时发送-
按键切换到勾选状态LV_KEY_RIGHT/UP-
切换到未勾选状态LV_KEY_LEFT/DOWN-
切换复选框状态LV_KEY_ENTER-

下拉列表 Drop-down list (lv_dropdown)

概述

下拉列表允许用户从列表中选择一个值。
下拉列表默认是关闭的,显示一个单一值或预定义文本。当激活(点击下拉列表)时,会创建一个列表,用户可以从中选择一个选项。当用户选择一个新值时,列表将再次删除。
如果设置了默认组,下拉列表将被添加到默认组中。此外,下拉列表是一个可编辑对象,可以通过编码器导航选择选项。

部件和样式

下拉列表控件由元素“按钮”和“列表”构建(与按钮和列表控件无关)

按钮
列表
  • LV_PART_MAIN 列表本身。使用典型的背景属性。max_height 可用于限制列表的高度。
  • LV_PART_SCROLLBAR 滚动条的背景、边框、阴影属性和宽度(用于其自身的宽度)以及右侧填充间距。
  • LV_PART_SELECTED 指当前按下、选中或按下+选中的选项。也使用典型的背景属性。
    列表在打开/关闭时隐藏/显示。要向其添加样式,请使用 lv_dropdown_get_list(dropdown) 获取列表对象。例如:
lv_obj_t * list = lv_dropdown_get_list(dropdown); /* 获取列表 */
lv_obj_add_style(list, &my_style, selector);      /* 向列表添加样式 */

或者可以使用新样式扩展主题。

使用方法

设置选项

选项作为字符串传递给下拉列表,使用 lv_dropdown_set_options(dropdown, options)。选项应以 \n 分隔。例如:"First\nSecond\nThird"。该字符串将保存在下拉列表中,因此可以是局部变量。
lv_dropdown_add_option(dropdown, “New option”, pos) 函数在 pos 索引处插入一个新选项。
为了节省内存,选项也可以从静态(常量)字符串设置,使用 lv_dropdown_set_static_options(dropdown, options)。在这种情况下,选项字符串应在下拉列表存在期间保持有效,且不能使用 lv_dropdown_add_option()
可以使用 lv_dropdown_set_selected(dropdown, id) 手动选择一个选项,其中 id 是选项的索引。

获取选中的选项

要获取选中选项的索引,请使用 lv_dropdown_get_selected(dropdown)。
lv_dropdown_get_selected_str(dropdown, buf, buf_size) 将选中选项的名称复制到 buf

方向

列表可以在任意一侧创建。默认方向 LV_DIR_BOTTOM 可以通过 lv_dropdown_set_dir(dropdown, LV_DIR_LEFT) 函数修改。
如果列表在垂直方向上超出了屏幕,它将对齐到边缘。

符号

可以使用 lv_dropdown_set_symbol(dropdown, LV_SYMBOL_…) 为下拉列表添加一个符号(通常是一个箭头)。
如果下拉列表的方向为 LV_DIR_LEFT,符号将显示在左侧,否则显示在右侧。

显示选中项

主部分可以显示选中选项或静态文本。如果使用 lv_dropdown_set_text(dropdown, “Some text”) 设置静态文本,则无论选中哪个选项,都会显示该文本。如果文本为 NULL,则在按钮上显示选中选项。

手动打开/关闭

要手动打开或关闭下拉列表,可以使用 lv_dropdown_open/close(dropdown) 函数。

事件

除了通用事件外,下拉列表还发送以下特殊事件

按键

  • LV_KEY_RIGHT/DOWN 选择下一个选项。
  • LV_KEY_LEFT/UP 选择上一个选项。
  • LV_KEY_ENTER 应用选中的选项(发送 LV_EVENT_VALUE_CHANGED 事件并关闭下拉列表)。
    了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主按钮样式LV_PART_MAIN-
指示器样式LV_PART_INDICATOR-
列表样式LV_PART_MAIN (列表) LV_PART_SCROLLBAR(滚动条) LV_PART_SELECTED(选中项)-
设置选项设置选项lv_dropdown_set_options(dropdown, options)lv_dropdown_set_options(dropdown, "First\nSecond\nThird");
添加选项lv_dropdown_add_option(dropdown, "New option", pos)lv_dropdown_add_option(dropdown, "New option", 2);
设置静态选项lv_dropdown_set_static_options(dropdown, options)static const char * options = "Option1\nOption2\nOption3"; lv_dropdown_set_static_options(dropdown, options);
设置选中的选项lv_dropdown_set_selected(dropdown, id)lv_dropdown_set_selected(dropdown, 1);
获取选项获取选中的选项索引lv_dropdown_get_selected(dropdown)uint16_t selected = lv_dropdown_get_selected(dropdown);
获取选中的选项名称lv_dropdown_get_selected_str(dropdown, buf, buf_size)char buf[32]; lv_dropdown_get_selected_str(dropdown, buf, sizeof(buf));
方向设置列表方向lv_dropdown_set_dir(dropdown, LV_DIR_...)lv_dropdown_set_dir(dropdown, LV_DIR_LEFT);
符号设置符号lv_dropdown_set_symbol(dropdown, LV_SYMBOL_...)lv_dropdown_set_symbol(dropdown, LV_SYMBOL_DOWN);
显示选中项设置静态文本lv_dropdown_set_text(dropdown, "Some text")lv_dropdown_set_text(dropdown, "Some text");
手动控制手动打开下拉列表lv_dropdown_open(dropdown)lv_dropdown_open(dropdown);
手动关闭下拉列表lv_dropdown_close(dropdown)lv_dropdown_close(dropdown);
事件值变化事件LV_EVENT_VALUE_CHANGED 当选择了新选项或列表打开/关闭时发送-
取消事件LV_EVENT_CANCEL 当列表关闭时发送-
准备事件LV_EVENT_READY 当列表打开时发送-
选择下一个选项LV_KEY_RIGHT/DOWN-
选择上一个选项LV_KEY_LEFT/UP-
应用选中选项LV_KEY_ENTER-

图像 Image (lv_image)

概述

图像控件是用于显示从闪存(作为数组)或文件中的图像的基本对象。图像控件也可以显示符号(LV_SYMBOL_...)。
使用图像解码器接口也可以支持自定义图像格式。

部件和样式

  • LV_PART_MAIN 背景矩形,使用典型的背景样式属性和图像本身的图像样式属性。

使用方法

图像来源

为了提供最大的灵活性,图像的来源可以是:

  • 代码中的变量(一个包含像素的C数组)。
  • 外部存储的文件(例如在SD卡上)。
  • 含有符号的文本(Symbols)。
    要设置图像的来源,使用 lv_image_set_src(img, src)。
    要从PNG、JPG或BMP图像生成像素数组,使用在线图像转换工具并使用指针 lv_image_set_src(img1, &converted_img_var) 设置转换后的图像。要使变量在C文件中可见,需要使用 :cpp:macro:LV_IMAGE_DECLARE(converted_img_var) 声明它。
    要使用外部文件,也需要使用在线转换工具转换图像文件,但此时应选择二进制输出格式。还需要使用LVGL的文件系统模块并注册一个驱动程序以进行基本的文件操作。了解更多信息,请访问文件系统。要设置来自文件的图像来源,使用 lv_image_set_src(img, “S:folder1/my_img.bin”)。
    还可以像标签一样设置符号。在这种情况下,图像将根据样式中指定的字体呈现为文本。这使得可以使用轻量级的单色“字母”而不是实际图像。可以像 lv_image_set_src(img1, LV_SYMBOL_OK) 一样设置符号。
标签作为图像

图像和标签有时用于传达相同的信息。例如,描述按钮的功能。因此,图像和标签在某种程度上是可以互换的,即图像可以通过使用 LV_SYMBOL_DUMMY 作为文本的前缀来显示文本。例如,lv_image_set_src(img, LV_SYMBOL_DUMMY, “Some text”)。

透明度

内部(变量)和外部图像支持两种透明度处理方法:

  • Alpha字节:每个像素添加一个包含像素不透明度的alpha字节。
调色板和Alpha索引

除了真彩色(RGB)颜色格式,还支持以下格式:

  • 索引:图像有一个调色板。
  • Alpha索引:仅存储alpha值。
    这些选项可以在图像转换器中选择。要了解更多关于颜色格式的信息,请阅读图像部分。
重着色

可以使用给定的强度将颜色与图像的每个像素混合。这对于显示图像的不同状态(选中、非活动、按下等)而不需要存储同一图像的多个版本非常有用。可以通过在样式中将 img_recolor_opa 设置为 LV_OPA_TRANSP(无重着色,值:0)和 LV_OPA_COVER(全重着色,值:255)之间的值来启用此功能。默认值是 LV_OPA_TRANSP,因此此功能被禁用。
混合的颜色通过 img_recolor 设置。

偏移

使用 lv_image_set_offset_x(img, x_ofs) 和 lv_image_set_offset_y(img, y_ofs),可以为显示的图像添加一些偏移量。如果对象大小小于图像来源大小,这很有用。使用偏移参数可以通过动画 x或y偏移创建纹理图集或“运行图像”效果。

变换

使用 lv_image_set_scale(img, factor) 可以缩放图像。设置 factor256LV_SCALE_NONE 以禁用缩放。较大的值会放大图像(例如 512 为双倍大小),较小的值会缩小图像(例如 128 为一半大小)。分数缩放也有效。例如 281 表示放大10%。
lv_image_set_scale_x(img, factor) 和 lv_image_set_scale_y(img, factor) 也可以用于水平和垂直独立缩放(非均匀缩放)。
要旋转图像,使用 lv_image_set_rotation(img, angle)。角度有0.1度的精度,因此对于45.8°设置458。
默认情况下,旋转的枢轴点是图像的中心。可以使用 lv_image_set_pivot(img, pivot_x, pivot_y) 进行更改。0;0 是左上角。
可以使用 lv_image_set_antialias(img, true) 调整变换的质量。启用抗锯齿时,变换的质量更高但速度更慢。
变换需要整个图像可用。因此,索引图像(LV_COLOR_FORMAT_I1/2/4/8_...)、仅alpha图像不能被变换。换句话说,变换仅适用于存储为C数组的正常(A)RGB或A8图像,或者如果自定义图像解码器返回整个图像。
请注意,图像对象的实际坐标在变换期间不会改变。即lv_obj_get_width / height / x / y() 将返回原始的非缩放坐标。
重要 图像的变换独立于来自样式的变
换属性(请参阅这里)。主要区别在于纯图像控件变换

  • 不会变换图像控件的子控件
  • 图像直接变换而不创建中间层(缓冲区)来快照控件
内部对齐

默认情况下,图像控件的宽度和高度为LV_SIZE_CONTENT。这意味着控件将根据图像来源自动调整大小。
如果控件的宽度或高度设置为较大的值,inner_align 属性指示如何在控件内对齐图像来源。
对齐方式可以设置为以下任何一种:

事件

图像对象不会发送特殊事件。
也请参见基础对象的事件。
了解更多关于事件的信息。

按键

此对象类型不处理任何
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主图像样式LV_PART_MAIN-
图像来源设置图像来源lv_image_set_src(img, src)lv_image_set_src(img, &converted_img_var); lv_image_set_src(img, "S:folder1/my_img.bin"); lv_image_set_src(img, LV_SYMBOL_OK);
标签作为图像使用符号显示文本lv_image_set_src(img, LV_SYMBOL_DUMMY "Some text")lv_image_set_src(img, LV_SYMBOL_DUMMY "Some text");
透明度设置透明度处理方法使用图像转换器选择支持Alpha字节的颜色格式-
调色板和Alpha索引设置调色板和Alpha索引使用图像转换器选择索引颜色格式或Alpha索引颜色格式-
重着色设置重着色颜色在样式中设置 img_recolorimg_recolor_opalv_obj_set_style_img_recolor(img, lv_color_hex(0xff0000), 0); lv_obj_set_style_img_recolor_opa(img, LV_OPA_50, 0);
偏移设置图像偏移量lv_image_set_offset_x(img, x_ofs) lv_image_set_offset_y(img, y_ofs)lv_image_set_offset_x(img, 10); lv_image_set_offset_y(img, 20);
变换设置图像缩放lv_image_set_scale(img, factor)lv_image_set_scale(img, 256);
设置水平缩放lv_image_set_scale_x(img, factor)lv_image_set_scale_x(img, 128);
设置垂直缩放lv_image_set_scale_y(img, factor)lv_image_set_scale_y(img, 512);
设置图像旋转lv_image_set_rotation(img, angle)lv_image_set_rotation(img, 458);
设置旋转枢轴点lv_image_set_pivot(img, pivot_x, pivot_y)lv_image_set_pivot(img, 0, 0);
设置抗锯齿lv_image_set_antialias(img, true)lv_image_set_antialias(img, true);
内部对齐设置图像内部对齐方式lv_image_set_inner_align(img, align)lv_image_set_inner_align(img, LV_IMAGE_ALIGN_CENTER);
事件处理事件图像对象不会发送特殊事件,参见基础对象事件-
按键处理键盘此对象类型不处理任何键-

图像按钮 Image button (lv_imagebutton)

概述

图像按钮与简单的“按钮”对象非常相似。唯一的区别是它在每种状态下显示用户定义的图像,而不是绘制矩形。
您可以设置左、中和右图像,中间图像将被重复以匹配对象的宽度。

部件和样式

  • LV_PART_MAIN 指图像。如果使用背景样式属性,将在图像按钮后面绘制一个矩形。

使用方法

图像来源

要在某个状态下设置图像,请使用 lv_imagebutton_set_src(imagebutton, LV_IMAGEBUTTON_STATE_…, src_left, src_center, src_right)。
图像来源的工作原理与图像对象中描述的相同,只是图像按钮不支持“符号”。任何来源都可以为NULL
如果仅指定 src_center,控件的宽度将自动设置为图像的宽度。但是,如果设置了所有三个来源,则需要用户设置宽度(例如使用 lv_obj_set_width),并且中间图像将被平铺以填充给定大小。
可能的状态包括:

状态

要手动设置状态,应使用 lv_imagebutton_set_state(imagebutton, LV_IMAGEBUTTON_STATE_…) 函数,而不是常规的 lv_obj_add_state()lv_obj_remove_state() 函数。

事件

按键

总结

功能分类功能描述使用方法示例代码
部件和样式主图像按钮样式LV_PART_MAIN-
图像来源设置图像来源lv_imagebutton_set_src(imagebutton, LV_IMAGEBUTTON_STATE_..., src_left, src_center, src_right)lv_imagebutton_set_src(imagebutton, LV_IMAGEBUTTON_STATE_RELEASED, src_left, src_center, src_right);
仅设置中间图像设置 src_center,控件的宽度自动设置为图像的宽度lv_imagebutton_set_src(imagebutton, LV_IMAGEBUTTON_STATE_RELEASED, NULL, src_center, NULL);
设置左、中、右图像用户需要设置控件的宽度,中间图像将被平铺以填充给定大小lv_obj_set_width(imagebutton, 200); lv_imagebutton_set_src(imagebutton, LV_IMAGEBUTTON_STATE_RELEASED, src_left, src_center, src_right);
状态设置图像按钮状态lv_imagebutton_set_state(imagebutton, LV_IMAGEBUTTON_STATE_...)lv_imagebutton_set_state(imagebutton, LV_IMAGEBUTTON_STATE_PRESSED);
事件值变化事件LV_EVENT_VALUE_CHANGED 当按钮切换时发送-
切换到切换状态LV_KEY_RIGHT/UP-
切换到非切换状态LV_KEY_LEFT/DOWN-
点击按钮LV_KEY_ENTER-
可能的状态
状态描述
LV_IMAGEBUTTON_STATE_RELEASED按钮未按下时显示的图像
LV_IMAGEBUTTON_STATE_PRESSED按钮按下时显示的图像
LV_IMAGEBUTTON_STATE_DISABLED按钮禁用时显示的图像
LV_IMAGEBUTTON_STATE_CHECKED_RELEASED按钮在被选中且未按下时显示的图像
LV_IMAGEBUTTON_STATE_CHECKED_PRESSED按钮在被选中且按下时显示的图像
LV_IMAGEBUTTON_STATE_CHECKED_DISABLED按钮在被选中且禁用时显示的图像

键盘 Keyboard (lv_keyboard)

概述

键盘对象是一个特殊的按钮矩阵,具有预定义的按键映射和其他功能,用于实现虚拟键盘,以便在文本区域中编写文本。

部件和样式

与按钮矩阵类似,键盘由两个部分组成:

  • LV_PART_MAIN 主部分。使用所有典型的背景属性。
  • LV_PART_ITEMS 按钮。也使用所有典型的背景属性和文本属性。

使用方法

模式

键盘有以下模式:

分配文本区域

可以将一个文本区域分配给键盘,以便自动将点击的字符放入其中。要分配文本区域,请使用 lv_keyboard_set_textarea(kb, ta)。

按键弹出提示

要启用按键弹出提示(类似于常见的Android和iOS键盘),请使用 lv_keyboard_set_popovers(kb, true)。默认控制映射已预配置为仅在产生符号的键上显示弹出提示,而不是例如空格键。如果使用自定义键映射,请为所有希望显示弹出提示的键设置LV_BUTTONMATRIX_CTRL_POPOVER标志。
注意,顶部行的按键弹出提示将绘制在控件边界之外。为了解决这个问题,请在键盘顶部预留额外的空闲空间,或者确保键盘是在其上边界相邻的任何控件之后添加的,以便弹出提示可以绘制在这些控件上。
弹出提示目前只是一个视觉效果,尚不允许选择其他字符(如重音符)。

新键映射

可以使用 lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_…, kb_map, kb_ctrl) 为键盘指定一个新映射(布局)。有关创建新映射和控制的更多信息,请参见按钮矩阵
请记住,使用以下关键字将具有与原始映射相同的效果:

事件

  • LV_EVENT_VALUE_CHANGED 当按钮按下/释放或长按后重复时发送。事件数据设置为按下/释放按钮的ID。
  • LV_EVENT_READY: 点击“确定”按钮。
  • LV_EVENT_CANCEL: 点击“关闭”按钮。
    键盘有一个默认事件处理程序回调,称为 lv_keyboard_def_event_cb(),用于处理按钮按下、地图更改、分配的文本区域等。如果需要,可以删除它并替换为自定义事件处理程序。
  • 注意:
    在8.0及更高版本中,向键盘添加事件处理程序不会删除默认事件处理程序。此行为与v7不同,在v7中,添加事件处理程序将始终替换前一个。
    了解更多关于事件的信息。

按键

  • LV_KEY_RIGHT/UP/LEFT/RIGHT 在按钮之间导航并选择一个。
  • LV_KEY_ENTER 按下/释放选定的按钮。
    了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主键盘样式LV_PART_MAIN-
按钮样式LV_PART_ITEMS-
模式设置键盘模式lv_keyboard_set_mode(kb, mode)lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_TEXT_UPPER);
分配文本区域设置文本区域lv_keyboard_set_textarea(kb, ta)lv_keyboard_set_textarea(kb, ta);
按键弹出提示启用按键弹出提示lv_keyboard_set_popovers(kb, true)lv_keyboard_set_popovers(kb, true);
新键映射设置新键映射lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_..., kb_map, kb_ctrl)参见文档了解详细使用方法
事件值变化事件LV_EVENT_VALUE_CHANGED 当按钮按下/释放或长按后重复时发送-
准备事件LV_EVENT_READY 点击“确定”按钮时发送-
取消事件LV_EVENT_CANCEL 点击“关闭”按钮时发送-
按键在按钮之间导航并选择一个LV_KEY_RIGHT/UP/LEFT/RIGHT-
按下/释放选定的按钮LV_KEY_ENTER-
可能的模式
模式描述
LV_KEYBOARD_MODE_TEXT_LOWER显示小写字母
LV_KEYBOARD_MODE_TEXT_UPPER显示大写字母
LV_KEYBOARD_MODE_SPECIAL显示特殊字符
LV_KEYBOARD_MODE_NUMBER显示数字、+/-符号和小数点
LV_KEYBOARD_MODE_USER_1LV_KEYBOARD_MODE_USER_4用户定义模式

标签 Label (lv_label)

概述

标签是用于显示文本的基本对象类型。

部件和样式

  • LV_PART_MAIN 使用所有典型的背景属性和文本属性。可以使用填充值在文本和背景之间添加空间。
  • LV_PART_SCROLLBAR 当文本大于控件大小时显示的滚动条。
  • LV_PART_SELECTED 表示选中文本的样式。仅 text_colorbg_color 样式属性可用。

使用方法

设置文本

可以在运行时使用 lv_label_set_text(label, “New text”) 设置标签上的文本。这将动态分配一个缓冲区,并将提供的字符串复制到该缓冲区中。因此,您不需要在 lv_label_set_text() 函数返回后保持传递的文本。
使用 lv_label_set_text_fmt(label, “Value: %d”, 15) 可以使用 printf 格式设置文本。
标签可以显示来自静态字符缓冲区的文本。为此,使用 lv_label_set_text_static(label, “Text”)。在这种情况下,文本不会存储在动态内存中,而是直接使用给定的缓冲区。这意味着数组不能是函数退出时超出作用域的局部变量。常量字符串可以安全地与 lv_label_set_text_static() 一起使用(除了与 LV_LABEL_LONG_DOT 一起使用,因为它会就地修改缓冲区),因为它们存储在始终可访问的ROM内存中。

换行

标签对象会自动处理换行符。您可以使用 \n 进行换行。例如:"line1\nline2\n\nline4"

长文本模式

默认情况下,标签的宽度和高度设置为 LV_SIZE_CONTENT。因此,标签的大小会自动扩展到文本大小。否则,如果宽度或高度明确设置(例如使用 lv_obj_set_width() 或布局),超过标签宽度的行可以根据几种长文本模式策略进行处理。同样,如果文本高度大于标签高度,也可以应用这些策略。

文本选择

如果启用 LV_LABEL_TEXT_SELECTION,则可以选择部分文本。这类似于在PC上使用鼠标选择文本。整个机制(点击并拖动手指/鼠标选择文本)在文本区域中实现,标签控件仅允许使用 lv_label_get_text_selection_start(label, start_char_index) 和 lv_label_get_text_selection_start(label, end_char_index) 手动选择文本。

文本对齐

要水平对齐标签的文本行,可以使用 lv_obj_set_style_text_align()lv_style_set_text_align() 的 text_align 样式属性。请注意,只有在以下情况下才会产生明显效果:

  • 标签控件的宽度大于文本中最长行的宽度
  • 文本有多行且行长不等
非常长的文本

LVGL 可以通过保存一些额外数据(约12字节)来高效处理非常长(例如 > 40k字符)的标签,从而加快绘图速度。要启用此功能,请在 lv_conf.h 中设置 LV_LABEL_LONG_TXT_HINT 1

自定义滚动动画

在长模式 LV_LABEL_LONG_SCROLL 和 [LV_LABEL_LONG_SCROLL_CIRCULAR](https://docs.lvgl.io/master/API/widgets/label/lv_label.html#_CPPv4N21_lv_label_long_mode_t29LV
_LABEL_LONG_SCROLL_CIRCULARE) 中,可以通过设置样式的动画属性来自定义滚动动画,使用 lv_style_set_anim()。它将被视为一个模板,用于创建滚动动画。

符号

标签可以显示符号与字母一起(或单独显示)。阅读字体部分以了解有关符号的更多信息。

事件

标签控件不会发送特殊事件。
也请参见基础对象的事件。
了解更多关于事件的信息。

按键

此对象类型不处理任何
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
滚动条样式LV_PART_SCROLLBAR-
选中样式LV_PART_SELECTED-
设置文本设置文本lv_label_set_text(label, "New text")lv_label_set_text(label, "Hello World!");
设置格式化文本lv_label_set_text_fmt(label, "Value: %d", 15)lv_label_set_text_fmt(label, "Value: %d", 15);
设置静态文本lv_label_set_text_static(label, "Text")lv_label_set_text_static(label, "Static Text");
换行自动换行使用 \nlv_label_set_text(label, "line1\nline2\n\nline4");
长文本模式换行处理lv_label_set_long_mode(label, LV_LABEL_LONG_WRAP)lv_label_set_long_mode(label, LV_LABEL_LONG_WRAP);
末尾省略号lv_label_set_long_mode(label, LV_LABEL_LONG_DOT)lv_label_set_long_mode(label, LV_LABEL_LONG_DOT);
滚动文本lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL)lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL);
循环滚动文本lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR)lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR);
剪裁文本lv_label_set_long_mode(label, LV_LABEL_LONG_CLIP)lv_label_set_long_mode(label, LV_LABEL_LONG_CLIP);
文本选择启用文本选择lv_label_text_selection (配置项)-
获取选中文本起始索引lv_label_get_text_selection_start(label, start_char_index)-
获取选中文本结束索引lv_label_get_text_selection_end(label, end_char_index)-
文本对齐水平对齐lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN)lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);
非常长的文本启用高效处理非常长文本LV_LABEL_LONG_TXT_HINT (配置项)-
自定义滚动动画设置滚动动画lv_style_set_anim(label, &anim)-
符号显示符号参见字体文档-
事件值变化事件LV_EVENT_VALUE_CHANGED 当按钮按下/释放或长按后重复时发送-
其他基础事件参见基础对象的事件-
按键不处理任何键事件--

LED (lv_led)

概述

LED 是一种矩形(或圆形)对象,其亮度可以调节。随着亮度降低,LED 的颜色变得更暗。

部件和样式

  • LV_LED_PART_MAIN 使用所有典型的背景样式属性。

使用方法

颜色

可以使用 lv_led_set_color(led, lv_color_hex(0xff0080)) 设置 LED 的颜色。这将用作背景颜色、边框颜色和阴影颜色。

亮度

可以使用 lv_led_set_bright(led, bright) 设置 LED 的亮度。亮度应在 0(最暗)到 255(最亮)之间。

开关

使用 lv_led_on(led) 和 lv_led_off(led) 将亮度设置为预定义的打开或关闭值。lv_led_toggle(led) 在打开和关闭状态之间切换。

事件

请参见基础对象的事件。
了解更多关于事件的信息。

按键

此对象类型不处理任何
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_LED_PART_MAIN-
颜色设置LED颜色lv_led_set_color(led, lv_color_hex(0xff0080))lv_led_set_color(led, lv_color_hex(0xff0080));
亮度设置LED亮度lv_led_set_bright(led, bright)lv_led_set_bright(led, 200);
开关打开LEDlv_led_on(led)lv_led_on(led);
关闭LEDlv_led_off(led)lv_led_off(led);
切换LED状态lv_led_toggle(led)lv_led_toggle(led);
事件基础对象事件参考基础对象的事件-
按键不处理键事件--

线条 Line (lv_line)

概述

线条对象能够在一组点之间绘制直线。

部件和样式

  • LV_PART_MAIN 使用所有典型的背景属性和线条样式属性。

使用方法

设置点

点需要存储在 lv_point_precise_t 数组中,并通过 lv_line_set_points(line, point_array, point_cnt) 函数传递给对象。
它们的坐标可以指定为原始像素坐标(例如 {5, 10}),或者使用 lv_pct(x) 指定为线条边界框的百分比。在后一种情况下,可能需要显式设置线条的宽度/高度,因为百分比值不会自动扩展边界框。

自动调整大小

默认情况下,线条的宽度和高度设置为 LV_SIZE_CONTENT。这意味着它会自动调整大小以适应所有点。如果显式设置大小,则线条上的部分可能不可见。

反转 y 轴

默认情况下,y == 0 点在对象的顶部。在某些情况下,这可能不符合直觉,因此可以使用 lv_line_set_y_invert(line, true) 反转 y 坐标。在这种情况下,y == 0 将是对象的底部。y 反转 默认情况下禁用。

事件

该对象类型仅发送通用事件
也请参见基础对象的事件。
了解更多关于事件的信息。

按键

此对象类型不处理任何
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
设置点设置线条的点lv_line_set_points(line, point_array, point_cnt)lv_point_precise_t points[] = { {5, 10}, {15, 20}, {25, 30} }; lv_line_set_points(line, points, 3);
自动调整大小自动调整线条大小设置宽度和高度为 LV_SIZE_CONTENT-
反转 y 轴反转 y 坐标lv_line_set_y_invert(line, true)lv_line_set_y_invert(line, true);
事件通用事件参考基础对象的事件-
按键不处理键事件--

列表 List (lv_list)

概述

列表基本上是一个带有垂直布局的矩形,可以向其中添加按钮和文本。

部件和样式

背景

使用方法

按钮

lv_list_add_button(list, icon, text) 添加一个全宽按钮,带有图标

  • 图标可以是图像或符号
  • 和文本。
    如果文本过长,将开始水平滚动。
文本

lv_list_add_text(list, text) 添加一个文本。

事件

列表控件不发送特殊事件,但按钮会像往常一样发送事件。
了解更多关于事件的信息。

按键

此对象类型不处理任何
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
滚动条样式LV_PART_SCROLLBAR-
按钮添加按钮lv_list_add_button(list, icon, text)lv_list_add_button(list, LV_SYMBOL_OK, "OK");
文本添加文本lv_list_add_text(list, text)lv_list_add_text(list, "Text");
事件按钮事件按钮发送的事件,参考按钮和标签的文档-
不处理键事件--

Lottie (lv_lottie)

概述

Lottie 控件能够解析、栅格化和播放 Lottie 动画
Lottie 动画是基于矢量的动画,可以看作是现代的 SVG 和 GIF 的结合体。
这些动画可以从各种来源下载,例如 https://lottiefiles.com/,或者您可以使用 Adobe After Effects 等工具创建自己的动画。
Lottie 控件基于 lv_canvas.h,因为为了渲染动画,用户需要提供一个缓冲区来存储当前帧。

部件和样式

  • LV_PART_MAIN Lottie 动画的背景。适用典型的背景样式属性,但通常保持透明。

使用方法

依赖项

Lottie 控件使用 ThorVG 库,该库集成到 LVGL 中。要使用 Lottie 动画,需要启用 LV_USE_THORVG_INTERNAL(使用内置的 ThorVG)或 LV_USE_THORVG_EXTERNAL(外部链接)。对于矢量图形,一般还需要启用 LV_USE_VECTOR_GRAPHIC
由于 ThorVG 是用 C++ 编写的,当使用 LV_USE_THORVG_INTERNAL 时,请确保可以编译 cpp 文件。

设置缓冲区

为了渲染动画,需要为 Lottie 控件分配一个缓冲区。动画以 ARGB8888 格式渲染,因此缓冲区的大小应等于 目标宽度 x 目标高度 x 4 字节。
为了保持缓冲区大小与动画大小一致,控件的大小(即动画的大小)会内部设置为缓冲区的尺寸。
缓冲区可以通过以下方法设置:void lv_lottie_set_buffer(lottie, w, h, buf);lv_lottie_set_draw_buf(lottie, draw_buf)
当使用绘图缓冲区时,必须由用户使用 LV_COLOR_FORMAT_ARGB8888 颜色格式初始化。

设置源

lv_example_lottie_approve.c 包含一个示例动画。为了避免 JSON 文件中的 " 字符转义,以及一些编译器不支持非常长的字符串,将 JSON 字符串存储为十六进制数组。
可以使用 lvgl/scripts/filetohex.py 将 Lottie 文件转换为十六进制数组。例如:

./filetohex.py path/to/lottie.json > out.txt

要从数据创建动画,使用 lv_lottie_set_src_data(lottie, data, sizeof(data))
可以使用 lv_lottie_set_src_file(lottie, "path/to/file.json") 从 JSON 文件打开 Lottie 动画。注意 Lottie 加载器不支持 LVGL 的文件系统接口,而是应该使用不带驱动器字母的“正常路径”。

获取动画

lv_anim_t * a = lv_lottie_get_anim(lottie) 返回控制 Lottie 动画的 LVGL 动画。默认情况下,它以 60FPS 无限循环运行,但可以自由调整 LVGL 动画。

事件

Lottie 控件不发送特殊事件。
了解更多关于事件的信息。

按键

Lottie 控件不处理任何键。
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
依赖项启用 ThorVGLV_USE_THORVG_INTERNALLV_USE_THORVG_EXTERNAL-
启用矢量图形LV_USE_VECTOR_GRAPHIC-
设置缓冲区设置渲染缓冲区lv_lottie_set_buffer(lottie, w, h, buf)lv_lottie_set_draw_buf(lottie, draw_buf)lv_lottie_set_buffer(lottie, 100, 100, buffer);
设置源设置源数据lv_lottie_set_src_data(lottie, data, sizeof(data))lv_lottie_set_src_data(lottie, lottie_data, sizeof(lottie_data));
从文件设置源lv_lottie_set_src_file(lottie, "path/to/file.json")lv_lottie_set_src_file(lottie, "animations/approve.json");
获取动画获取动画对象lv_lottie_get_anim(lottie)lv_anim_t * a = lv_lottie_get_anim(lottie);
事件发送通用事件参考基础对象的事件-
不处理键事件--

菜单 Menu (lv_menu)

概述

菜单控件可以用来轻松创建多级菜单。它能够自动处理页面之间的切换。

部件和样式

菜单控件由以下对象构成:

  • 主容器: lv_menu_main_cont
  • 主标题栏: lv_menu_main_header_cont
  • 返回按钮: lv_button.h
  • 返回按钮图标: lv_image.h
  • 主页面: lv_menu_page
  • 侧边栏容器: lv_menu_sidebar_cont
  • 侧边栏标题: lv_menu_sidebar_header_cont
  • 返回按钮: lv_button.h
  • 返回按钮图标: lv_image.h
  • 侧边栏页面: lv_menu_page

使用方法

创建菜单

lv_menu_create(parent) 用于创建一个新的空菜单。

标题栏模式

存在以下标题栏模式:

根返回按钮模式

存在以下根返回按钮模式:

  • LV_MENU_ROOT_BACK_BTN_DISABLED
  • LV_MENU_ROOT_BACK_BTN_ENABLED
    可以使用 lv_menu_set_mode_root_back_button(menu, LV_MENU_ROOT_BACK_BTN…) 设置根返回按钮模式。
创建菜单页面

lv_menu_page_create(menu, title) 用于创建一个新的空菜单页面。可以向页面添加任何控件。

在主区域设置菜单页面

创建菜单页面后,可以使用 lv_menu_set_page(menu, page) 将其设置到主区域。传递 NULL 以清除主区域并清除菜单历史记录。

在侧边栏设置菜单页面

创建菜单页面后,可以使用 lv_menu_set_sidebar_page(menu, page) 将其设置到侧边栏。传递 NULL 以清除侧边栏。

菜单页面之间的链接

例如,在主页面中创建一个按钮对象,当点击该按钮对象时,可以使用 lv_menu_set_load_page_event(menu, obj, new page) 打开新页面。

创建菜单容器、部分、分隔符

可以创建以下对象以便更轻松地设置菜单样式:

事件

按键

菜单控件不处理任何键。
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主容器lv_menu_main_cont-
主标题栏lv_menu_main_header_cont-
返回按钮参考 lv_button.h-
返回按钮图标参考 lv_image.h-
主页面lv_menu_page-
侧边栏容器lv_menu_sidebar_cont-
侧边栏标题lv_menu_sidebar_header_cont-
返回按钮参考 lv_button.h-
返回按钮图标参考 lv_image.h-
侧边栏页面lv_menu_page-
创建菜单创建新的空菜单lv_menu_create(parent)lv_obj_t * menu = lv_menu_create(parent);
标题栏模式设置标题栏模式lv_menu_set_mode_header(menu, LV_MENU_HEADER...)lv_menu_set_mode_header(menu, LV_MENU_HEADER_TOP_FIXED);
根返回按钮模式设置根返回按钮模式lv_menu_set_mode_root_back_button(menu, LV_MENU_ROOT_BACK_BTN...)lv_menu_set_mode_root_back_button(menu, LV_MENU_ROOT_BACK_BTN_ENABLED);
创建菜单页面创建新的菜单页面lv_menu_page_create(menu, title)lv_obj_t * page = lv_menu_page_create(menu, "Title");
设置菜单页面设置主区域菜单页面lv_menu_set_page(menu, page)lv_menu_set_page(menu, page);
设置侧边栏菜单页面lv_menu_set_sidebar_page(menu, page)lv_menu_set_sidebar_page(menu, page);
链接菜单页面页面之间的链接lv_menu_set_load_page_event(menu, obj, new_page)lv_menu_set_load_page_event(menu, button, new_page);
创建菜单组件创建菜单容器lv_menu_cont_create(parent_page)lv_obj_t * cont = lv_menu_cont_create(page);
创建菜单部分lv_menu_section_create(parent_page)lv_obj_t * section = lv_menu_section_create(page);
创建分隔符lv_menu_separator_create(parent_page)lv_obj_t * sep = lv_menu_separator_create(page);
事件页面显示事件LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(menu, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
点击返回按钮事件LV_EVENT_CLICKEDlv_obj_add_event_cb(menu, event_cb, LV_EVENT_CLICKED, NULL);
按键不处理键事件--

消息框 Message box (lv_msgbox)

概述

消息框充当弹出窗口。它们由背景容器、标题、可选的关闭按钮、文本和可选的按钮组成。
文本会自动换行,高度会自动设置以包含文本和按钮。
消息框可以是模态的(阻止点击屏幕的其他部分)或非模态的。

部件和样式

消息框由其他控件构建而成,因此你可以查看这些控件的文档以了解详情。

用法

创建消息框

lv_msgbox_create(parent, title, txt, btn_txts[], add_close_btn) 用于创建消息框。
如果 parentNULL,消息框将是模态的。titletxt 是标题和文本的字符串。btn_txts[] 是一个包含按钮文本的数组。
例如:const char * btn_txts[] = {"Ok", "Cancel", NULL}add_close_btn 可以是 truefalse,用于添加或不添加关闭按钮。

获取部件

可以使用以下函数获取消息框的构建块:

lv_obj_t * lv_msgbox_get_title(lv_obj_t * mbox);
lv_obj_t * lv_msgbox_get_close_btn(lv_obj_t * mbox);
lv_obj_t * lv_msgbox_get_text(lv_obj_t * mbox);
lv_obj_t * lv_msgbox_get_btns(lv_obj_t * mbox);
关闭消息框

lv_msgbox_close(msgbox) 用于关闭(删除)消息框。

事件

按键

键对关闭按钮和按钮矩阵有效。如果需要,可以手动将它们添加到组中。
了解更多关于的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式背景参考 lv_obj.h-
关闭按钮参考 lv_button.h-
标题和文本参考 lv_label.h-
按钮参考 lv_buttonmatrix.h-
创建消息框创建新的消息框lv_msgbox_create(parent, title, txt, btn_txts[], add_close_btn)const char *btn_txts[] = {"Ok", "Cancel", NULL}; lv_obj_t *msgbox = lv_msgbox_create(NULL, "Title", "Text", btn_txts, true);
获取部件获取消息框标题lv_msgbox_get_title(mbox)lv_obj_t *title = lv_msgbox_get_title(msgbox);
获取关闭按钮lv_msgbox_get_close_btn(mbox)lv_obj_t *close_btn = lv_msgbox_get_close_btn(msgbox);
获取文本lv_msgbox_get_text(mbox)lv_obj_t *text = lv_msgbox_get_text(msgbox);
获取按钮矩阵lv_msgbox_get_btns(mbox)lv_obj_t *btns = lv_msgbox_get_btns(msgbox);
关闭消息框关闭消息框lv_msgbox_close(msgbox)lv_msgbox_close(msgbox);
事件按钮点击事件LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(msgbox, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
获取被点击按钮的索引和文本lv_msgbox_get_active_button(msgbox) lv_msgbox_get_active_button_text(msgbox)int btn_id = lv_msgbox_get_active_button(msgbox); const char *btn_txt = lv_msgbox_get_active_button_text(msgbox);
处理关闭按钮和按钮矩阵的键手动添加到组中-

滚动选择器 Roller (lv_roller)

概述

滚动选择器允许用户通过滚动从一个列表中简单选择一个选项。

部件和样式

  • LV_PART_MAIN:滚动选择器的背景使用所有典型的背景属性和文本样式属性。style_text_line_space 调整选项之间的间距。当滚动选择器滚动并没有准确停在一个选项上时,它将在 anim_time 毫秒内自动滚动到最近的有效选项,具体时间在样式中指定。
  • LV_PART_SELECTED:中间的选定选项。除了典型的背景属性,它还使用文本样式属性来改变选定区域中文本的外观。

用法

设置选项

通过字符串将选项传递给滚动选择器,使用 lv_roller_set_options(roller, options, LV_ROLLER_MODE_NORMAL)。选项应以 \n 分隔。例如:“First\nSecond\nThird”。
使用 LV_ROLLER_MODE_INFINITE 使滚动选择器循环滚动。
你可以使用 lv_roller_set_selected(roller, id, LV_ANIM_ON) 手动选择一个选项,其中 id 是选项的索引。

获取选定的选项

使用 lv_roller_get_selected(roller) 获取当前选定选项的 索引
lv_roller_get_selected_str(roller, buf, buf_size) 将选定选项的名称复制到 buf

可见行数

使用 lv_roller_set_visible_row_count(roller, num) 调整可见行数。
此函数会根据当前样式计算高度。如果滚动选择器的字体、行间距、边框宽度等发生变化,需要再次调用此函数。

事件

按键

  • LV_KEY_RIGHT/DOWN 选择下一个选项
  • LV_KEY_LEFT/UP 选择上一个选项
  • LY_KEY_ENTER 应用选定的选项(发送 LV_EVENT_VALUE_CHANGED 事件)

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
选定样式LV_PART_SELECTED-
设置选项设置滚动选择器选项lv_roller_set_options(roller, options, LV_ROLLER_MODE_...)lv_roller_set_options(roller, "First\nSecond\nThird", LV_ROLLER_MODE_NORMAL);
设置选定选项lv_roller_set_selected(roller, id, LV_ANIM_...)lv_roller_set_selected(roller, 1, LV_ANIM_ON);
获取选项获取选定选项索引lv_roller_get_selected(roller)uint32_t id = lv_roller_get_selected(roller);
获取选定选项文本lv_roller_get_selected_str(roller, buf, buf_size)char buf[32]; lv_roller_get_selected_str(roller, buf, sizeof(buf));
可见行数设置可见行数lv_roller_set_visible_row_count(roller, num)lv_roller_set_visible_row_count(roller, 3);
事件选项改变事件LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(roller, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
按键选择下一个选项LV_KEY_RIGHTLV_KEY_DOWN-
选择上一个选项LV_KEY_LEFTLV_KEY_UP-
应用选定选项LV_KEY_ENTER-

标尺 Scale (lv_scale)

概述

标尺允许您创建带有自定义样式的线性标尺,并包含范围和区段。

部件和样式

标尺小部件分为以下三个部分:

  • LV_PART_MAIN 主线。见示例图中的蓝线。
  • LV_PART_ITEMS 次要刻度线。见示例图中的红色次要刻度线。
  • LV_PART_INDICATOR 主要刻度线及其标签(如果启用)。见示例图中的粉色标签和绿色主要刻度线。

用法

设置范围

使用 lv_scale_set_range(scale, minor_range, major_range) 配置次要和主要刻度范围(每个刻度的值)。

配置刻度线

使用 lv_scale_set_total_tick_count(scale, total_tick_count) 设置总刻度数,然后使用 lv_scale_set_major_tick_every(scale, nth_tick) 配置每 N 个刻度为一个主要刻度。
标签可通过 lv_scale_set_label_show(scale, show_label) 来显示或隐藏,设置 show_labeltrue 显示标签,false 隐藏标签。 如果主要刻度上需要文本而不是数值,可以使用 lv_scale_set_text_src(scale, custom_labels) 设置,如:static char * custom_labels[3] = {"One", "Two", NULL};
可以使用 LV_PART_INDICATOR 的长度样式属性配置主要刻度的长度,以及使用 LV_PART_ITEMS 配置次要刻度的长度。例如:

lv_obj_set_style_length(scale, 5, LV_PART_INDICATOR); // 主要刻度
lv_obj_set_style_length(scale, 5, LV_PART_ITEMS); // 次要刻度
区段

区段是次要和主要范围之间的空间。它们可以使用 lv_scale_add_section(scale) 创建,并返回一个 lv_scale_section_t 指针。
使用 lv_scale_section_set_range(section, minor_range, major_range) 配置区段的范围。每个部分的样式可以通过 lv_scale_section_set_style(section, PART, style_pointer) 设置,其中 PART 可以是 LV_PART_MAIN, LV_PART_ITEMSLV_PART_INDICATOR,style_pointer 应指向一个全局或静态的 lv_style_t 变量。
对于标签,可以配置以下属性:

事件

该小部件不支持任何事件。

按键

该小部件不支持任何键。

总结

功能分类功能描述使用方法示例代码
部件和样式主线样式LV_PART_MAIN-
次要刻度线样式LV_PART_ITEMS-
主要刻度线样式LV_PART_INDICATOR-
设置范围设置次要和主要刻度范围lv_scale_set_range(scale, minor_range, major_range)lv_scale_set_range(scale, 0, 100);
配置刻度线设置总刻度数lv_scale_set_total_tick_count(scale, total_tick_count)lv_scale_set_total_tick_count(scale, 10);
设置主要刻度间隔lv_scale_set_major_tick_every(scale, nth_tick)lv_scale_set_major_tick_every(scale, 2);
显示或隐藏标签lv_scale_set_label_show(scale, show_label)lv_scale_set_label_show(scale, true);
设置自定义标签lv_scale_set_text_src(scale, custom_labels)static char *custom_labels[] = {"One", "Two", NULL}; lv_scale_set_text_src(scale, custom_labels);
配置主要刻度长度lv_obj_set_style_length(scale, length, LV_PART_INDICATOR)lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR);
配置次要刻度长度lv_obj_set_style_length(scale, length, LV_PART_ITEMS)lv_obj_set_style_length(scale, 5, LV_PART_ITEMS);
区段创建区段lv_scale_add_section(scale)lv_scale_section_t *section = lv_scale_add_section(scale);
设置区段范围lv_scale_section_set_range(section, minor_range, major_range)lv_scale_section_set_range(section, 0, 50);
设置区段样式lv_scale_section_set_style(section, PART, style_pointer)lv_scale_section_set_style(section, LV_PART_MAIN, &style);
标签样式设置字体lv_style_set_text_font(style, font)lv_style_set_text_font(&style, &lv_font_montserrat_20);
设置字体颜色lv_style_set_text_color(style, color)lv_style_set_text_color(&style, lv_color_hex(0x000000));
设置字母间距lv_style_set_text_letter_space(style, space)lv_style_set_text_letter_space(&style, 2);
设置字体透明度lv_style_set_text_opa(style, opa)lv_style_set_text_opa(&style, LV_OPA_COVER);
线条样式设置线条颜色lv_style_set_line_color(style, color)lv_style_set_line_color(&style, lv_color_hex(0x000000));
设置线条宽度lv_style_set_line_width(style, width)lv_style_set_line_width(&style, 2);
事件不支持任何事件--
不支持任何键--

滑块 Slider (lv_slider)

概述

滑块对象类似于一个带有旋钮的进度条。通过拖动旋钮可以设置一个值。滑块可以是垂直的或水平的。

部件和样式

  • LV_PART_MAIN: 滑块的背景。使用所有典型的背景样式属性。padding 调整相应方向上的指示器大小。
  • LV_PART_INDICATOR: 显示滑块当前状态的指示器。也使用所有典型的背景样式属性。
  • LV_PART_KNOB: 在当前值位置绘制的矩形(或圆形)。也使用所有典型的背景样式属性。默认情况下,旋钮是正方形(具有可选的圆角),边长等于滑块的较短边。可以使用 padding 值使旋钮更大。填充值也可以是不对称的。

用法

值和范围

使用 lv_slider_set_value(slider, new_value, LV_ANIM_ON / OFF) 设置初始值。动画时间由样式的 anim_time 属性设置。
可以使用 lv_slider_set_range(slider, min, max) 指定范围(最小值和最大值)。默认范围是 0 到 100,默认绘制方向是水平方向从左到右,垂直方向从下到上。如果最小值大于最大值,例如 100 到 0,绘制方向会改变为相反方向。

模式

滑块可以有以下几种模式:

  • LV_SLIDER_MODE_NORMAL: 如上所述的普通滑块
  • LV_SLIDER_SYMMETRICAL: 从零值绘制指示器到当前值。需要负的最小范围和正的最大范围。
  • LV_SLIDER_RANGE: 允许通过 lv_bar_set_start_value(bar, new_value, LV_ANIM_ON / OFF) 设置起始值。起始值必须始终小于终止值。
    可以使用 lv_slider_set_mode(slider, LV_SLIDER_MODE_…) 更改模式。
仅旋钮模式

通常,可以通过拖动旋钮或点击滑块条来调整滑块。在后者情况下,旋钮会移动到点击点,并相应地改变滑块值。在某些情况下,需要设置滑块仅对拖动旋钮作出反应。可以通过添加 LV_OBJ_FLAG_ADV_HITTEST: lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST) 来启用此功能。
扩展点击区域(通过 lv_obj_set_ext_click_area(slider, value) 设置)会增加旋钮的点击区域。

事件

按键

  • LV_KEY_UP/RIGHT: 将滑块值增加 1
  • LV_KEY_DOWN/LEFT: 将滑块值减少 1
    了解更多关于按键的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
指示器样式LV_PART_INDICATOR-
旋钮样式LV_PART_KNOB-
值和范围设置滑块值lv_slider_set_value(slider, new_value, LV_ANIM_...)lv_slider_set_value(slider, 50, LV_ANIM_ON);
设置滑块范围lv_slider_set_range(slider, min, max)lv_slider_set_range(slider, 0, 100);
模式设置滑块模式lv_slider_set_mode(slider, LV_SLIDER_MODE_...)lv_slider_set_mode(slider, LV_SLIDER_MODE_SYMMETRICAL);
仅旋钮模式仅对拖动旋钮作出反应lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST)lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST);
扩展点击区域lv_obj_set_ext_click_area(slider, value)lv_obj_set_ext_click_area(slider, 10);
事件值改变事件LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(slider, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
释放事件LV_EVENT_RELEASEDlv_obj_add_event_cb(slider, event_cb, LV_EVENT_RELEASED, NULL);
按键增加滑块值LV_KEY_UP/RIGHT-
减少滑块值LV_KEY_DOWN/LEFT-

Span (lv_span)

概述

spangroup对象用于显示富文本。不同于标签对象,spangroup可以使用不同的字体、颜色和大小来渲染文本。

部件和样式

用法

设置文本和样式

spangroup对象使用span描述文本和文本样式。首先,需要使用 lv_span_t * span = lv_spangroup_new_span(spangroup) 创建span描述符。然后使用 lv_span_set_text(span, “text”) 设置文本。span的样式与普通样式对象一样通过其 style 成员配置,例如: lv_style_set_text_color(&span->style, lv_palette_main(LV_PALETTE_RED)).
如果spangroup对象的 mode 不是 LV_SPAN_MODE_FIXED,则在修改span样式(例如:设置文本,改变字体大小,删除span)后必须调用 lv_spangroup_refr_mode()

获取子span

Spangroups以不同于普通对象的方式存储其子元素,因此普通的获取子元素的函数不起作用。
lv_spangroup_get_child(spangroup, id) 将返回指定索引 id 的子span指针。此外,id 可以是负数,从spangroup的末尾开始索引,其中 -1 是最新的子元素,-2 是次新的子元素,依此类推。
例如,lv_span_t* span = lv_spangroup_get_child(spangroup, 0) 将返回spangroup的第一个子元素。lv_span_t* span = lv_spangroup_get_child(spangroup, -1) 将返回最后一个(或最新的)子元素。

子元素计数

使用函数 lv_spangroup_get_span_count(spangroup) 获取spangroup中span的数量。
例如:uint32_t size = lv_spangroup_get_span_count(spangroup)

文本对齐

与标签对象类似,spangroup可以设置为以下模式之一:

模式

spangroup可以设置为以下模式之一:

溢出

spangroup可以设置为以下模式之一:

首行缩进

使用函数 lv_spangroup_set_indent(spangroup, 20) 设置首行缩进。所有模式都支持像素单位,此外LV_SPAN_MODE_FIXEDLV_SPAN_MODE_BREAK模式还支持百分比单位。

行数

使用函数 lv_spangroup_set_max_lines(spangroup, 10) 设置最大显示行数:cpp:enumerator::LV_SPAN_MODE_BREAK 模式下的行数,负值表示无限制。

事件

此部件不发送特殊事件。
了解更多关于事件的信息。

按键

此部件不处理按键。
了解更多关于按键的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
设置文本和样式创建span描述符lv_span_t *span = lv_spangroup_new_span(spangroup)lv_span_t *span = lv_spangroup_new_span(spangroup);
设置文本lv_span_set_text(span, "text")lv_span_set_text(span, "Hello World");
设置文本颜色lv_style_set_text_color(&span->style, color)lv_style_set_text_color(&span->style, lv_palette_main(LV_PALETTE_RED));
获取子span获取指定索引的子spanlv_spangroup_get_child(spangroup, id)lv_span_t *span = lv_spangroup_get_child(spangroup, 0);
子元素计数获取spangroup中span的数量lv_spangroup_get_span_count(spangroup)uint32_t size = lv_spangroup_get_span_count(spangroup);
文本对齐设置文本对齐方式lv_spangroup_set_align(spangroup, LV_TEXT_ALIGN_...)lv_spangroup_set_align(spangroup, LV_TEXT_ALIGN_CENTER);
模式设置对象模式lv_spangroup_set_mode(spangroup, LV_SPAN_MODE_...)lv_spangroup_set_mode(spangroup, LV_SPAN_MODE_BREAK);
溢出设置对象溢出模式lv_spangroup_set_overflow(spangroup, LV_SPAN_OVERFLOW_...)lv_spangroup_set_overflow(spangroup, LV_SPAN_OVERFLOW_CLIP);
首行缩进设置首行缩进lv_spangroup_set_indent(spangroup, indent)lv_spangroup_set_indent(spangroup, 20);
行数设置最大显示行数lv_spangroup_set_max_lines(spangroup, lines)lv_spangroup_set_max_lines(spangroup, 10);
事件不发送特殊事件--
按键不处理按键--

Spinbox (lv_spinbox)

概述

Spinbox对象显示一个可通过键盘或API函数增加或减少的数字。Spinbox本质上是一个修改过的文本区域

部件和样式

Spinbox的部件与文本区域相同。

使用

值、范围和步长
格式

lv_spinbox_set_digit_format(spinbox, digit_count, separator_position): 设置数字格式。digit_count 是不包括小数点和符号的数字位数。separator_position 是小数点前的数字位数。如果为0,则不显示小数点。

循环模式

lv_spinbox_set_rollover(spinbox, true / false): 启用/禁用循环模式。如果启用了循环模式并达到了最小值或最大值,值将更改为另一个极限。如果禁用了循环模式,值将保持在最小值或最大值。

事件

按键

  • LV_KEY_LEFT/RIGHT: 使用键盘左移/右移光标。使用编码器减少/增加选定的数字。
  • LV_KEY_UP/DOWN: 使用键盘编码器增加/减少值。
  • LV_KEY_ENTER: 使用编码器进入下一个数字。跳转到第一个数字后跳转到最后一个数字。

总结

功能分类功能描述使用方法示例代码
部件和样式与文本区域相同--
值、范围和步长设置Spinbox值lv_spinbox_set_value(spinbox, value)lv_spinbox_set_value(spinbox, 1234);
增加Spinbox值lv_spinbox_increment(spinbox)lv_spinbox_increment(spinbox);
减少Spinbox值lv_spinbox_decrement(spinbox)lv_spinbox_decrement(spinbox);
设置值范围lv_spinbox_set_range(spinbox, min, max)lv_spinbox_set_range(spinbox, -1000, 2500);
设置步长lv_spinbox_set_step(spinbox, step)lv_spinbox_set_step(spinbox, 100);
设置光标位置lv_spinbox_set_cursor_pos(spinbox, pos)lv_spinbox_set_cursor_pos(spinbox, 1);
设置数字移动方向lv_spinbox_set_digit_step_direction(spinbox, LV_DIR_LEFT)lv_spinbox_set_digit_step_direction(spinbox, LV_DIR_LEFT);
格式设置数字格式lv_spinbox_set_digit_format(spinbox, digit_count, separator_position)lv_spinbox_set_digit_format(spinbox, 5, 2);
循环模式启用/禁用循环模式lv_spinbox_set_rollover(spinbox, true/false)lv_spinbox_set_rollover(spinbox, true);
事件值改变事件LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(spinbox, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
按键左移/右移光标LV_KEY_LEFT/RIGHT-
增加/减少值LV_KEY_UP/DOWN-
进入下一个数字LV_KEY_ENTER-

Spinner (lv_spinner)

概述

Spinner对象是一个旋转的弧形,它位于一个环上。

部件和样式

Spinner的部件与lv_arc.h中的部件相同。

使用

创建一个Spinner

使用 lv_spinner_create(parent) 函数来创建一个Spinner。
通过 lv_spinner_set_anim_params(spinner, spin_duration, angle) 函数,可以自定义旋转一周的持续时间和弧形的长度。

事件

Spinner不会发送特殊的事件。
查看Arc的事件。
了解更多关于事件的信息。

按键

Spinner对象类型不处理任何按键。
了解更多关于按键的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式与arc一样--
创建Spinner创建Spinnerlv_spinner_create(parent)lv_obj_t *spinner = lv_spinner_create(parent);
动画参数设置旋转参数lv_spinner_set_anim_params(spinner, spin_duration, angle)lv_spinner_set_anim_params(spinner, 1000, 90);
事件不发送特殊事件参考Arc的事件-
按键不处理任何按键--

Switch (lv_switch)

概述

Switch看起来像一个小滑块,可以用于打开或关闭某个功能。

部件和样式

  • LV_PART_MAIN Switch的背景,使用所有典型的背景样式属性。padding可以使指示器在相应方向上变小。
  • LV_PART_INDICATOR 显示Switch当前状态的指示器。同样使用所有典型的背景样式属性。
  • LV_PART_KNOB 绘制在指示器左侧或右侧的矩形(或圆形)。同样使用所有典型的背景样式属性来描述旋钮。默认情况下,旋钮是方形的(带有可选的圆角),边长等于滑块的较小一侧。旋钮可以通过padding值变大,padding值也可以是不对称的。

使用

改变状态

Switch使用标准的LV_STATE_CHECKED状态。
要获取Switch的当前状态(true表示开启),请使用lv_obj_has_state(obj, LV_STATE_CHECKED)。
调用lv_obj_add_state(obj, LV_STATE_CHECKED)可以将其打开,或者调用lv_obj_remove_state(obj, LV_STATE_CHECKED)可以将其关闭。

事件

按键

  • LV_KEY_UP/RIGHT 打开滑块
  • LV_KEY_DOWN/LEFT 关闭滑块
  • LV_KEY_ENTER 切换Switch
    了解更多关于按键的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
指示器样式LV_PART_INDICATOR-
旋钮样式LV_PART_KNOB-
改变状态获取当前状态lv_obj_has_state(obj, LV_STATE_CHECKED)bool state = lv_obj_has_state(switch, LV_STATE_CHECKED);
打开Switchlv_obj_add_state(obj, LV_STATE_CHECKED)lv_obj_add_state(switch, LV_STATE_CHECKED);
关闭Switchlv_obj_remove_state(obj, LV_STATE_CHECKED)lv_obj_remove_state(switch, LV_STATE_CHECKED);
事件值改变事件LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(switch, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
按键打开SwitchLV_KEY_UPLV_KEY_RIGHT-
关闭SwitchLV_KEY_DOWNLV_KEY_LEFT-
切换SwitchLV_KEY_ENTER-

表格 Table (lv_table)

概述

Table对象是由行、列和包含文本的单元格构成的表格。Table对象非常轻量,因为只存储文本,没有为单元格创建实际对象,而是在需要时动态绘制它们。
Table被添加到默认组(如果已设置)。此外,Table是一个可编辑对象,允许通过编码器导航选择单元格。

部件和样式

  • LV_PART_MAIN Table的背景,使用所有典型的背景样式属性。
  • LV_PART_ITEMS Table的单元格,使用所有典型的背景样式属性和文本属性。

用法

设置单元格值

单元格只能存储文本,因此需要将数字转换为文本后再显示在Table中。
使用lv_table_set_cell_value(table, row, col, “内容”)设置单元格的值。文本由Table保存,因此可以是局部变量。
文本中可以使用换行符,如"Value\n60.3"
需要时会自动添加新行和新列。

行和列

使用lv_table_set_row_count(table, row_cnt)和lv_table_set_column_count(table, col_cnt)显式设置行数和列数。

宽度和高度

列的宽度可以使用lv_table_set_column_width(table, col_id, width)设置。Table对象的总宽度将设置为所有列宽度的总和。
高度根据单元格样式(字体、填充等)和行数自动计算。

合并单元格

可以使用lv_table_add_cell_ctrl(table, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT)水平合并单元格。要合并多个相邻单元格,请为每个单元格调用此函数。

滚动

如果Table的宽度或高度设置为LV_SIZE_CONTENT,则在相应方向上将显示整个Table。例如,lv_obj_set_size(table, LV_SIZE_CONTENT, LV_SIZE_CONTENT)会自动设置Table大小以显示所有列和行。
如果宽度或高度设置为小于“固有”大小的数值,则Table变得可滚动。

事件

按键

Table处理以下按键:

  • LV_KEY_RIGHT/LEFT/UP/DOWN/ 选择单元格。
    请注意,通常LV_KEY_ENTER的状态会转换为LV_EVENT_PRESSED/PRESSING/RELEASED等。
    使用lv_table_get_selected_cell(table, &row, &col)可以获取当前选中的单元格。如果没有选中单元格,行和列将设置为LV_TABLE_CELL_NONE
    了解更多关于按键的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
单元格样式LV_PART_ITEMS-
设置单元格值设置单元格的文本lv_table_set_cell_value(table, row, col, "内容")lv_table_set_cell_value(table, 0, 0, "Value\n60.3");
行和列设置行数lv_table_set_row_count(table, row_cnt)lv_table_set_row_count(table, 3);
设置列数lv_table_set_column_count(table, col_cnt)lv_table_set_column_count(table, 3);
宽度和高度设置列宽度lv_table_set_column_width(table, col_id, width)lv_table_set_column_width(table, 0, 100);
合并单元格水平合并单元格lv_table_add_cell_ctrl(table, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT)lv_table_add_cell_ctrl(table, 0, 0, LV_TABLE_CELL_CTRL_MERGE_RIGHT);
滚动设置表格大小以显示所有内容lv_obj_set_size(table, LV_SIZE_CONTENT, LV_SIZE_CONTENT)lv_obj_set_size(table, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
事件选择新单元格时发送LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(table, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
按键选择单元格LV_KEY_RIGHT/LEFT/UP/DOWN-
获取当前选中的单元格lv_table_get_selected_cell(table, &row, &col)uint32_t row, col; lv_table_get_selected_cell(table, &row, &col);

标签视图 Tabview (lv_tabview)

概述

标签视图对象可以用于通过标签来组织内容。标签视图由其他小部件构建而成:

  • 主容器:lv_obj.h
  • 标签按钮:lv_obj.hlv_button.h
  • 标签容器:lv_obj.h
  • 标签内容:lv_obj.h
    标签按钮可以位于标签视图的顶部、底部、左侧或右侧。
    可以通过点击标签按钮或水平滑动内容来选择一个新标签。

部件和样式

标签视图没有特殊部件,但使用了 lv_objlv_button 小部件来创建标签视图。

使用方法

创建标签视图

lv_tabview_create(parent) 创建一个新的空标签视图。

添加标签

可以通过 lv_tabview_add_tab(tabview, “Tab name”) 添加新标签。这将返回一个指向 lv_obj.h 对象的指针,可以在其中创建标签的内容。

重命名标签

可以使用 lv_tabview_rename_tab(tabview, tab_id, “New Name”) 来重命名标签。

切换标签

要选择新标签,可以:

设置标签栏位置

使用 lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT / RIGHT / TOP / BOTTOM) 可以将标签栏移动到任意一侧。

设置标签栏大小

标签栏的大小可以通过 lv_tabview_set_tab_bar_size(tabview, size) 调整。垂直排列时表示标签栏的高度,水平排列时表示宽度。

获取部件

事件

按键

按键仅对标签按钮有效。如有需要,请手动添加到组中。
了解更多关于 按键 的信息。

总结

功能分类功能描述使用方法示例代码
创建标签视图创建新的标签视图lv_tabview_create(parent)lv_obj_t *tabview = lv_tabview_create(parent);
添加标签添加新标签lv_tabview_add_tab(tabview, "Tab name")lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
重命名标签重命名现有标签lv_tabview_rename_tab(tabview, tab_id, "New Name")lv_tabview_rename_tab(tabview, 0, "New Tab 1");
切换标签选择新标签lv_tabview_set_active(tabview, id, LV_ANIM_...)lv_tabview_set_active(tabview, 1, LV_ANIM_ON);
标签栏位置设置标签栏位置lv_tabview_set_tab_bar_position(tabview, LV_DIR_...)lv_tabview_set_tab_bar_position(tabview, LV_DIR_BOTTOM);
标签栏大小设置标签栏大小lv_tabview_set_tab_bar_size(tabview, size)lv_tabview_set_tab_bar_size(tabview, 50);
获取部件获取标签内容容器lv_tabview_get_content(tabview)lv_obj_t *content = lv_tabview_get_content(tabview);
获取标签按钮容器lv_tabview_get_tab_bar(tabview)lv_obj_t *tab_bar = lv_tabview_get_tab_bar(tabview);
事件标签值改变事件LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(tabview, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
按键按键导航手动添加到组中-

文本区域 Text area (lv_textarea)

概述

文本区域是一个带有标签和光标的基础对象。可以在其上添加文本或字符。长行会自动换行,当文本足够长时,文本区域可以滚动。
支持单行模式和密码模式。

部件和样式

  • LV_PART_MAIN:文本区域的背景。使用所有典型的背景样式属性和文本相关样式属性,包括 text_align 用于将文本左对齐、右对齐或居中对齐。
  • LV_PART_SCROLLBAR:文本过长时显示的滚动条。
  • LV_PART_SELECTED:确定选中文本的样式。只能使用 text_colorbg_color 样式属性。bg_color 应直接设置在文本区域的标签上。
  • LV_PART_CURSOR:标记插入字符的位置。光标区域始终是当前字符的边界框。可以通过向 LV_PART_CURSOR 的样式添加背景色和背景不透明度来创建块光标。创建行光标时,将光标设置为透明并设置左边框。anim_time 样式属性设置光标的闪烁时间。
  • LV_PART_TEXTAREA_PLACEHOLDER:仅文本区域独有,用于样式化占位符文本。

使用方法

添加文本

可以在当前光标位置插入文本或字符:

占位符

可以指定一个占位符文本

删除字符

使用 lv_textarea_delete_char(textarea) 删除当前光标位置左侧的字符。
使用 lv_textarea_delete_char_forward(textarea) 删除右侧的字符。

移动光标

光标位置可以直接修改,如 lv_textarea_set_cursor_pos(textarea, 10)。位置 0 表示“在第一个字符之前”,LV_TA_CURSOR_LAST 表示“在最后一个字符之后”。
你可以用以下方法移动光标:

隐藏光标

光标始终可见,但可以通过将其样式设置为仅在 LV_STATE_FOCUSED 状态下可见来隐藏。

单行模式

文本区域可以配置为单行模式,使用 lv_textarea_set_one_line(textarea, true)。在这种模式下,高度自动设置为仅显示一行,行分隔符字符被忽略,禁用单词换行。

密码模式

文本区域支持密码模式,可以通过 lv_textarea_set_password_mode(textarea, true) 启用。
默认情况下,如果字体中存在 (Bullet, U+2022) 字符,输入的字符会在一段时间后或输入新字符时转换为该字符。如果字体中不存在 ,则使用 *。可以使用 lv_textarea_set_password_bullet(textarea, “x”) 覆盖默认字符。
在密码模式下, lv_textarea_get_text(textarea) 返回实际输入的文本,而不是圆点字符。
可通过在 lv_conf.h 中调整 LV_TEXTAREA_DEF_PWD_SHOW_TIME 来调整显示时间。

接受的字符

可以通过 lv_textarea_set_accepted_chars(textarea, “0123456789.±”) 设置接受的字符列表。其他字符将被忽略。

最大文本长度

可以通过 lv_textarea_set_max_length(textarea, max_char_num) 限制最大字符数。

非常长的文本

如果文本区域中有非常长的文本(例如 > 20k 字符),滚动和绘制可能会变慢。但是,通过在 lv_conf.h 中启用 LV_LABEL_LONG_TXT_HINT,性能可以大大提高。这将保存一些关于标签的额外信息以加速其绘制。使用 LV_LABEL_LONG_TXT_HINT,滚动和绘制速度将与“正常”短文本一样快。

选择文本

如果启用,可以选择文本的任何部分,使用 [lv_textarea_set_text_selection](https://docs.lvgl.io/master/API/widgets/textarea/lv_textarea.html#_CPPv430lv_textarea
_set_text_selectionP8lv_obj_tb)(textarea, true)。这类似于在 PC 上使用鼠标选择文本。

事件

按键

  • LV_KEY_UP/DOWN/LEFT/RIGHT 移动光标
  • 任意字符 将字符添加到当前光标位置
    了解更多关于 按键 的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
滚动条样式LV_PART_SCROLLBAR-
选中样式LV_PART_SELECTED-
光标样式LV_PART_CURSOR-
占位符样式LV_PART_TEXTAREA_PLACEHOLDER-
添加文本在光标位置插入字符lv_textarea_add_char(textarea, 'c')lv_textarea_add_char(textarea, 'A');
在光标位置插入文本lv_textarea_add_text(textarea, "text")lv_textarea_add_text(textarea, "Hello");
设置整个文本lv_textarea_set_text(textarea, "新文本")lv_textarea_set_text(textarea, "New text");
占位符设置占位符文本lv_textarea_set_placeholder_text(textarea, "占位符文本")lv_textarea_set_placeholder_text(textarea, "Placeholder");
删除字符删除光标左侧的字符lv_textarea_delete_char(textarea)lv_textarea_delete_char(textarea);
删除光标右侧的字符lv_textarea_delete_char_forward(textarea)lv_textarea_delete_char_forward(textarea);
移动光标设置光标位置lv_textarea_set_cursor_pos(textarea, pos)lv_textarea_set_cursor_pos(textarea, 10);
光标右移lv_textarea_cursor_right(textarea)lv_textarea_cursor_right(textarea);
光标左移lv_textarea_cursor_left(textarea)lv_textarea_cursor_left(textarea);
光标上移lv_textarea_cursor_up(textarea)lv_textarea_cursor_up(textarea);
光标下移lv_textarea_cursor_down(textarea)lv_textarea_cursor_down(textarea);
点击位置设置光标lv_textarea_set_cursor_click_pos(textarea, true)lv_textarea_set_cursor_click_pos(textarea, true);
单行模式启用单行模式lv_textarea_set_one_line(textarea, true)lv_textarea_set_one_line(textarea, true);
密码模式启用密码模式lv_textarea_set_password_mode(textarea, true)lv_textarea_set_password_mode(textarea, true);
设置密码字符lv_textarea_set_password_bullet(textarea, "x")lv_textarea_set_password_bullet(textarea, "*");
接受的字符设置接受的字符lv_textarea_set_accepted_chars(textarea, "chars")lv_textarea_set_accepted_chars(textarea, "0123456789");
最大文本长度设置最大字符数lv_textarea_set_max_length(textarea, max_char_num)lv_textarea_set_max_length(textarea, 100);
选择文本启用文本选择lv_textarea_set_text_selection(textarea, true)lv_textarea_set_text_selection(textarea, true);
事件插入字符或文本前发送LV_EVENT_INSERTlv_obj_add_event_cb(textarea, event_cb, LV_EVENT_INSERT, NULL);
内容改变时发送LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(textarea, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
LV_KEY_ENTER 被按下时发送LV_EVENT_READYlv_obj_add_event_cb(textarea, event_cb, LV_EVENT_READY, NULL);
按键移动光标LV_KEY_UP/DOWN/LEFT/RIGHT-
将字符添加到光标位置任意字符-

瓷砖视图 Tile view (lv_tileview)

概述

瓷砖视图是一个容器对象,其元素(称为“瓷砖”)可以按网格形式排列。用户可以通过滑动在瓷砖之间导航。可以单独禁用每个瓷砖的滑动方向,以不允许从一个瓷砖移动到另一个瓷砖。
如果瓷砖视图是屏幕大小,用户界面类似于你在智能手表上看到的界面。

部件和样式

瓷砖视图由一个 lv_obj.h 容器和 lv_obj.h 瓷砖构建而成。
部件和样式的工作方式与 lv_obj.h 相同。

使用方法

添加瓷砖

lv_tileview_add_tile(tileview, row_id, col_id, dir) 在第 row_id 行和第 col_id 列上创建一个新瓷砖。dir 可以是 LV_DIR_LEFT/RIGHT/TOP/BOTTOM/HOR/VER/ALL 或 OR 的值,以启用通过滑动移动到相邻瓷砖的给定方向。
返回值是一个 lv_obj_t *,可以在其上创建标签的内容。

切换瓷砖

瓷砖视图可以通过 lv_tileview_set_tile(tileview, tile_obj, LV_ANIM_ON / OFF) 或 lv_tileview_set_tile_by_index(tileview, col_id, row_id, LV_ANIM_ON / OFF) 滚动到某个瓷砖。

事件

按键

按键 不由瓷砖视图处理。
了解更多关于 按键 的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式主样式LV_PART_MAIN-
添加瓷砖在网格中添加瓷砖lv_tileview_add_tile(tileview, row_id, col_id, dir)lv_obj_t *tile = lv_tileview_add_tile(tileview, 0, 0, LV_DIR_ALL);
切换瓷砖切换到某个瓷砖(通过对象)lv_tileview_set_tile(tileview, tile_obj, LV_ANIM_...)lv_tileview_set_tile(tileview, tile, LV_ANIM_ON);
切换到某个瓷砖(通过索引)lv_tileview_set_tile_by_index(tileview, col_id, row_id, LV_ANIM_...)lv_tileview_set_tile_by_index(tileview, 0, 1, LV_ANIM_ON);
事件瓷砖切换事件LV_EVENT_VALUE_CHANGEDlv_obj_add_event_cb(tileview, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
获取当前活动的瓷砖lv_tileview_get_tile_active(tileview)lv_obj_t *active_tile = lv_tileview_get_tile_active(tileview);
按键不处理按键--

窗口 Window (lv_win)

概述

窗口是一个类似容器的对象,由带有标题和按钮的头部以及内容区域构成。

部件和样式

窗口由其他小部件构建而成,因此可以查看它们的文档以了解详细信息:

使用方法

创建窗口

lv_win_create(parent, header_height) 创建一个带有空头部的窗口。

标题和按钮

可以使用 lv_win_add_title(win, “标题”) 向头部添加任意数量的文本(但通常只添加一个)。
可以使用 lv_win_add_button(win, icon, button_width) 向窗口的头部添加控制按钮。icon 可以是任何图像源,button_width 是按钮的宽度。
标题和按钮将按照函数调用的顺序添加。因此,添加一个按钮,一个文本和两个其他按钮将导致左侧有一个按钮,中间有一个标题,右侧有两个按钮。标题的宽度设置为占据头部的所有剩余空间。换句话说:它会将添加在标题之后的所有按钮推到右侧。

获取部件

lv_win_get_header(win) 返回指向头部的指针,lv_win_get_content(win) 返回指向内容容器的指针,可以向其中添加窗口的内容。

事件

窗口不发送特殊事件,但可以手动将事件添加到 lv_win_add_button() 的返回值。
了解更多关于 事件 的信息。

按键

窗口不处理 按键
了解更多关于 按键 的信息。

总结

功能分类功能描述使用方法示例代码
部件和样式背景LV_PART_MAIN-
头部LV_PART_MAIN-
标题LV_PART_MAIN-
按钮LV_PART_MAIN-
内容区域LV_PART_MAIN-
创建窗口创建带头部的窗口lv_win_create(parent, header_height)lv_obj_t *win = lv_win_create(parent, 40);
标题和按钮添加标题lv_win_add_title(win, "标题")lv_win_add_title(win, "My Window");
添加按钮lv_win_add_button(win, icon, button_width)lv_win_add_button(win, LV_SYMBOL_CLOSE, 40);
获取部件获取头部指针lv_win_get_header(win)lv_obj_t *header = lv_win_get_header(win);
获取内容容器指针lv_win_get_content(win)lv_obj_t *content = lv_win_get_content(win);
事件无特殊事件,但可手动添加lv_obj_add_event_cb(button, event_cb, LV_EVENT_CLICKED, NULL);lv_obj_t *btn = lv_win_add_button(win, LV_SYMBOL_CLOSE, 40);
lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);
按键不处理按键--
  • 29
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值