合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page)

这篇具有很好参考价值的文章主要介绍了合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

页面 (Page)

合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page),AIR724软件,Air724UG

当控件内容过多,无法在屏幕内完整显示时,可让其在 页面 内显示。

示例代码

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.]])

创建

通过函数 lvgl.page_create 可以创建一个页面

page = lvgl.page_create(lvgl.scr_act(), nil)

添加内容

页面对象可以像容器一样设置各个方向上的匹配模式,可以把需要显示的对象添加进页面进行显示,页面可以作为控件的父容器。就像下面这样,在页面中添加了一个标签。

label = lvgl.label_create(page, nil)

滚动条

页面的滚动条可以通过 lvgl.page_set_scrlbar_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.SCRLBAR_MODE_OFF 是从始至终不显示滚动条。
lvgl.SCRLBAR_MODE_ON 是一直会显示滚动条。
lvgl.SCRLBAR_MODE_DRAG 是只有在拖动页面时才会显示滚动条。
lvgl.SCRLBAR_MODE_AUTO 表示自适应,只有在页面没有办法完整显示的时候才会启用滚动条,这是个默认选项。
lvgl.SCRLBAR_MODE_HIDE 会将滚动条隐藏。
lvgl.SCRLBAR_MODE_UNHIDE 会把隐藏的滚动条重新显示。

下面我们看下 lvgl.SCRLBAR_MODE_DRAG 的一个显示效果,只在页面滚动时显示滚动条。

lvgl.page_set_scrollbar_mode(page, lvgl.SCRLBAR_MODE_DRAG)

合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page),AIR724软件,Air724UG

焦点对象

可以通过设置焦点对象来自动滚动页面进行一些内容展示。例如,首先在页面比较偏的一个位置创建个文本标签。

hello = lvgl.label_create(page, nil)
lvgl.label_set_text(hello, "hello")
lvgl.obj_set_pos(hello, 150, 190)

然后把这个文本设置为焦点对象,等待 4S 之后,再将焦点对象移回主控件。

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)

效果展示如下,实际上可以设置多个控件,在页面循环进行展示。

合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page),AIR724软件,Air724UG

动画

其实除了对焦控件这种展示动画以外,页面控件可以设置一个边缘闪烁效果,在页面滚动达到边缘的时候会显示一段弧线。

lvgl.page_set_edge_flash(page, true)

合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page),AIR724软件,Air724UG

滚动传播

如果在一个页面 A 之中创建了一个页面 B,那么在页面 B 滚动到边缘的时候时候就停止了,无法继续滚动。
 

合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page),AIR724软件,Air724UG


但是如果设置了滚动传播,在子控件滚动到边缘的时候,会将滚动事件传给它的父对象。

lvgl.page_set_scroll_propagation(page2, true)

合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page),AIR724软件,Air724UG

清除页面

页面上创建的对象都可以通过 lvgl.page_clean(page) 进行清除。文章来源地址https://www.toymoban.com/news/detail-709027.html

API

lvgl.page_create

调用 lvgl.page_create(par, copy)
功能 创建一个页面对象
返回 指向创建的页面对象的指针
参数
par 指向对象的指针, 它将是新键对象的父对象
copy 指向页面对象的指针, 如果不为 nil, 则将从其复制新对象

lvgl.page_clean

调用 lvgl.page_clean(page)
功能 清除页面的所有子对象
参数
page 指向页面对象的指针

lvgl.page_get_scrollable

调用 lvgl.page_get_scrollable(page)
功能 获取页面的可滚动对象
返回 指向容器的指针,该容器是页面的可滚动部分
参数
page 指向页面对象的指针

lvgl.page_get_anim_time

调用 lvgl.page_get_anim_time(page)
功能 获取页面的动画时间
返回 页面的动画时间,以毫秒为单位
参数
page 指向页面对象的指针

lvgl.page_get_anim_time

调用 lvgl.page_get_anim_time(page, mode)
功能 在页面上设置滚动条模式
参数
page 指向页面对象的指针
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

调用 lvgl.page_get_anim_time(page, time)
功能 设置页面的动画时间
参数
page 指向页面对象的指针
time 页面的动画时间

lvgl.page_set_scroll_propagation

调用 lvgl.page_set_scroll_propagation(page, en)
功能 设置滚动传播
参数
page 指向页面对象的指针
en true 启用滚动传播, false 禁用滚动传播。

lvgl.page_set_edge_flash

调用 lvgl.page_set_edge_flash(page, en)
功能 设置边缘闪烁效果
参数
page 指向页面对象的指针
en true 启用边缘闪烁, false 禁用边缘闪烁。

lvgl.page_set_scrollable_fit4

调用 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)
功能 获取是否设置滚动传播
返回 滚动传播属性
参数
page 指向页面对象的指针

lvgl.page_get_scrl_width

调用 lvgl.page_get_scrl_width(page)
功能 获取页面可滚动部分的宽度
返回 页面可滚动部分的宽度
参数
page 指向页面对象的指针

lvgl.page_get_scrl_height

调用 lvgl.page_get_scrl_height(page)
功能 获取页面可滚动部分的高度
返回 页面可滚动部分的高度
参数
page 指向页面对象的指针

lvgl.page_get_scrl_layout

调用 lvgl.page_get_scrl_layout(page)
功能 获取页面的布局
返回 页面的布局
参数
page 指向页面对象的指针

lvgl.page_get_scrl_fit_left

调用 lvgl.page_get_scrl_fit_left(page)
功能 获取页面左边的拟合方式
返回 页面左边的拟合方式
参数
page 指向页面对象的指针

lvgl.page_get_scrl_fit_right

调用 lvgl.page_get_scrl_fit_right(page)
功能 获取页面右边的拟合方式
返回 页面右边的拟合方式
参数
page 指向页面对象的指针

lvgl.page_get_scrl_fit_top

调用 lvgl.page_get_scrl_fit_top(page)
功能 获取页面上面的拟合方式
返回 页面上面的拟合方式
参数
page 指向页面对象的指针

lvgl.page_get_scrl_fit_bottom

调用 lvgl.page_get_scrl_fit_bottom(page)
功能 获取页面下面的拟合方式
返回 页面下面的拟合方式
参数
page 指向页面对象的指针

lvgl.page_focus

调用 lvgl.page_focus(page, obj, anim)
功能 设置页面的焦点对象
参数
page 指向页面对象的指针
obj 需要设置焦点的对象
anim 是否启用动画
lvgl.ANIM_ON 启用动画
lvgl.ANIM_OFF 不启用动画

到了这里,关于合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 合宙Air724UG LuatOS-Air LVGL API控件--图表 (Chart)

    图表 (Chart) 一幅图胜过一千个字,通过图表展示出的数据内容能让用户更快速有效的了解数据特征。 代码示例 – 创建图表 chart = lvgl.chart_create(lvgl.scr_act(), nil) lvgl.obj_set_size(chart, 200, 150) lvgl.obj_align(chart, nil, lvgl.ALIGN_CENTER, 0, 0) – 设置 Chart 的显示模式 (折线图) lvgl.chart_set_typ

    2024年02月10日
    浏览(33)
  • 合宙Air724UG LuatOS-Air LVGL API控件-截屏(Screenshots)

    截屏(Screenshots) 分 享导出pdf 截屏功能,core版本号要=3211 disp.screenshots 调用 disp.screenshots(name, x1, x2, y1, y2) 功能 截取显示屏指定区域图片 返回 0/-1 成功/失败 参数 name 文件路径名只支持bmp x1 水平初始值MIPI屏(0-479)/LCD屏(0-239) x2 水平结束值MIPI屏(x1-479)/LCD屏(x1-239)

    2024年02月07日
    浏览(32)
  • 合宙Air724UG LuatOS-Air LVGL API控件-键盘 (Keyboard)

    键盘 (Keyboard) LVGL 可以添加触摸键盘,但是很明显,使用触摸键盘的话必须要使用触摸的输入方式,否则无法驱动键盘。 通过  keyboard_create  可以创建键盘,实际上只要这一句就可在界面上显示键盘了。很难得的是,键盘没有复制对象, lvgl.keyboard_create  只需要传入一个参数

    2024年02月09日
    浏览(30)
  • 合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image)

    图片 (Image) 图片 IMG 是用于显示图像的基本对象类型,图像来源可以是文件,或者定义的符号。 使用  lvgl.img_create  可以创建图像对象。 图片控件显示的内容有两个来源,一个是来源文件的图片,还是有一个就是 符号文字。符号文字是一段特殊的字符串,LVGL内部会将这串特

    2024年02月09日
    浏览(31)
  • 合宙Air724UG LuatOS-Air LVGL API控件--曲线 (Arc)

    曲线 (Arc) 曲线控件,也可以称为弧。因为 Arc 本身就是弧,弧形的意思。根据控件的样子也能推测出它的使用场景,一般用在加载器(就是等待界面转的圈圈)或者数值显示,数值调节这些场景。曲线控件分了两个部分,前景和背景,都可以分别进行设置。 示例代码 – 创建曲

    2024年02月11日
    浏览(46)
  • 合宙Air724UG LuatOS-Air LVGL API控件--日历 (Calendar)

    日历 (Calendar) LVGL 提供了一个用来选择和显示当前日期的日历控件。 示例代码 – 高亮显示的日期 highlightDate = lvgl.calendar_date_t() – 日历点击的回调函数 – 将点击日期设置高亮 function event_handler(obj, event) if event == lvgl.EVENT_VALUE_CHANGED then date = lvgl.calendar_get_pressed_date(obj) if date

    2024年02月10日
    浏览(38)
  • 合宙Air724UG LuatOS-Air LVGL API控件-窗口 (Window)

    窗口 (Window) 分 享导出pdf | lvgl.win_create 调用 lvgl.win_create(par, copy) 功能 创建一个窗口对象 返回 指向创建的窗口的指针 参数 par 指向对象的指针, 它将是新键对象的父对象 copy 指向窗口对象的指针, 如果不为 nil, 则将从其复制新对象 lvgl.win_clean 调用 lvgl.win_clean(win) 功能 清除窗口

    2024年02月09日
    浏览(42)
  • 合宙Air724UG LuatOS-Air LVGL API控件-加载器(Spinner)

    加载器(Spinner) 通过  lvgl.spinner_create  就可创建一个加载器,本身自带动画效果。 可以通过  lvgl.spinner_set_arc_length  函数调整加载器的弧长。单位是度,一圈是按 360 度计算的。 通过  lvgl.spinner_set_spin_time  可以设置转速,这里的单位是 ms,是加载器转完一圈的时间,GIF 录制

    2024年02月09日
    浏览(31)
  • 合宙Air724UG LuatOS-Air LVGL API控件-微调框 (Spinbox)

    微调框 (Spinbox) 微调框用于数值调整,有时候我们希望获取一个用户输入的数值,但是又不希望弹出键盘,可以使用微调框。 微调框的创建函数是  spinbox_create ,创建也比较简单。 这里有点需要注意,创建的微调框只有这个:   增大减小按钮是需要自己通过代码创建的,所以

    2024年02月09日
    浏览(29)
  • 合宙Air724UG LuatOS-Air LVGL API控件-滑动条 (Slider)

    滑动条 (Slider) 滑动条看起来和进度条是有些是有些像,但不同的是滑动条可以进行数值选择。 滑动条是通过  lvgl.slider_create  函数创建的。 滑动条创建完之后设置显示位置就可以进行操作了。 滑动条的使用和 Bar 还是很像的。可以设置数值  lvgl.slider_set_value ,也可以设置显

    2024年02月09日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包