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)。
以下是存在的对齐类型:
父对象和子对象
可以使用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_FLAG_HIDDEN
使对象隐藏。(就像它根本不存在一样)LV_OBJ_FLAG_CLICKABLE
使对象可被输入设备点击LV_OBJ_FLAG_CLICK_FOCUSABLE
点击时将焦点状态添加到对象LV_OBJ_FLAG_CHECKABLE
点击对象时切换选中状态LV_OBJ_FLAG_SCROLLABLE
使对象可滚动LV_OBJ_FLAG_SCROLL_ELASTIC
允许对象内部滚动但速度较慢LV_OBJ_FLAG_SCROLL_MOMENTUM
使对象在“甩动”时滚动更远LV_OBJ_FLAG_SCROLL_ONE
允许仅滚动一个可捕捉的子对象LV_OBJ_FLAG_SCROLL_CHAIN_HOR
允许将水平滚动传播到父对象LV_OBJ_FLAG_SCROLL_CHAIN_VER
允许将垂直滚动传播到父对象LV_OBJ_FLAG_SCROLL_CHAIN
简单包装(LV_OBJ_FLAG_SCROLL_CHAIN_HOR | LV_OBJ_FLAG_SCROLL_CHAIN_VER)LV_OBJ_FLAG_SCROLL_ON_FOCUS
当对象获得焦点时自动滚动以使其可见LV_OBJ_FLAG_SCROLL_WITH_ARROW
允许使用箭头键滚动焦点对象LV_OBJ_FLAG_SNAPPABLE
如果在父对象上启用了滚动捕捉,则可以捕捉到此对象LV_OBJ_FLAG_PRESS_LOCK
即使按压从对象上滑开也保持对象按下状态LV_OBJ_FLAG_EVENT_BUBBLE
将事件传播到父对象LV_OBJ_FLAG_GESTURE_BUBBLE
将手势传播到父对象LV_OBJ_FLAG_ADV_HITTEST
允许执行更准确的命中(点击)测试。例如,考虑到圆角LV_OBJ_FLAG_IGNORE_LAYOUT
使对象可由布局定位LV_OBJ_FLAG_FLOATING
当父对象滚动时不滚动对象并忽略布局LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS
启用发送LV_EVENT_DRAW_TASK_ADDED
事件LV_OBJ_FLAG_OVERFLOW_VISIBLE
不要剪辑子对象的内容到父对象的边界LV_OBJ_FLAG_FLEX_IN_NEW_TRACK
在此项上开始新的flex轨道LV_OBJ_FLAG_LAYOUT_1
自定义标志,可由布局使用LV_OBJ_FLAG_LAYOUT_2
自定义标志,可由布局使用LV_OBJ_FLAG_WIDGET_1
自定义标志,可由小部件使用LV_OBJ_FLAG_WIDGET_2
自定义标志,可由小部件使用LV_OBJ_FLAG_USER_1
自定义标志,可由用户使用LV_OBJ_FLAG_USER_2
自定义标志,可由用户使用LV_OBJ_FLAG_USER_3
自定义标志,可由用户使用LV_OBJ_FLAG_USER_4
自定义标志,可由用户使用
一些示例:
/*隐藏对象*/
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_EVENT_VALUE_CHANGED
当LV_OBJ_FLAG_CHECKABLE
标志启用且对象被点击(在选中状态之间切换时)
了解更多关于事件的信息。
按键
如果LV_OBJ_FLAG_CHECKABLE
启用,LV_KEY_RIGHT
和LV_KEY_UP
将使对象被选中,LV_KEY_LEFT
和LV_KEY_DOWN
将取消选中对象。
如果LV_OBJ_FLAG_SCROLLABLE
启用,但对象不可编辑(由小部件类声明),箭头键(LV_KEY_UP
,LV_KEY_DOWN
,LV_KEY_LEFT
,LV_KEY_RIGHT
)会滚动对象。如果对象只能垂直滚动,LV_KEY_LEFT
和LV_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_MODE_NORMAL
指示器弧形从最小值绘制到当前值。LV_ARC_MODE_REVERSE
指示器弧形从最大值逆时针绘制到当前值。LV_ARC_MODE_SYMMETRICAL
指示器弧形从中点绘制到当前值。
可以使用 lv_arc_set_mode(arc, LV_ARC_MODE_…) 设置模式,并且仅当角度由lv_arc_set_value()
设置或通过手指调整弧形时使用。
变化速率
如果按下弧形,当前值将根据设定的变化速率以有限速度设置。变化速率以度/秒为单位,可以通过 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_BEGIN
和LV_EVENT_DRAW_PART_END
发送以下类型:LV_ARC_DRAW_PART_BACKGROUND
背景弧。part
:LV_PART_MAIN
p1
: 弧的中心radius
: 弧的半径arc_dsc
LV_ARC_DRAW_PART_FOREGROUND
前景弧。part
:LV_PART_INDICATOR
p1
: 弧的中心radius
: 弧的半径arc_dsc
- LV_ARC_DRAW_PART_KNOB 手柄
part
:LV_PART_KNOB
draw_area
: 手柄的区域rect_dsc
:
也请参见基础对象的事件。
了解更多关于事件的信息。
按键
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_SYMMETRICAL | lv_bar_set_mode(bar, LV_BAR_MODE_SYMMETRICAL); | |
范围模式 | LV_BAR_MODE_RANGE | lv_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_EVENT_VALUE_CHANGED
当启用LV_OBJ_FLAG_CHECKABLE
标志且对象被点击时触发。事件发生在切换到/从选中状态转换时。
了解更多关于事件的信息。
按键
注意,LV_KEY_ENTER
的状态会转换为 LV_EVENT_PRESSED
、LV_EVENT_PRESSING
和 LV_EVENT_RELEASED
等事件。
也请参见基础对象的事件。
了解更多关于键的信息。
总结
功能分类 | 功能描述 | 使用方法 | 示例代码 |
---|---|---|---|
部件和样式 | 主按钮样式 | LV_PART_MAIN | - |
使用方法 | 按钮无新功能 | 与基础对象相同 | - |
事件 | 值变化事件 | LV_EVENT_VALUE_CHANGED 当启用 LV_OBJ_FLAG_CHECKABLE 时被点击触发 | - |
键 | 按钮状态 | LV_KEY_ENTER 转换为 LV_EVENT_PRESSED 、LV_EVENT_PRESSING 和 LV_EVENT_RELEASED | - |
按钮矩阵 Button matrix (lv_buttonmatrix)
概述
按钮矩阵对象是一种轻量级方式,可以在行和列中显示多个按钮。之所以称为轻量级,是因为这些按钮实际上并未真正创建,而是通过虚拟绘制实现。因此,每个按钮仅使用额外的8字节内存,而普通按钮对象大约需要100-150字节,另外加上标签对象大约100字节。
如果设置了默认组,按钮矩阵会自动添加到默认组。此外,按钮矩阵是一个可编辑对象,可以通过编码器导航选择和点击按钮。
部件和样式
LV_PART_MAIN
按钮矩阵的背景,使用典型的背景样式属性。pad_row
和pad_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 = 1 和 buttonB, width = 2,buttonA 将占33%的宽度,buttonB 将占66%的宽度。这类似于CSS中的"flex-grow"属性。宽度必须在[1…15]范围内,默认宽度为1。
除了宽度,每个按钮还可以通过以下参数进行自定义:
LV_BUTTONMATRIX_CTRL_HIDDEN
:使按钮隐藏(隐藏按钮仍然在布局中占用空间,但不可见或不可点击)LV_BUTTONMATRIX_CTRL_NO_REPEAT
:禁用按钮长按时的重复功能LV_BUTTONMATRIX_CTRL_DISABLED
:禁用按钮,如同普通对象上的LV_STATE_DISABLED
LV_BUTTONMATRIX_CTRL_CHECKABLE
:启用按钮的切换功能。即按钮被点击时会添加/移除LV_STATE_CHECKED
LV_BUTTONMATRIX_CTRL_CHECKED
:使按钮处于选中状态。它将使用LV_STATE_CHECKED
样式。LV_BUTTONMATRIX_CTRL_CLICK_TRIG
:启用:在点击时发送LV_EVENT_VALUE_CHANGE,禁用:在按下时发送LV_EVENT_VALUE_CHANGE
LV_BUTTONMATRIX_CTRL_POPOVER
:按下按钮时在弹出框中显示按钮标签LV_BUTTONMATRIX_CTRL_CUSTOM_1
:自定义的自由使用标志LV_BUTTONMATRIX_CTRL_CUSTOM_2
:自定义的自由使用标志
默认情况下,所有标志均为禁用状态。
要设置或清除按钮的控制属性,分别使用 lv_buttonmatrix_set_button_ctrl(buttonm, button_id, LV_BUTTONMATRIX_CTRL_…) 和 lv_buttonmatrix_clear_button_ctrl(buttonm, button_id, LV_BUTTONMATRIX_CTRL_…)。多个LV_BUTTONMATRIX_CTRL_...
值可以进行OR操作。
要为按钮矩阵设置/清除相同的控制属性,使用 lv_buttonmatrix_set_button_ctrl_all(buttonm, LV_BUTTONMATRIX_CTRL_…) 和 lv_buttonmatrix_clear_button_ctrl_all(buttonm, LV_BUTTONMATRIX_CTRL_…)。
要为按钮矩阵设置控制地图(类似于文本的map),使用 lv_buttonmatrix_set_ctrl_map(buttonm, ctrl_map)。ctrl_map
的元素应如下所示:ctrl_map[0] = width | [LV_BUTTONMATRIX_CTRL_NO_REPEAT](https://docs.lvgl.io/master/API/widgets/buttonmatrix/lv_buttonmatrix.html#_CPPv4N23_lv_buttonmatrix_ctrl_t30LV_BUTTONMATRIX_CTRL_NO_REPEATE) | LV_BUTTONMATRIX_CTRL_CHECKABLE
。元素数量应与按钮数量相同(不包括换行符)。
单选
可以通过 lv_buttonmatrix_set_one_checked(buttonm, true) 启用“单选”功能,以确保一次只允许一个按钮被选中。
事件
LV_EVENT_VALUE_CHANGED
:当按钮被按下/释放或长按后重复时发送。事件参数设置为按下/释放按钮的ID。
也请参见基础对象的事件。
lv_buttonmatrix_get_selected_button(buttonm) 返回最近释放或聚焦的按钮的索引,如果没有这样的按钮,则返回LV_BUTTONMATRIX_BUTTON_NONE
。
lv_buttonmatrix_get_button_text(buttonm, button_id) 返回指向button_id
按钮文本的指针。
了解更多关于事件的信息。
按键
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_RIGHT 、LV_KEY_UP 、LV_KEY_LEFT 、LV_KEY_DOWN 导航 LV_KEY_ENTER 按下/释放选定按钮 | - |
日历 Calendar (lv_calendar)
概述
日历对象是一个经典的日历,可以:
- 以7x7矩阵显示任意月份的天数
- 显示日期名称
- 高亮当前日期(今天)
- 高亮任何用户定义的日期
如果设置了默认组,日历将被添加到默认组中。日历是一个可编辑对象,可以通过编码器导航选择和点击日期。
为了使日历更灵活,默认情况下不显示当前年份或月份。相反,可以为日历附加可选的“标题”。
部件和样式
日历对象使用按钮矩阵对象来将日期排列成矩阵。
LV_PART_MAIN
日历的背景,使用所有与背景相关的样式属性。LV_PART_ITEMS
指日期和日期名称。按钮矩阵控制标志用于区分按钮,并添加了自定义绘制事件来修改按钮的属性,如下:- 日期名称没有边框、没有背景,用灰色绘制
- 上个月和下个月的日期具有
LV_BUTTONMATRIX_CTRL_DISABLED
标志 - 今天的日期有一个较厚的边框,使用主题的主要颜色
- 高亮日期具有一些不透明度,使用主题的主要颜色
使用方法
一些函数使用 lv_calendar_date_t
类型,这是一个包含 year
、month
和 day
字段的结构。
当前日期
要设置当前日期(今天),使用 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_EVENT_VALUE_CHANGED
当点击日期时发送。lv_calendar_get_pressed_date(calendar, &date) 将date
设置为当前按下的日期。如果有有效的按下日期,返回LV_RESULT_OK
,否则返回LV_RESULT_INVALID
。
了解更多关于事件的信息。
按键
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_RIGHT 、LV_KEY_UP 、LV_KEY_LEFT 、LV_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
指折线图或柱状图系列。- 折线图:线条属性用于线条。
width
、height
、bg_color
和radius
用于设置点的外观。 - 柱状图:典型的背景属性用于样式化柱子。
pad_column
设置相同索引柱子之间的间距。
- 折线图:线条属性用于线条。
LV_PART_INDICATOR
指折线图和散点图上的点(小圆圈或方块)。LV_PART_CURSOR
线条属性用于样式化光标。width
、height
、bg_color
和radius
用于设置点的外观。
使用方法
图表类型
存在以下数据展示类型:
LV_CHART_TYPE_NONE
:不显示任何数据。可用于隐藏系列。LV_CHART_TYPE_LINE
:在数据点之间绘制线条和/或在数据点上绘制点(矩形或圆形)。LV_CHART_TYPE_BAR
:绘制柱子。LV_CHART_TYPE_SCATTER
:X/Y图表,绘制点和点之间的线条。
可以通过 lv_chart_set_type(chart, LV_CHART_TYPE_…) 指定显示类型。
数据系列
可以通过 lv_chart_add_series(chart, color, axis) 添加任意数量的系列。这会分配一个 lv_chart_series_t
结构,该结构包含所选的color
和一个数据点数组。axis
可以有以下值:
LV_CHART_AXIS_PRIMARY_Y
:左轴LV_CHART_AXIS_SECONDARY_Y
:右轴LV_CHART_AXIS_PRIMARY_X
:下轴LV_CHART_AXIS_SECONDARY_X
:上轴
axis
指定应使用哪个轴的范围来缩放值。
lv_chart_set_ext_y_array(chart, ser, value_array) 使图表使用给定系列的外部数组。value_array
应如下所示:int32_t * value_array[num_points]
。数组大小需要足够大以容纳该系列的所有点。图表会保存数组的指针,因此它需要是全局、静态或动态分配的。注意:在外部数据源更新后应调用 lv_chart_refresh(chart) 以更新图表。
可以使用 lv_chart_get_y_array(chart, ser) 获取系列的值数组,可以与ext_array
或常规数组一起使用。
对于LV_CHART_TYPE_SCATTER
类型,可以使用 lv_chart_set_ext_x_array(chart, ser, value_array) 和 lv_chart_get_x_array(chart, ser)。
修改数据
有几种方法可以设置系列的数据:
- 手动在数组中设置值,例如
ser1->points[3] = 7
并使用lv_chart_refresh(chart)
刷新图表。 - 使用 lv_chart_set_value_by_id(chart, ser, id, value) 其中
id
是要更新的点的索引。 - 使用 lv_chart_set_next_value(chart, ser, value)。
- 使用 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_UPDATE_MODE_SHIFT
:将旧数据向左移动并将新数据添加到右侧。LV_CHART_UPDATE_MODE_CIRCULAR
:以循环方式添加新数据,如心电图。
可以使用 lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_…) 更改更新模式。
点的数量
系列中的点数可以通过 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_EVENT_VALUE_CHANGED
当按下新点时发送。lv_chart_get_pressed_point(chart) 返回按下点的从零开始的索引。
也请参见基础对象的事件。
了解更多关于事件的信息。
按键
此对象类型不处理任何键。
了解更多关于键的信息。
总结
功能分类 | 功能描述 | 使用方法 | 示例代码 |
---|---|---|---|
部件和样式 | 主图表样式 | 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_ARGB8888
或 LV_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_RGB565
、LV_COLOR_FORMAT_RGB888
、LV_COLOR_FORMAT_XRGB888
和 LV_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_EVENT_VALUE_CHANGED
当复选框状态切换时发送。
也请参见基础对象的事件。
了解更多关于事件的信息。
按键
复选框处理以下键:
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_CHECKED | LV_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
按钮的背景。使用典型的背景属性和文本属性。LV_PART_INDICATOR
通常是一个箭头符号,可以是图像或文本(LV_SYMBOL
)。
按钮打开时进入LV_STATE_CHECKED
状态。
列表
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_EVENT_VALUE_CHANGED
当选择了新选项或列表打开/关闭时发送。LV_EVENT_CANCEL
当列表关闭时发送。LV_EVENT_READY
当列表打开时发送。
也请参见基础对象的事件。
了解更多关于事件的信息。
按键
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) 可以缩放图像。设置 factor
为 256
或 LV_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_IMAGE_ALIGN_DEFAULT
:表示左上角LV_IMAGE_ALIGN_TOP_LEFT
LV_IMAGE_ALIGN_TOP_MID
LV_IMAGE_ALIGN_TOP_RIGHT
LV_IMAGE_ALIGN_BOTTOM_LEFT
LV_IMAGE_ALIGN_BOTTOM_MID
LV_IMAGE_ALIGN_BOTTOM_RIGHT
LV_IMAGE_ALIGN_LEFT_MID
LV_IMAGE_ALIGN_RIGHT_MID
LV_IMAGE_ALIGN_CENTER
LV_IMAGE_ALIGN_STRETCH
LV_IMAGE_ALIGN_TILE
对齐后会应用offset
值。例如,设置y=-10
和LV_IMAGE_ALIGN_CENTER
将使图像从控件的中心稍微向上移动。
或自动缩放或平铺图像LV_IMAGE_ALIGN_STRETCH
设置X和Y缩放以填充控件的区域LV_IMAGE_ALIGN_TILE
平铺图像以填充控件区域。应用偏移以移动平铺。
对齐可以通过lv_image_set_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_recolor 和 img_recolor_opa | lv_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_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
如果仅在LV_IMAGEBUTTON_STATE_RELEASED
状态下设置来源,这些来源也将用于其他状态。如果例如设置了LV_IMAGEBUTTON_STATE_PRESSED
,它们将在按下状态下使用,而不是释放状态下的图像。
状态
要手动设置状态,应使用 lv_imagebutton_set_state(imagebutton, LV_IMAGEBUTTON_STATE_…) 函数,而不是常规的 lv_obj_add_state()
和 lv_obj_remove_state()
函数。
事件
LV_EVENT_VALUE_CHANGED
当按钮切换时发送。
了解更多关于事件的信息。
按键
LV_KEY_RIGHT/UP
如果启用LV_OBJ_FLAG_CHECKABLE
,则切换到切换状态。LV_KEY_LEFT/DOWN
如果启用LV_OBJ_FLAG_CHECKABLE
,则切换到非切换状态。LV_KEY_ENTER
点击按钮
了解更多关于键的信息。
总结
功能分类 | 功能描述 | 使用方法 | 示例代码 |
---|---|---|---|
部件和样式 | 主图像按钮样式 | 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_MODE_TEXT_LOWER
显示小写字母LV_KEYBOARD_MODE_TEXT_UPPER
显示大写字母LV_KEYBOARD_MODE_SPECIAL
显示特殊字符LV_KEYBOARD_MODE_NUMBER
显示数字、+/-符号和小数点LV_KEYBOARD_MODE_USER_1
至LV_KEYBOARD_MODE_USER_4
用户定义模式
TEXT
模式的布局包含更改模式的按钮。
要手动设置模式,请使用 lv_keyboard_set_mode(kb, mode)。默认模式是LV_KEYBOARD_MODE_TEXT_UPPER
。
分配文本区域
可以将一个文本区域分配给键盘,以便自动将点击的字符放入其中。要分配文本区域,请使用 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_SYMBOL_OK
发送LV_EVENT_READY
到分配的文本区域。LV_SYMBOL_CLOSE
或LV_SYMBOL_KEYBOARD
发送LV_EVENT_CANCEL
到分配的文本区域。LV_SYMBOL_BACKSPACE
向左删除。LV_SYMBOL_LEFT
向左移动光标。LV_SYMBOL_RIGHT
向右移动光标。LV_SYMBOL_NEW_LINE
新行。"ABC"
加载大写字母映射。"abc"
加载小写字母映射。"1#"
加载小写字母映射。
事件
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_1 至 LV_KEYBOARD_MODE_USER_4 | 用户定义模式 |
标签 Label (lv_label)
概述
标签是用于显示文本的基本对象类型。
部件和样式
LV_PART_MAIN
使用所有典型的背景属性和文本属性。可以使用填充值在文本和背景之间添加空间。LV_PART_SCROLLBAR
当文本大于控件大小时显示的滚动条。LV_PART_SELECTED
表示选中文本的样式。仅text_color
和bg_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_LONG_WRAP
换行太长的行。如果高度为LV_SIZE_CONTENT
,标签的高度将被扩展,否则文本将被剪裁。(默认)LV_LABEL_LONG_DOT
将标签右下角的最后3个字符替换为点(.)。LV_LABEL_LONG_SCROLL
如果文本宽度大于标签,水平滚动文本。如果高度大于标签,垂直滚动文本。仅一个方向滚动,水平滚动优先。LV_LABEL_LONG_SCROLL_CIRCULAR
如果文本宽度大于标签,连续水平滚动文本。如果高度大于标签,垂直滚动文本。仅一个方向滚动,水平滚动优先。LV_LABEL_LONG_CLIP
仅剪裁标签外的文本部分。
可以使用 lv_label_set_long_mode(label, LV_LABEL_LONG_…) 指定长文本模式。
请注意,LV_LABEL_LONG_DOT
就地修改文本缓冲区以添加/删除点。当使用lv_label_set_text()
或lv_label_set_array_text()
时,会分配一个单独的缓冲区,并且这个实现细节不会被注意到。这与lv_label_set_text_static()
不同。传递给lv_label_set_text_static()
的缓冲区必须是可写的,如果您计划使用LV_LABEL_LONG_DOT
。
文本选择
如果启用 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"); | |
换行 | 自动换行 | 使用 \n | lv_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); |
开关 | 打开LED | lv_led_on(led) | lv_led_on(led); |
关闭LED | lv_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_PART_MAIN
列表的主要部分,使用所有典型的背景属性LV_PART_SCROLLBAR
滚动条。详细信息请参阅基础对象文档。
按钮和文本 请参阅按钮和标签的文档。
使用方法
按钮
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 | - |
依赖项 | 启用 ThorVG | LV_USE_THORVG_INTERNAL 或 LV_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_HEADER_TOP_FIXED
标题栏固定在顶部。LV_MENU_HEADER_TOP_UNFIXED
标题栏位于顶部,可以滚动出视图。LV_MENU_HEADER_BOTTOM_FIXED
标题栏固定在底部。
可以使用 lv_menu_set_mode_header(menu, LV_MENU_HEADER…) 设置标题栏模式。
根返回按钮模式
存在以下根返回按钮模式:
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_cont_create(parent page) 创建一个新的空容器。
- lv_menu_section_create(parent page) 创建一个新的空部分。
- lv_menu_separator_create(parent page) 创建一个分隔符。
事件
LV_EVENT_VALUE_CHANGED
当显示一个页面时发送。- lv_menu_get_cur_main_page(menu) 返回当前在主区域显示的菜单页面的指针。
- lv_menu_get_cur_sidebar_page(menu) 返回当前在侧边栏显示的菜单页面的指针。
LV_EVENT_CLICKED
当点击主区域或侧边栏的标题栏中的返回按钮时发送。LV_OBJ_FLAG_EVENT_BUBBLE
在按钮上启用,因此可以向菜单本身添加事件。- lv_menu_back_button_is_root(menu, button) 检查按钮是否为根返回按钮。
请参见基础对象的事件。
了解更多关于事件的信息。
- lv_menu_back_button_is_root(menu, button) 检查按钮是否为根返回按钮。
按键
菜单控件不处理任何键。
了解更多关于键的信息。
总结
功能分类 | 功能描述 | 使用方法 | 示例代码 |
---|---|---|---|
部件和样式 | 主容器 | 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_CHANGED | lv_obj_add_event_cb(menu, event_cb, LV_EVENT_VALUE_CHANGED, NULL); |
点击返回按钮事件 | LV_EVENT_CLICKED | lv_obj_add_event_cb(menu, event_cb, LV_EVENT_CLICKED, NULL); | |
按键 | 不处理键事件 | - | - |
消息框 Message box (lv_msgbox)
概述
消息框充当弹出窗口。它们由背景容器、标题、可选的关闭按钮、文本和可选的按钮组成。
文本会自动换行,高度会自动设置以包含文本和按钮。
消息框可以是模态的(阻止点击屏幕的其他部分)或非模态的。
部件和样式
消息框由其他控件构建而成,因此你可以查看这些控件的文档以了解详情。
- 背景: lv_obj.h
- 关闭按钮: lv_button.h
- 标题和文本: lv_label.h
- 按钮: lv_buttonmatrix.h
用法
创建消息框
lv_msgbox_create(parent, title, txt, btn_txts[], add_close_btn) 用于创建消息框。
如果 parent
为 NULL
,消息框将是模态的。title
和 txt
是标题和文本的字符串。btn_txts[]
是一个包含按钮文本的数组。
例如:const char * btn_txts[] = {"Ok", "Cancel", NULL}
。add_close_btn
可以是 true
或 false
,用于添加或不添加关闭按钮。
获取部件
可以使用以下函数获取消息框的构建块:
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_EVENT_VALUE_CHANGED
当点击按钮时发送。LV_OBJ_FLAG_EVENT_BUBBLE
在按钮上启用,因此可以向消息框本身添加事件。在事件处理程序中,lv_event_get_target(e) 将返回按钮矩阵,lv_event_get_current_target(e) 将返回消息框。lv_msgbox_get_active_button(msgbox) 和 lv_msgbox_get_active_button_text(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_CHANGED | lv_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_EVENT_VALUE_CHANGED
:当选择一个新选项时发送。
参见 Base object 的事件。
了解更多关于 Events 的信息。
按键
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_CHANGED | lv_obj_add_event_cb(roller, event_cb, LV_EVENT_VALUE_CHANGED, NULL); |
按键 | 选择下一个选项 | LV_KEY_RIGHT 或 LV_KEY_DOWN | - |
选择上一个选项 | LV_KEY_LEFT 或 LV_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_label
为 true
显示标签,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_ITEMS
或 LV_PART_INDICATOR
,style_pointer 应指向一个全局或静态的 lv_style_t
变量。
对于标签,可以配置以下属性:
lv_style_set_text_font()
lv_style_set_text_color()
lv_style_set_text_letter_space()
lv_style_set_text_opa()
对于线条(主线、主要和次要刻度),可以配置以下属性:lv_style_set_line_color()
lv_style_set_line_width()
事件
该小部件不支持任何事件。
按键
该小部件不支持任何键。
总结
功能分类 | 功能描述 | 使用方法 | 示例代码 |
---|---|---|---|
部件和样式 | 主线样式 | 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_EVENT_VALUE_CHANGED
: 在拖动或使用键盘更改滑块值时发送。在拖动滑块时,该事件会持续发送。LV_EVENT_RELEASED
: 当滑块刚刚释放时发送。
请参阅进度条的事件了解更多信息。
了解更多关于事件的信息。
按键
LV_KEY_UP/RIGHT
: 将滑块值增加 1LV_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_CHANGED | lv_obj_add_event_cb(slider, event_cb, LV_EVENT_VALUE_CHANGED, NULL); |
释放事件 | LV_EVENT_RELEASED | lv_obj_add_event_cb(slider, event_cb, LV_EVENT_RELEASED, NULL); | |
按键 | 增加滑块值 | LV_KEY_UP/RIGHT | - |
减少滑块值 | LV_KEY_DOWN/LEFT | - |
Span (lv_span)
概述
spangroup
对象用于显示富文本。不同于标签对象,spangroup
可以使用不同的字体、颜色和大小来渲染文本。
部件和样式
LV_PART_MAIN
: 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可以设置为以下模式之一:
LV_TEXT_ALIGN_LEFT
: 左对齐。LV_TEXT_ALIGN_CENTER
: 居中对齐。LV_TEXT_ALIGN_RIGHT
: 右对齐。LV_TEXT_ALIGN_AUTO
: 自动对齐。
使用函数 lv_spangroup_set_align(spangroup, LV_TEXT_ALIGN_CENTER) 设置文本对齐方式。
模式
spangroup可以设置为以下模式之一:
LV_SPAN_MODE_FIXED
: 固定对象大小。LV_SPAN_MODE_EXPAND
: 将对象大小扩展到文本大小,但保持单行。LV_SPAN_MODE_BREAK
: 保持宽度,自动换行并扩展高度。
使用函数 lv_spangroup_set_mode(spangroup, LV_SPAN_MODE_BREAK) 设置对象模式。
溢出
spangroup可以设置为以下模式之一:
LV_SPAN_OVERFLOW_CLIP
: 在区域的限制处截断文本。LV_SPAN_OVERFLOW_ELLIPSIS
: 当文本溢出区域时显示省略号(...
)。
使用函数 lv_spangroup_set_overflow(spangroup, LV_SPAN_OVERFLOW_CLIP) 设置对象溢出模式。
首行缩进
使用函数 lv_spangroup_set_indent(spangroup, 20) 设置首行缩进。所有模式都支持像素单位,此外LV_SPAN_MODE_FIXED
和LV_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 | 获取指定索引的子span | lv_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_value(spinbox, 1234): 设置Spinbox的新值。
- lv_spinbox_increment(spinbox) 和 lv_spinbox_decrement(spinbox): 根据当前选定的数字增加或减少Spinbox的值。
- lv_spinbox_set_range(spinbox, -1000, 2500): 设置值的范围。如果通过
lv_spinbox_set_value()
、按键或lv_spinbox_increment/decrement
更改值,将遵守此范围。 - lv_spinbox_set_step(spinbox, 100): 设置增加/减少值时要更改的位数。只能设置10的倍数,不能设置3之类的。
- lv_spinbox_set_cursor_pos(spinbox, 1): 将光标设置到特定位置以更改增加/减少值。例如,位置’0’将光标设置到最不重要的数字。
如果使用编码器作为输入设备,每次点击编码器按钮时,选定的数字将默认向右移动。要将此行为更改为向左移动,可以使用lv_spinbox_set_digit_step_direction(spinbox, LV_DIR_LEFT)。
格式
lv_spinbox_set_digit_format(spinbox, digit_count, separator_position): 设置数字格式。digit_count
是不包括小数点和符号的数字位数。separator_position
是小数点前的数字位数。如果为0,则不显示小数点。
循环模式
lv_spinbox_set_rollover(spinbox, true / false): 启用/禁用循环模式。如果启用了循环模式并达到了最小值或最大值,值将更改为另一个极限。如果禁用了循环模式,值将保持在最小值或最大值。
事件
LV_EVENT_VALUE_CHANGED
: 当值发生变化时发送。
查看文本区域的事件。
了解更多关于事件的信息。
按键
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_CHANGED | lv_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 | 创建Spinner | lv_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_EVENT_VALUE_CHANGED
当Switch改变状态时发送。
请参阅基础对象的事件。
了解更多关于事件的信息。
按键
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); |
打开Switch | lv_obj_add_state(obj, LV_STATE_CHECKED) | lv_obj_add_state(switch, LV_STATE_CHECKED); | |
关闭Switch | lv_obj_remove_state(obj, LV_STATE_CHECKED) | lv_obj_remove_state(switch, LV_STATE_CHECKED); | |
事件 | 值改变事件 | LV_EVENT_VALUE_CHANGED | lv_obj_add_event_cb(switch, event_cb, LV_EVENT_VALUE_CHANGED, NULL); |
按键 | 打开Switch | LV_KEY_UP 或 LV_KEY_RIGHT | - |
关闭Switch | LV_KEY_DOWN 或 LV_KEY_LEFT | - | |
切换Switch | LV_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变得可滚动。
事件
LV_EVENT_VALUE_CHANGED
当使用按键选择新单元格时发送。
参见基础对象的事件。
了解更多关于事件的信息。
按键
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_CHANGED | lv_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.h 和 lv_button.h
- 标签容器:lv_obj.h
- 标签内容:lv_obj.h
标签按钮可以位于标签视图的顶部、底部、左侧或右侧。
可以通过点击标签按钮或水平滑动内容来选择一个新标签。
部件和样式
标签视图没有特殊部件,但使用了 lv_obj
和 lv_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_active(tabview, id, LV_ANIM_ON) 函数
设置标签栏位置
使用 lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT / RIGHT / TOP / BOTTOM) 可以将标签栏移动到任意一侧。
设置标签栏大小
标签栏的大小可以通过 lv_tabview_set_tab_bar_size(tabview, size) 调整。垂直排列时表示标签栏的高度,水平排列时表示宽度。
获取部件
- lv_tabview_get_content(tabview) 返回标签内容的容器
- lv_tabview_get_tab_bar(tabview) 返回标签按钮的容器
事件
LV_EVENT_VALUE_CHANGED
当通过滑动或点击标签按钮选择新标签时触发。lv_tabview_get_tab_active(tabview) 返回当前标签的从零开始的索引。
了解更多关于 事件 的信息。
按键
按键仅对标签按钮有效。如有需要,请手动添加到组中。
了解更多关于 按键 的信息。
总结
功能分类 | 功能描述 | 使用方法 | 示例代码 |
---|---|---|---|
创建标签视图 | 创建新的标签视图 | 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_CHANGED | lv_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_color
和bg_color
样式属性。bg_color
应直接设置在文本区域的标签上。LV_PART_CURSOR
:标记插入字符的位置。光标区域始终是当前字符的边界框。可以通过向LV_PART_CURSOR
的样式添加背景色和背景不透明度来创建块光标。创建行光标时,将光标设置为透明并设置左边框。anim_time
样式属性设置光标的闪烁时间。LV_PART_TEXTAREA_PLACEHOLDER
:仅文本区域独有,用于样式化占位符文本。
使用方法
添加文本
可以在当前光标位置插入文本或字符:
- lv_textarea_add_char(textarea, ‘c’)
- lv_textarea_add_text(textarea, “插入此文本”)
要添加宽字符如'á'
、'ß'
或 CJK 字符使用 lv_textarea_add_text(ta, “á”)。
lv_textarea_set_text(ta, “新文本”) 更改整个文本。
占位符
可以指定一个占位符文本
- 当文本区域为空时显示
- 使用 lv_textarea_set_placeholder_text(ta, “占位符文本”)
删除字符
使用 lv_textarea_delete_char(textarea) 删除当前光标位置左侧的字符。
使用 lv_textarea_delete_char_forward(textarea) 删除右侧的字符。
移动光标
光标位置可以直接修改,如 lv_textarea_set_cursor_pos(textarea, 10)。位置 0
表示“在第一个字符之前”,LV_TA_CURSOR_LAST
表示“在最后一个字符之后”。
你可以用以下方法移动光标:
- lv_textarea_cursor_right(textarea)
- lv_textarea_cursor_left(textarea)
- lv_textarea_cursor_up(textarea)
- lv_textarea_cursor_down(textarea)
如果应用 lv_textarea_set_cursor_click_pos(textarea, true),光标将跳到文本区域被点击的位置。
隐藏光标
光标始终可见,但可以通过将其样式设置为仅在 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_EVENT_INSERT
在插入字符或文本之前发送。事件参数是即将插入的文本。 lv_textarea_set_insert_replace(textarea, “新文本”) 替换要插入的文本。新文本不能在事件回调存在时销毁的局部变量中。""
表示不插入任何内容。LV_EVENT_VALUE_CHANGED
当文本区域的内容更改时发送。LV_EVENT_READY
当LV_KEY_ENTER
被按下(或发送)到单行文本区域时发送。
请参阅 基础对象 的事件。
了解更多关于 事件 的信息。
按键
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_INSERT | lv_obj_add_event_cb(textarea, event_cb, LV_EVENT_INSERT, NULL); |
内容改变时发送 | LV_EVENT_VALUE_CHANGED | lv_obj_add_event_cb(textarea, event_cb, LV_EVENT_VALUE_CHANGED, NULL); | |
LV_KEY_ENTER 被按下时发送 | LV_EVENT_READY | lv_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_EVENT_VALUE_CHANGED
当通过滚动加载新瓷砖时发送。lv_tileview_get_tile_active(tabview) 可以用于获取当前瓷砖。
按键
按键 不由瓷砖视图处理。
了解更多关于 按键 的信息。
总结
功能分类 | 功能描述 | 使用方法 | 示例代码 |
---|---|---|---|
部件和样式 | 主样式 | 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_CHANGED | lv_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_obj.h
- 背景上的头部:lv_obj.h
- 头部上的标题:lv_label.h
- 头部上的按钮:lv_button.h
- 背景上的内容区域:lv_obj.h
使用方法
创建窗口
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); |
按键 | 不处理按键 | - | - |