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

news2024/12/27 19:16:54

页面 (Page)

page.png

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

示例代码

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)

滚动条.gif

焦点对象

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

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)

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

jdfw7.gif

动画

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

lvgl.page_set_edge_flash(page, true)

jdfw.gif

滚动传播

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

jdfw2.gif


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

lvgl.page_set_scroll_propagation(page2, true)

jdfw3.gif

清除页面

页面上创建的对象都可以通过 lvgl.page_clean(page) 进行清除。

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指向页面对象的指针
entrue 启用滚动传播， false 禁用滚动传播。

lvgl.page_set_edge_flash

调用lvgl.page_set_edge_flash(page, en)
功能设置边缘闪烁效果
参数
page指向页面对象的指针
entrue 启用边缘闪烁， 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 不启用动画

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/979429.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

netbeans+wamp+php配置调试代码

netbeans+wamp+php配置调试代码

netbeans版本：8.1 wamp版本是2.5,里面的php5.5.12，apache2.4.9，mysql5.6.17。 wamp已经自带Xdebug（PHP程序调试器）。 步骤： 1.路径：D:\wamp\bin\apache\apache2.4.9\bin\php.ini 2.打开ne…
阅读更多...
MyBatis 动态 SQL 实践教程

MyBatis 动态 SQL 实践教程

一、MyBatis动态 sql 是什么 动态 SQL 是 MyBatis 的强大特性之一。在 JDBC 或其它类似的框架中，开发人员通常需要手动拼接 SQL 语句。根据不同的条件拼接 SQL 语句是一件极其痛苦的工作。例如，拼接时要确保添加了必要的空格，还要注意去掉列…
阅读更多...
电脑上jpg图片怎么改大小kb？三招学会图片压缩

电脑上jpg图片怎么改大小kb？三招学会图片压缩

在电脑上处理jpg图片时，有时候我们需要修改图片的大小，尤其是在需要上传图片到一些限制大小的平台时。那么，如何更改jpg图片的大小呢？今天，我将分享三个实用的方法，让大家轻松解决图片太大的问题&#xff0…
阅读更多...
仿射密码 affine

仿射密码 affine

参考链接：https://www.cnblogs.com/0yst3r-2046/p/12172757.html 仿射加密法 在仿射加密法中，字母表的字母被赋予一个数字，例如 a0，b1，c2…z25 。仿射加密法的密钥为0-25直接的数字对。 仿射加密法与单码加密法没什么…
阅读更多...
ubuntu修改用户名和用户密码

ubuntu修改用户名和用户密码

1.修改passwd文件 sudo gedit /etc/passwd2.修改shadow文件 sudo gedit /etc/shadow3.修改home目录下文件夹名 mv /home/原用户名/ /home/新用户名4.修改sudo权限（修改group用户组） sudo gedit /etc/group5.修改用户密码 sudo passwd username #修改…
阅读更多...
位运算 |(按位或) (按位与) ^(按位异或)

位运算 |(按位或) (按位与) ^(按位异或)

目录 文章目录：本章讲解的主要是刷题系列 1：首先会介绍 I & ^这三个操作符的作用，性质 2：三道使用位运算操作符的经典 笔试题(来自剑指offer) 题目链接如下： 1:136. 只出现一次的数字 - 力扣（LeetCode…
阅读更多...
Jmeter进阶使用指南-使用断言

Jmeter进阶使用指南-使用断言

Apache JMeter是一个流行的开源负载和性能测试工具。在JMeter中，断言（Assertions）是用来验证响应数据是否符合预期的一个重要组件。它是对请求响应的一种检查，如果响应不符合预期，那么断言会标记为失败。 以下是如何在…
阅读更多...
Echarts 中国地图

Echarts 中国地图

直接展示效果图： 我们需要引入两个文件： echarts.js 官网地址下载：快速上手 - Handbook - Apache ECharts chain.js 这个官网已经找不到了，需要自行搜寻下载 也可以私信我(网上下载的China.js会导致省名称定为不准确&#xff0…
阅读更多...
Go语言最全面试题，拿offer全靠它，附带免积分下载pdf

Go语言最全面试题，拿offer全靠它，附带免积分下载pdf

面试题文档下链接点击这里免积分下载 go语言入门到精通点击这里免积分下载 文章目录 Go 基础类GO 语言当中 NEW 和 MAKE 有什么区别吗？PRINTF(),SPRINTF(),FPRINTF() 都是格式化输出，有什么不同？GO 语言当中数组和切片的区别是什么&#xf…
阅读更多...
【C++】函数重载 ③ ( 为函数指针赋值重载函数 )

【C++】函数重载 ③ ( 为函数指针赋值重载函数 )

文章目录 一、函数指针回顾1、函数指针概念2、函数指针语法3、代码示例 - 函数指针示例 二、为函数指针赋值重载函数1、为函数指针赋值重载函数2、代码示例 - 为函数指针赋值重载函数 博客总结 : 重载函数 : 使用 相同 的 函数名 , 定义 不同 的 函数参数列表 ;判定标准 : 只有…
阅读更多...
判断计算机处理器的大小端

判断计算机处理器的大小端

一、什么是大小端？ 大端模式：低位字节存在高地址，高位字节存在低地址 小端模式：高位字节存在高地址，低位字节存在第地址 二、如何判断计算机处理器是大端还是小端？ ①使用变量 x 的值本身来检查处理器存储…
阅读更多...
九章云极DataCanvas公司参与大模型重点项目合作签约，建设产业集聚区

九章云极DataCanvas公司参与大模型重点项目合作签约，建设产业集聚区

9月3日，2023中国国际服务贸易交易会石景山国际开放合作论坛在石景山首钢园成功举办，北京市委常委、常务副市长夏林茂，商务部服务贸易和商贸服务业司司长王东堂，北京市石景山区委书记常卫出席论坛并致辞。论坛期间正式举行“石景山…
阅读更多...
关于内涝积水的那些事儿

关于内涝积水的那些事儿

内涝积水是指城市区域在强降雨、排水系统失效或不足的情况下，大量降雨无法及时排除而积聚在地面上的现象。内涝积水不仅给城市环境和居民的生活带来困扰，同时也给社会经济、交通运输和居民安全造成了严重的危害。 内涝积水的影响 1.内涝积水会对城市环境…
阅读更多...
亚马逊鲲鹏系统有哪些优势特点

亚马逊鲲鹏系统有哪些优势特点

亚马逊鲲鹏系统是一款全自动化操作的软件，有批量注册账号、自动养号、点击广告、根据关键词进行加购、下单购买、留评、评论点赞或举报、QA等，是一款功能比较齐全的软件。 亚马逊鲲鹏系统有以下优势特点： 1.功能齐全 亚马逊鲲鹏系统一套软件…
阅读更多...
【买华为云产品，返CSDN余额红包】，快来薅羊毛！

【买华为云产品，返CSDN余额红包】，快来薅羊毛！

华为云828营销季火热进行中，9月15日前首次购买华为云产品官网任意一款产品，可获得相应比例的CSDN红包。 热门产品云服务器、域名、商标、主机安全等产品都在其中，任君挑选。 活动优惠价购买后还是获得相应比例余额红包，实际付费金…
阅读更多...
nodejs+vue+elementui高校人事管理系统

nodejs+vue+elementui高校人事管理系统

总体设计 根据高校人事管理系统的功能需求，进行系统设计。 用户功能：用户进入系统可以实现首页、个人中心、职称申报管理、工资信息管理、绩效信息管理、奖惩信息管理、招聘管理等进行操作； 院长功能：院长进入系统可以实现首页、个…
阅读更多...
用通俗易懂的方式讲解大模型分布式训练并行技术：概述

用通俗易懂的方式讲解大模型分布式训练并行技术：概述

近年来，随着Transformer、MOE架构的提出，使得深度学习模型轻松突破上万亿规模参数，传统的单机单卡模式已经无法满足超大模型进行训练的要求。因此，我们需要基于单机多卡、甚至是多机多卡进行分布式大模型的训练。 而利用AI集群&a…
阅读更多...
vue中实现签名画板

vue中实现签名画板

特意封装成了一个组件&#xff0c;签名之后会生成一张图片 signBoard.vue <template><el-drawer title"签名" :visible.sync"isShowBoard" append-to-body :show-close"false" :before-close"closeBoard" size"50%&quo…
阅读更多...
一文1000字彻底搞懂Web测试与App测试的区别

一文1000字彻底搞懂Web测试与App测试的区别

总结分享一些项目需要结合Web测试和App测试的工作经验给大家&#xff1a; 从功能测试区分&#xff0c;Web测试与App测试在测试用例设计和测试流程上没什么区别。 而两者的主要区别体现在如下几个方面&#xff1a; 1 系统结构方面 Web项目&#xff0c;B/S架构&#xff0c;基于…
阅读更多...
网络请求流程简述

网络请求流程简述

二层通信 通过 ARP 获取 MAC通过 MAC 确定目标进行通信 相同 vlan&#xff0c;不跨交换机 相同 vlan&#xff0c;跨交换机 不同 vlan
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023