Page
When the control content is too large to be fully displayed on the screen, it can be displayed 页面 within it .
Sample code
page = lvgl.page_create(lvgl.scr_act(), nil)
lvgl.obj_set_size(page, 150, 200)
lvgl.obj_align(page, nil, lvgl.ALIGN_CENTER, 0, 0)
label = lvgl.label_create(page, nil)
lvgl.label_set_long_mode(label, lvgl.LABEL_LONG_BREAK)
lvgl.obj_set_width(label, lvgl.page_get_width_fit(page))
lvgl.label_set_text(label,
[[Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nila pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.]])
create
lvgl.page_create A page can be created through functions
page = lvgl.page_create(lvgl.scr_act(), nil)
Add content
The page object can set the matching mode in each direction just like the container. The objects that need to be displayed can be added to the page for display. The page can be used as the parent container of the control. Like below, a tag is added to the page.
label = lvgl.label_create(page, nil)
scroll bar
The scroll bar of the page can lvgl.page_set_scrlbar_mode be set through functions. The scroll bar setting of the page has the following parameters:
lvgl.SCRLBAR_MODE_OFF
lvgl.SCRLBAR_MODE_ON
lvgl.SCRLBAR_MODE_DRAG
lvgl.SCRLBAR_MODE_AUTO
lvgl.SCRLBAR_MODE_HIDE
lvgl.SCRLBAR_MODE_UNHIDE
The meaning of these parameters is as follows:
lvgl.SCRLBAR_MODE_OFF the scroll bar is not displayed from beginning to end.
lvgl.SCRLBAR_MODE_ON The scroll bar will always be displayed.
lvgl.SCRLBAR_MODE_DRAG The scroll bars are only displayed when dragging the page.
lvgl.SCRLBAR_MODE_AUTO Indicates adaptive. The scroll bar will only be enabled when the page cannot be displayed completely. This is the default option.
lvgl.SCRLBAR_MODE_HIDE The scroll bar will be hidden.
lvgl.SCRLBAR_MODE_UNHIDE The hidden scroll bar will be redisplayed.
Let's look at lvgl.SCRLBAR_MODE_DRAG a display effect below, which only displays the scroll bar when the page is scrolling.
lvgl.page_set_scrollbar_mode(page, lvgl.SCRLBAR_MODE_DRAG)
focus object
You can automatically scroll the page to display some content by setting the focus object. For example, first create a text label in an offset position on the page.
hello = lvgl.label_create(page, nil)
lvgl.label_set_text(hello, "hello")
lvgl.obj_set_pos(hello, 150, 190)
Then set this text as the focus object, wait 4S, and then move the focus object back to the main control.
lvgl.page_set_anim_time(page, 4000)
lvgl.page_focus(page, hello, lvgl.ANIM_ON)
sys.wait(4000)
lvgl.page_focus(page, label, lvgl.ANIM_ON)
sys.wait(4000)
The effect is shown below. In fact, multiple controls can be set up and displayed in a loop on the page.
animation
In fact, in addition to the display animation of the focus control, the page control can set an edge flashing effect, which will display an arc when the page scrolls to the edge.
lvgl.page_set_edge_flash(page, true)
rolling spread
If a page B is created within a page A, it will stop when page B scrolls to the edge and cannot continue to scroll.
But if scroll propagation is set, when the child control scrolls to the edge, the scroll event will be passed to its parent object.
lvgl.page_set_scroll_propagation(page2, true)
clear page
Objects created on the page can lvgl.page_clean(page) be cleared through.
API
lvgl.page_create
| transfer |
lvgl.page_create(par, copy) |
| Function |
Create a page object |
| return |
Pointer to the created page object |
| parameter |
|
| par |
Pointer to the object that will be the parent of the new key object |
| copy |
Pointer to the page object from which the new object will be copied if not nil |
lvgl.page_clean
| transfer |
lvgl.page_clean(page) |
| Function |
Clear all child objects of the page |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_scrollable
| transfer |
lvgl.page_get_scrollable(page) |
| Function |
Get the scrollable object of the page |
| return |
Pointer to the container that is the scrollable portion of the page |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_anim_time
| transfer |
lvgl.page_get_anim_time(page) |
| Function |
Get the animation time of the page |
| return |
The animation time of the page, in milliseconds |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_anim_time
| transfer |
lvgl.page_get_anim_time(page, mode) |
| Function |
Set scrollbar mode on the page |
| parameter |
|
| page |
pointer to page object |
| mode |
scroll bar mode |
|
lvgl.SCRLBAR_MODE_OFF |
|
lvgl.SCRLBAR_MODE_ON |
|
lvgl.SCRLBAR_MODE_DRAG |
|
lvgl.SCRLBAR_MODE_AUTO |
|
lvgl.SCRLBAR_MODE_HIDE |
|
lvgl.SCRLBAR_MODE_UNHIDE |
lvgl.page_get_anim_time
| transfer |
lvgl.page_get_anim_time(page, time) |
| Function |
Set animation time for page |
| parameter |
|
| page |
pointer to page object |
| time |
Page animation time |
lvgl.page_set_scroll_propagation
| transfer |
lvgl.page_set_scroll_propagation(page, en) |
| Function |
Set up rolling spread |
| parameter |
|
| page |
pointer to page object |
| in |
true enables scrolling propagation, false disables scrolling propagation. |
lvgl.page_set_edge_flash
| transfer |
lvgl.page_set_edge_flash(page, en) |
| Function |
Set edge flicker effect |
| parameter |
|
| page |
pointer to page object |
| in |
true enables edge flickering, false disables edge flickering. |
lvgl.page_set_scrollable_fit4
| transfer |
lvgl.page_set_scrollable_fit4(page, left，right，top，bottom) |
| 功能 |
设置容器在四个方向上的拟合方式，拟合方式设置跟容器是一致的。 |
| 参数 |
|
| page |
指向页面对象的指针 |
| left |
左边的拟合方式 |
| right |
右边的拟合方式 |
| top |
顶部的拟合方式 |
| bottom |
底部的拟合方式 |
lvgl.page_set_scrollable_fit4
| 调用 |
lvgl.page_set_scrollable_fit4(page, left，right，top，bottom) |
| 功能 |
设置容器在四个方向上的拟合方式，拟合方式设置跟容器是一致的。 |
| 参数 |
|
| page |
指向页面对象的指针 |
| left |
左边的拟合方式 |
| right |
右边的拟合方式 |
| top |
顶部的拟合方式 |
| bottom |
底部的拟合方式 |
lvgl.page_set_scrollable_fit2
| 调用 |
lvgl.page_set_scrollable_fit2(page, hor, ver) |
| 功能 |
设置水平和垂直方向的拟合方式 |
| 参数 |
|
| page |
指向页面对象的指针 |
| hor |
水平方向上的拟合方式 |
| ver |
垂直方向上的拟合方式 |
lvgl.page_set_scrollable_fit
| 调用 |
lvgl.page_set_scrollable_fit(page, fit) |
| 功能 |
一次性设置页面四个方向上的拟合方式 |
| 参数 |
|
| cont |
指向页面对象的指针 |
| fit |
页面四个方向上的拟合方式 |
lvgl.page_set_scrl_width
| 调用 |
lvgl.page_set_scrl_width(page, w) |
| 功能 |
设置页面可滚动部分的宽度 |
| 参数 |
|
| cont |
指向页面对象的指针 |
| w |
页面可滚动部分的宽度 |
lvgl.page_set_scrl_height
| 调用 |
lvgl.page_set_scrl_height(page, h) |
| 功能 |
设置页面可滚动部分的高度 |
| 参数 |
|
| cont |
指向页面对象的指针 |
| h |
页面可滚动部分的高度 |
lvgl.page_set_scrl_layout
| 调用 |
lvgl.page_set_scrl_layout(page, layout) |
| 功能 |
设置页面的布局 |
| 参数 |
|
| cont |
指向页面对象的指针 |
| layout |
页面的布局，可以参考容器部分 |
lvgl.page_get_scrollbar_mode
| 调用 |
lvgl.page_get_scrollbar_mode(page) |
| 功能 |
获取滚动条设置的模式 |
| 返回 |
滚动条设置的模式 |
| 参数 |
|
| page |
指向页面对象的指针 |
lvgl.page_get_scroll_propagation
| 调用 |
lvgl.page_get_scroll_propagation(page) |
| 功能 |
获取是否设置滚动传播 |
| 返回 |
滚动传播属性 |
| 参数 |
|
| page |
指向页面对象的指针 |
lvgl.page_get_edge_flash
| 调用 |
lvgl.page_get_edge_flash(page) |
| Function |
Get whether scroll propagation is set |
| return |
scroll propagation properties |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_scrl_width
| transfer |
lvgl.page_get_scrl_width(page) |
| Function |
Get the width of the scrollable part of the page |
| return |
The width of the scrollable portion of the page |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_scrl_height
| transfer |
lvgl.page_get_scrl_height(page) |
| Function |
Get the height of the scrollable part of the page |
| return |
The height of the scrollable portion of the page |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_scrl_layout
| transfer |
lvgl.page_get_scrl_layout(page) |
| Function |
Get the layout of the page |
| return |
Page layout |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_scrl_fit_left
| transfer |
lvgl.page_get_scrl_fit_left(page) |
| Function |
Get the fitting method on the left side of the page |
| return |
The fitting method on the left side of the page |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_scrl_fit_right
| transfer |
lvgl.page_get_scrl_fit_right(page) |
| Function |
Get the fitting method on the right side of the page |
| return |
Fitting method on the right side of the page |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_scrl_fit_top
| transfer |
lvgl.page_get_scrl_fit_top(page) |
| Function |
Get the fitting method on the page |
| return |
The fitting method on the page |
| parameter |
|
| page |
pointer to page object |
lvgl.page_get_scrl_fit_bottom
| transfer |
lvgl.page_get_scrl_fit_bottom(page) |
| Function |
Get the fitting method below the page |
| return |
The fitting method below the page |
| parameter |
|
| page |
pointer to page object |
lvgl.page_focus
| transfer |
lvgl.page_focus(page, obj, anim) |
| Function |
Set the focus object of the page |
| parameter |
|
| page |
pointer to page object |
| obj |
The object that needs to be focused |
| anim |
Whether to enable animation |
|
lvgl.ANIM_ON enables animation |
|
lvgl.ANIM_OFF does not enable animation |