滚动¶
概述¶
在 LVGL 中，滚动的工作方式非常直观：如果一个对象超出了其父对象的内容区域（不包括内边距的大小），父对象将变为可滚动，并显示滚动条。就是这么简单。
任何对象都可以是可滚动的，包括 lv_obj_t、lv_img、lv_btn、lv_meter 等。
对象可以在一次操作中水平或垂直滚动；但不支持对角线滚动。
滚动条¶
模式¶
滚动条根据配置的 mode 显示。以下是可用的 mode：
LV_SCROLLBAR_MODE_OFF从不显示滚动条LV_SCROLLBAR_MODE_ON始终显示滚动条LV_SCROLLBAR_MODE_ACTIVE在对象滚动时显示滚动条LV_SCROLLBAR_MODE_AUTO当内容足够大以至于可以滚动时显示滚动条
lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_...) 用于设置对象的滚动条模式。
样式¶
滚动条有一个专用部分，称为 LV_PART_SCROLLBAR。例如，可以将滚动条设置为红色，如下所示：
static lv_style_t style_red;
lv_style_init(&style_red);
lv_style_set_bg_color(&style_red, lv_color_red());
...
lv_obj_add_style(obj, &style_red, LV_PART_SCROLLBAR);
当对象正在滚动时，它会进入 LV_STATE_SCROLLED 状态。这允许在滚动时为滚动条或对象本身添加不同的样式。
以下代码在对象滚动时将滚动条设置为蓝色：
static lv_style_t style_blue;
lv_style_init(&style_blue);
lv_style_set_bg_color(&style_blue, lv_color_blue());
...
lv_obj_add_style(obj, &style_blue, LV_STATE_SCROLLED | LV_PART_SCROLLBAR);
如果 LV_PART_SCROLLBAR 的基本方向为 RTL（LV_BASE_DIR_RTL），则垂直滚动条将放置在左侧。
请注意，base_dir 样式属性是继承的。因此，可以直接在对象的 LV_PART_SCROLLBAR 部分上设置，也可以在对象或任何父对象的主部分上设置，以使滚动条继承基本方向。
pad_left/right/top/bottom 设置滚动条周围的间距，而 width 设置滚动条的宽度。
事件¶
以下事件与滚动相关：
LV_EVENT_SCROLL_BEGIN滚动开始。事件参数为NULL或一个可修改的滚动动画描述符lv_anim_t *。LV_EVENT_SCROLL_END滚动结束。LV_EVENT_SCROLL发生滚动。每次位置更改时触发。
基本示例¶
TODO
滚动功能¶
除了管理“正常”滚动外，还有许多有趣且实用的附加功能。
可滚动¶
可以使用 lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE) 将对象设置为不可滚动。
不可滚动的对象仍然可以将滚动（链）传播到其父对象。
可以通过 lv_obj_set_scroll_dir(obj, LV_DIR_...) 控制滚动发生的方向。
方向的可能值如下：
LV_DIR_TOP仅向上滚动LV_DIR_LEFT仅向左滚动LV_DIR_BOTTOM仅向下滚动LV_DIR_RIGHT仅向右滚动LV_DIR_HOR仅水平滚动LV_DIR_VER仅垂直滚动LV_DIR_ALL任意方向滚动
也可以使用 OR 运算符组合值。例如，LV_DIR_TOP | LV_DIR_LEFT。
滚动链¶
如果一个对象无法进一步滚动（例如，其内容已到达最底部位置），额外的滚动将传播到其父对象。如果父对象可以在该方向上滚动，则它将被滚动。 这种传播会继续传递到祖父对象和曾祖父对象。
滚动传播称为“滚动链”，可以通过 LV_OBJ_FLAG_SCROLL_CHAIN_HOR/VER 标志启用/禁用。
如果禁用链，传播将在对象上停止，父对象将不会滚动。
滚动惯性¶
当用户滚动一个对象并释放它时，LVGL 可以模拟滚动的惯性动量。就像对象被抛出一样，滚动会平滑地减速。
可以通过 LV_OBJ_FLAG_SCROLL_MOMENTUM 标志启用/禁用滚动惯性。
弹性滚动¶
通常，一个对象无法滚动超过其内容的极限。例如，内容的顶部不能低于对象的顶部。
但是，使用 LV_OBJ_FLAG_SCROLL_ELASTIC，当用户“过度滚动”内容时，会添加一个有趣的效果。滚动会减速，内容可以滚动到对象内部。
当释放对象时，滚动到对象内部的内容将通过动画返回到有效位置。
对齐¶
对象的子对象在滚动结束时可以根据特定规则对齐。可以通过 LV_OBJ_FLAG_SNAPPABLE 标志单独设置子对象为可对齐。
对象可以以四种方式对齐子对象：
LV_SCROLL_SNAP_NONE禁用对齐。（默认）LV_SCROLL_SNAP_START将子对象对齐到滚动对象的左/顶部LV_SCROLL_SNAP_END将子对象对齐到滚动对象的右/底部LV_SCROLL_SNAP_CENTER将子对象对齐到滚动对象的中心
对齐方式通过 lv_obj_set_scroll_snap_x/y(obj, LV_SCROLL_SNAP_...) 设置：
其工作原理如下：
用户滚动一个对象并释放屏幕
LVGL 计算滚动惯性结束的位置
LVGL 找到最近的对齐点
LVGL 通过动画滚动到对齐点
单次滚动¶
“单次滚动”功能允许 LVGL 每次仅滚动一个可对齐的子对象。
这需要将子对象设置为可对齐，并设置一个不同于 LV_SCROLL_SNAP_NONE 的对齐方式。
可以通过 LV_OBJ_FLAG_SCROLL_ONE 标志启用此功能。
聚焦时滚动¶
想象一下，在一个组中有许多对象，这些对象位于一个可滚动对象上。按下“Tab”按钮会聚焦到下一个对象，但它可能位于可滚动对象的可见区域之外。 如果启用了“聚焦时滚动”功能，LVGL 将自动滚动对象以使其子对象进入视图。 滚动是递归进行的，因此即使是嵌套的可滚动对象也能正确处理。 即使对象位于选项卡视图的不同页面上，也会滚动到视图中。
手动滚动¶
以下 API 函数允许手动滚动对象：
lv_obj_scroll_by(obj, x, y, LV_ANIM_ON/OFF)按x和y值滚动lv_obj_scroll_to(obj, x, y, LV_ANIM_ON/OFF)滚动以将给定坐标带到左上角lv_obj_scroll_to_x(obj, x, LV_ANIM_ON/OFF)滚动以将给定坐标带到左侧lv_obj_scroll_to_y(obj, y, LV_ANIM_ON/OFF)滚动以将给定坐标带到顶部
有时您可能需要检索元素的滚动位置，以便稍后恢复它，或者根据当前滚动动态显示一些元素。 以下是一个示例，展示如何结合滚动事件和存储滚动顶部位置：
static int scroll_value = 0;
static void store_scroll_value_event_cb(lv_event_t* e) {
lv_obj_t* screen = lv_event_get_target(e);
scroll_value = lv_obj_get_scroll_top(screen);
printf("%d pixels are scrolled out on the top\n", scroll_value);
}
lv_obj_t* container = lv_obj_create(NULL);
lv_obj_add_event_cb(container, store_scroll_value_event_cb, LV_EVENT_SCROLL, NULL);
可以通过以下函数从不同轴检索滚动坐标：
lv_obj_get_scroll_x(obj)获取对象的x坐标lv_obj_get_scroll_y(obj)获取对象的y坐标lv_obj_get_scroll_top(obj)获取顶部的滚动坐标lv_obj_get_scroll_bottom(obj)获取底部的滚动坐标lv_obj_get_scroll_left(obj)获取左侧的滚动坐标lv_obj_get_scroll_right(obj)获取右侧的滚动坐标
自身大小¶
自身大小是对象的一个属性。通常，用户不应使用此参数，但如果创建了自定义小部件，它可能会很有用。
简而言之，自身大小确定对象内容的大小。为了更好地理解这一点，请以表格为例。 假设它有 10 行，每行 50 像素高。因此，内容的总高度为 500 像素。换句话说，“自身高度”为 500 像素。 如果用户仅为表格设置 200 像素的高度，LVGL 将看到自身大小更大，并使表格可滚动。
这意味着不仅子对象可以使对象可滚动，更大的自身大小也会使其可滚动。
LVGL 使用 LV_EVENT_GET_SELF_SIZE 事件获取对象的自身大小。以下是一个示例，展示如何处理该事件：
if(event_code == LV_EVENT_GET_SELF_SIZE) {
lv_point_t * p = lv_event_get_param(e);
//如果 x 或 y < 0，则现在不需要计算
if(p->x >= 0) {
p->x = 200; //设置或计算自身宽度
}
if(p->y >= 0) {
p->y = 50; //设置或计算自身高度
}
}
示例¶
嵌套滚动¶
C code
GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
/**
* Demonstrate how scrolling appears automatically
*/
void lv_example_scroll_1(void)
{
/*Create an object with the new style*/
lv_obj_t * panel = lv_obj_create(lv_scr_act());
lv_obj_set_size(panel, 200, 200);
lv_obj_center(panel);
lv_obj_t * child;
lv_obj_t * label;
child = lv_obj_create(panel);
lv_obj_set_pos(child, 0, 0);
lv_obj_set_size(child, 70, 70);
label = lv_label_create(child);
lv_label_set_text(label, "Zero");
lv_obj_center(label);
child = lv_obj_create(panel);
lv_obj_set_pos(child, 160, 80);
lv_obj_set_size(child, 80, 80);
lv_obj_t * child2 = lv_btn_create(child);
lv_obj_set_size(child2, 100, 50);
label = lv_label_create(child2);
lv_label_set_text(label, "Right");
lv_obj_center(label);
child = lv_obj_create(panel);
lv_obj_set_pos(child, 40, 160);
lv_obj_set_size(child, 100, 70);
label = lv_label_create(child);
lv_label_set_text(label, "Bottom");
lv_obj_center(label);
}
#endif
#
# Demonstrate how scrolling appears automatically
#
# Create an object with the new style
panel = lv.obj(lv.scr_act())
panel.set_size(200, 200)
panel.center()
child = lv.obj(panel)
child.set_pos(0, 0)
label = lv.label(child)
label.set_text("Zero")
label.center()
child = lv.obj(panel)
child.set_pos(-40, 100)
label = lv.label(child)
label.set_text("Left")
label.center()
child = lv.obj(panel)
child.set_pos(90, -30)
label = lv.label(child)
label.set_text("Top")
label.center()
child = lv.obj(panel)
child.set_pos(150, 80)
label = lv.label(child)
label.set_text("Right")
label.center()
child = lv.obj(panel)
child.set_pos(60, 170)
label = lv.label(child)
label.set_text("Bottom")
label.center()
捕捉滚动¶
C code
GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
static void sw_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * sw = lv_event_get_target(e);
if(code == LV_EVENT_VALUE_CHANGED) {
lv_obj_t * list = lv_event_get_user_data(e);
if(lv_obj_has_state(sw, LV_STATE_CHECKED)) lv_obj_add_flag(list, LV_OBJ_FLAG_SCROLL_ONE);
else lv_obj_clear_flag(list, LV_OBJ_FLAG_SCROLL_ONE);
}
}
/**
* Show an example to scroll snap
*/
void lv_example_scroll_2(void)
{
lv_obj_t * panel = lv_obj_create(lv_scr_act());
lv_obj_set_size(panel, 280, 120);
lv_obj_set_scroll_snap_x(panel, LV_SCROLL_SNAP_CENTER);
lv_obj_set_flex_flow(panel, LV_FLEX_FLOW_ROW);
lv_obj_align(panel, LV_ALIGN_CENTER, 0, 20);
uint32_t i;
for(i = 0; i < 10; i++) {
lv_obj_t * btn = lv_btn_create(panel);
lv_obj_set_size(btn, 150, lv_pct(100));
lv_obj_t * label = lv_label_create(btn);
if(i == 3) {
lv_label_set_text_fmt(label, "Panel %"LV_PRIu32"\nno snap", i);
lv_obj_clear_flag(btn, LV_OBJ_FLAG_SNAPPABLE);
}
else {
lv_label_set_text_fmt(label, "Panel %"LV_PRIu32, i);
}
lv_obj_center(label);
}
lv_obj_update_snap(panel, LV_ANIM_ON);
#if LV_USE_SWITCH
/*Switch between "One scroll" and "Normal scroll" mode*/
lv_obj_t * sw = lv_switch_create(lv_scr_act());
lv_obj_align(sw, LV_ALIGN_TOP_RIGHT, -20, 10);
lv_obj_add_event_cb(sw, sw_event_cb, LV_EVENT_ALL, panel);
lv_obj_t * label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "One scroll");
lv_obj_align_to(label, sw, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
#endif
}
#endif
def sw_event_cb(e,panel):
code = e.get_code()
sw = e.get_target()
if code == lv.EVENT.VALUE_CHANGED:
if sw.has_state(lv.STATE.CHECKED):
panel.add_flag(lv.obj.FLAG.SCROLL_ONE)
else:
panel.clear_flag(lv.obj.FLAG.SCROLL_ONE)
#
# Show an example to scroll snap
#
panel = lv.obj(lv.scr_act())
panel.set_size(280, 150)
panel.set_scroll_snap_x(lv.SCROLL_SNAP.CENTER)
panel.set_flex_flow(lv.FLEX_FLOW.ROW)
panel.center()
for i in range(10):
btn = lv.btn(panel)
btn.set_size(150, 100)
label = lv.label(btn)
if i == 3:
label.set_text("Panel {:d}\nno snap".format(i))
btn.clear_flag(lv.obj.FLAG.SNAPPABLE)
else:
label.set_text("Panel {:d}".format(i))
label.center()
panel.update_snap(lv.ANIM.ON)
# Switch between "One scroll" and "Normal scroll" mode
sw = lv.switch(lv.scr_act())
sw.align(lv.ALIGN.TOP_RIGHT, -20, 10)
sw.add_event_cb(lambda evt: sw_event_cb(evt,panel), lv.EVENT.ALL, None)
label = lv.label(lv.scr_act())
label.set_text("One scroll")
label.align_to(sw, lv.ALIGN.OUT_BOTTOM_MID, 0, 5)
浮动按钮¶
C code
GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LIST
static uint32_t btn_cnt = 1;
static void float_btn_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * float_btn = lv_event_get_target(e);
if(code == LV_EVENT_CLICKED) {
lv_obj_t * list = lv_event_get_user_data(e);
char buf[32];
lv_snprintf(buf, sizeof(buf), "Track %d", (int)btn_cnt);
lv_obj_t * list_btn = lv_list_add_btn(list, LV_SYMBOL_AUDIO, buf);
btn_cnt++;
lv_obj_move_foreground(float_btn);
lv_obj_scroll_to_view(list_btn, LV_ANIM_ON);
}
}
/**
* Create a list with a floating button
*/
void lv_example_scroll_3(void)
{
lv_obj_t * list = lv_list_create(lv_scr_act());
lv_obj_set_size(list, 280, 220);
lv_obj_center(list);
for(btn_cnt = 1; btn_cnt <= 2; btn_cnt++) {
char buf[32];
lv_snprintf(buf, sizeof(buf), "Track %d", (int)btn_cnt);
lv_list_add_btn(list, LV_SYMBOL_AUDIO, buf);
}
lv_obj_t * float_btn = lv_btn_create(list);
lv_obj_set_size(float_btn, 50, 50);
lv_obj_add_flag(float_btn, LV_OBJ_FLAG_FLOATING);
lv_obj_align(float_btn, LV_ALIGN_BOTTOM_RIGHT, 0, -lv_obj_get_style_pad_right(list, LV_PART_MAIN));
lv_obj_add_event_cb(float_btn, float_btn_event_cb, LV_EVENT_ALL, list);
lv_obj_set_style_radius(float_btn, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_bg_img_src(float_btn, LV_SYMBOL_PLUS, 0);
lv_obj_set_style_text_font(float_btn, lv_theme_get_font_large(float_btn), 0);
}
#endif
class ScrollExample_3():
def __init__(self):
self.btn_cnt = 1
#
# Create a list with a floating button
#
list = lv.list(lv.scr_act())
list.set_size(280, 220)
list.center()
for btn_cnt in range(2):
list.add_btn(lv.SYMBOL.AUDIO,"Track {:d}".format(btn_cnt))
float_btn = lv.btn(list)
float_btn.set_size(50, 50)
float_btn.add_flag(lv.obj.FLAG.FLOATING)
float_btn.align(lv.ALIGN.BOTTOM_RIGHT, 0, -list.get_style_pad_right(lv.PART.MAIN))
float_btn.add_event_cb(lambda evt: self.float_btn_event_cb(evt,list), lv.EVENT.ALL, None)
float_btn.set_style_radius(lv.RADIUS.CIRCLE, 0)
float_btn.set_style_bg_img_src(lv.SYMBOL.PLUS, 0)
float_btn.set_style_text_font(lv.theme_get_font_large(float_btn), 0)
def float_btn_event_cb(self,e,list):
code = e.get_code()
float_btn = e.get_target()
if code == lv.EVENT.CLICKED:
list_btn = list.add_btn(lv.SYMBOL.AUDIO, "Track {:d}".format(self.btn_cnt))
self.btn_cnt += 1
float_btn.move_foreground()
list_btn.scroll_to_view(lv.ANIM.ON)
scroll_example_3 = ScrollExample_3()
滚动条样式¶
C code
GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LIST
/**
* Styling the scrollbars
*/
void lv_example_scroll_4(void)
{
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_set_size(obj, 200, 100);
lv_obj_center(obj);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text(label,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n"
"Etiam dictum, tortor vestibulum lacinia laoreet, mi neque consectetur neque, vel mattis odio dolor egestas ligula. \n"
"Sed vestibulum sapien nulla, id convallis ex porttitor nec. \n"
"Duis et massa eu libero accumsan faucibus a in arcu. \n"
"Ut pulvinar odio lorem, vel tempus turpis condimentum quis. Nam consectetur condimentum sem in auctor. \n"
"Sed nisl augue, venenatis in blandit et, gravida ac tortor. \n"
"Etiam dapibus elementum suscipit. \n"
"Proin mollis sollicitudin convallis. \n"
"Integer dapibus tempus arcu nec viverra. \n"
"Donec molestie nulla enim, eu interdum velit placerat quis. \n"
"Donec id efficitur risus, at molestie turpis. \n"
"Suspendisse vestibulum consectetur nunc ut commodo. \n"
"Fusce molestie rhoncus nisi sit amet tincidunt. \n"
"Suspendisse a nunc ut magna ornare volutpat.");
/*Remove the style of scrollbar to have clean start*/
lv_obj_remove_style(obj, NULL, LV_PART_SCROLLBAR | LV_STATE_ANY);
/*Create a transition the animate the some properties on state change*/
static const lv_style_prop_t props[] = {LV_STYLE_BG_OPA, LV_STYLE_WIDTH, 0};
static lv_style_transition_dsc_t trans;
lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 200, 0, NULL);
/*Create a style for the scrollbars*/
static lv_style_t style;
lv_style_init(&style);
lv_style_set_width(&style, 4); /*Width of the scrollbar*/
lv_style_set_pad_right(&style, 5); /*Space from the parallel side*/
lv_style_set_pad_top(&style, 5); /*Space from the perpendicular side*/
lv_style_set_radius(&style, 2);
lv_style_set_bg_opa(&style, LV_OPA_70);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_border_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_border_width(&style, 2);
lv_style_set_shadow_width(&style, 8);
lv_style_set_shadow_spread(&style, 2);
lv_style_set_shadow_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 1));
lv_style_set_transition(&style, &trans);
/*Make the scrollbars wider and use 100% opacity when scrolled*/
static lv_style_t style_scrolled;
lv_style_init(&style_scrolled);
lv_style_set_width(&style_scrolled, 8);
lv_style_set_bg_opa(&style_scrolled, LV_OPA_COVER);
lv_obj_add_style(obj, &style, LV_PART_SCROLLBAR);
lv_obj_add_style(obj, &style_scrolled, LV_PART_SCROLLBAR | LV_STATE_SCROLLED);
}
#endif
#
# Styling the scrollbars
#
obj = lv.obj(lv.scr_act())
obj.set_size(200, 100)
obj.center()
label = lv.label(obj)
label.set_text(
"""
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam dictum, tortor vestibulum lacinia laoreet, mi neque consectetur neque, vel mattis odio dolor egestas ligula.
Sed vestibulum sapien nulla, id convallis ex porttitor nec.
Duis et massa eu libero accumsan faucibus a in arcu.
Ut pulvinar odio lorem, vel tempus turpis condimentum quis. Nam consectetur condimentum sem in auctor.
Sed nisl augue, venenatis in blandit et, gravida ac tortor.
Etiam dapibus elementum suscipit.
Proin mollis sollicitudin convallis.
Integer dapibus tempus arcu nec viverra.
Donec molestie nulla enim, eu interdum velit placerat quis.
Donec id efficitur risus, at molestie turpis.
Suspendisse vestibulum consectetur nunc ut commodo.
Fusce molestie rhoncus nisi sit amet tincidunt.
Suspendisse a nunc ut magna ornare volutpat.
""")
# Remove the style of scrollbar to have clean start
obj.remove_style(None, lv.PART.SCROLLBAR | lv.STATE.ANY)
# Create a transition the animate the some properties on state change
props = [lv.STYLE.BG_OPA, lv.STYLE.WIDTH, 0]
trans = lv.style_transition_dsc_t()
trans.init(props, lv.anim_t.path_linear, 200, 0, None)
# Create a style for the scrollbars
style = lv.style_t()
style.init()
style.set_width(4) # Width of the scrollbar
style.set_pad_right(5) # Space from the parallel side
style.set_pad_top(5) # Space from the perpendicular side
style.set_radius(2)
style.set_bg_opa(lv.OPA._70)
style.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
style.set_border_color(lv.palette_darken(lv.PALETTE.BLUE, 3))
style.set_border_width(2)
style.set_shadow_width(8)
style.set_shadow_spread(2)
style.set_shadow_color(lv.palette_darken(lv.PALETTE.BLUE, 1))
style.set_transition(trans)
# Make the scrollbars wider and use 100% opacity when scrolled
style_scrolled = lv.style_t()
style_scrolled.init()
style_scrolled.set_width(8)
style_scrolled.set_bg_opa(lv.OPA.COVER)
obj.add_style(style, lv.PART.SCROLLBAR)
obj.add_style(style_scrolled, lv.PART.SCROLLBAR | lv.STATE.SCROLLED)
从右到左滚动¶
C code
GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_FONT_DEJAVU_16_PERSIAN_HEBREW
/**
* Scrolling with Right To Left base direction
*/
void lv_example_scroll_5(void)
{
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_set_style_base_dir(obj, LV_BASE_DIR_RTL, 0);
lv_obj_set_size(obj, 200, 100);
lv_obj_center(obj);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text(label,
"میکروکُنترولر (به انگلیسی: Microcontroller) گونهای ریزپردازنده است که دارای حافظهٔ دسترسی تصادفی (RAM) و حافظهٔ فقطخواندنی (ROM)، تایمر، پورتهای ورودی و خروجی (I/O) و درگاه ترتیبی (Serial Port پورت سریال)، درون خود تراشه است، و میتواند به تنهایی ابزارهای دیگر را کنترل کند. به عبارت دیگر یک میکروکنترلر، مدار مجتمع کوچکی است که از یک CPU کوچک و اجزای دیگری مانند تایمر، درگاههای ورودی و خروجی آنالوگ و دیجیتال و حافظه تشکیل شدهاست.");
lv_obj_set_width(label, 400);
lv_obj_set_style_text_font(label, &lv_font_dejavu_16_persian_hebrew, 0);
}
#endif
#
# Scrolling with Right To Left base direction
#
obj = lv.obj(lv.scr_act())
obj.set_style_base_dir(lv.BASE_DIR.RTL, 0)
obj.set_size(200, 100)
obj.center()
label = lv.label(obj)
label.set_text("میکروکُنترولر (به انگلیسی: Microcontroller) گونهای ریزپردازنده است که دارای حافظهٔ دسترسی تصادفی (RAM) و حافظهٔ فقطخواندنی (ROM)، تایمر، پورتهای ورودی و خروجی (I/O) و درگاه ترتیبی (Serial Port پورت سریال)، درون خود تراشه است، و میتواند به تنهایی ابزارهای دیگر را کنترل کند. به عبارت دیگر یک میکروکنترلر، مدار مجتمع کوچکی است که از یک CPU کوچک و اجزای دیگری مانند تایمر، درگاههای ورودی و خروجی آنالوگ و دیجیتال و حافظه تشکیل شدهاست.")
label.set_width(400)
label.set_style_text_font(lv.font_dejavu_16_persian_hebrew, 0)
滚动时平移¶
C code
GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
static void scroll_event_cb(lv_event_t * e)
{
lv_obj_t * cont = lv_event_get_target(e);
lv_area_t cont_a;
lv_obj_get_coords(cont, &cont_a);
lv_coord_t cont_y_center = cont_a.y1 + lv_area_get_height(&cont_a) / 2;
lv_coord_t r = lv_obj_get_height(cont) * 7 / 10;
uint32_t i;
uint32_t child_cnt = lv_obj_get_child_cnt(cont);
for(i = 0; i < child_cnt; i++) {
lv_obj_t * child = lv_obj_get_child(cont, i);
lv_area_t child_a;
lv_obj_get_coords(child, &child_a);
lv_coord_t child_y_center = child_a.y1 + lv_area_get_height(&child_a) / 2;
lv_coord_t diff_y = child_y_center - cont_y_center;
diff_y = LV_ABS(diff_y);
/*Get the x of diff_y on a circle.*/
lv_coord_t x;
/*If diff_y is out of the circle use the last point of the circle (the radius)*/
if(diff_y >= r) {
x = r;
}
else {
/*Use Pythagoras theorem to get x from radius and y*/
uint32_t x_sqr = r * r - diff_y * diff_y;
lv_sqrt_res_t res;
lv_sqrt(x_sqr, &res, 0x8000); /*Use lvgl's built in sqrt root function*/
x = r - res.i;
}
/*Translate the item by the calculated X coordinate*/
lv_obj_set_style_translate_x(child, x, 0);
/*Use some opacity with larger translations*/
lv_opa_t opa = lv_map(x, 0, r, LV_OPA_TRANSP, LV_OPA_COVER);
lv_obj_set_style_opa(child, LV_OPA_COVER - opa, 0);
}
}
/**
* Translate the object as they scroll
*/
void lv_example_scroll_6(void)
{
lv_obj_t * cont = lv_obj_create(lv_scr_act());
lv_obj_set_size(cont, 200, 200);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
lv_obj_add_event_cb(cont, scroll_event_cb, LV_EVENT_SCROLL, NULL);
lv_obj_set_style_radius(cont, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_clip_corner(cont, true, 0);
lv_obj_set_scroll_dir(cont, LV_DIR_VER);
lv_obj_set_scroll_snap_y(cont, LV_SCROLL_SNAP_CENTER);
lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF);
uint32_t i;
for(i = 0; i < 20; i++) {
lv_obj_t * btn = lv_btn_create(cont);
lv_obj_set_width(btn, lv_pct(100));
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text_fmt(label, "Button %"LV_PRIu32, i);
}
/*Update the buttons position manually for first*/
lv_event_send(cont, LV_EVENT_SCROLL, NULL);
/*Be sure the fist button is in the middle*/
lv_obj_scroll_to_view(lv_obj_get_child(cont, 0), LV_ANIM_OFF);
}
#endif
def scroll_event_cb(e):
cont = e.get_target()
cont_a = lv.area_t()
cont.get_coords(cont_a)
cont_y_center = cont_a.y1 + cont_a.get_height() // 2
r = cont.get_height() * 7 // 10
child_cnt = cont.get_child_cnt()
for i in range(child_cnt):
child = cont.get_child(i)
child_a = lv.area_t()
child.get_coords(child_a)
child_y_center = child_a.y1 + child_a.get_height() // 2
diff_y = child_y_center - cont_y_center
diff_y = abs(diff_y)
# Get the x of diff_y on a circle.
# If diff_y is out of the circle use the last point of the circle (the radius)
if diff_y >= r:
x = r
else:
# Use Pythagoras theorem to get x from radius and y
x_sqr = r * r - diff_y * diff_y
res = lv.sqrt_res_t()
lv.sqrt(x_sqr, res, 0x8000) # Use lvgl's built in sqrt root function
x = r - res.i
# Translate the item by the calculated X coordinate
child.set_style_translate_x(x, 0)
# Use some opacity with larger translations
opa = lv.map(x, 0, r, lv.OPA.TRANSP, lv.OPA.COVER)
child.set_style_opa(lv.OPA.COVER - opa, 0)
#
# Translate the object as they scroll
#
cont = lv.obj(lv.scr_act())
cont.set_size(200, 200)
cont.center()
cont.set_flex_flow(lv.FLEX_FLOW.COLUMN)
cont.add_event_cb(scroll_event_cb, lv.EVENT.SCROLL, None)
cont.set_style_radius(lv.RADIUS.CIRCLE, 0)
cont.set_style_clip_corner(True, 0)
cont.set_scroll_dir(lv.DIR.VER)
cont.set_scroll_snap_y(lv.SCROLL_SNAP.CENTER)
cont.set_scrollbar_mode(lv.SCROLLBAR_MODE.OFF)
for i in range(20):
btn = lv.btn(cont)
btn.set_width(lv.pct(100))
label = lv.label(btn)
label.set_text("Button " + str(i))
# Update the buttons position manually for first*
lv.event_send(cont, lv.EVENT.SCROLL, None)
# Be sure the fist button is in the middle
#lv.obj.scroll_to_view(cont.get_child(0), lv.ANIM.OFF)
cont.get_child(0).scroll_to_view(lv.ANIM.OFF)