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

页面 (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.rhkb.cn/news/126940.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

机器学习算法详解1：基础知识合集

机器学习算法详解1：基础知识合集

机器学习算法详解1：基础知识合集 前言 ​ 本系列主要对机器学习上算法的原理进行解读，给大家分享一下我的观点和总结。 本篇前言 ​ 开一个新系列，另外现在开学了，忙起来了，所以更新会很慢。 目录结构 文章目录 机器学…
阅读更多...
彻底掌握Protobuf编码原理与实战

彻底掌握Protobuf编码原理与实战

目录 1.类型2.VARINT 2.1 无符号数2.2 有符号数3.定长 3.1 I64类型3.2 I32类型4.LEN5.代码 学习这些有什么用？ - 如果你是后端开发者，掌握这个对工作非常有用 - 如果你是求职者，面试时可以临危不惧 1.类型 最近看到有直接操作wire type相关的…
阅读更多...
3D点云处理：基于角度的点云边缘点排序（附源码）

3D点云处理：基于角度的点云边缘点排序（附源码）

文章目录 0. 测试效果1. 基本内容2. 实现步骤3. 代码实现文章目录：3D视觉个人学习目录0. 测试效果 边缘点按照排序顺序显示（为便于显示查看，每隔五个点显示一个点） 1. 基本内容 基于角度的边缘点排序主要是基于每一个边缘点与点云中心位姿构成的向量与参考方向之间的…
阅读更多...
deepin V23通过flathub安装steam畅玩游戏

deepin V23通过flathub安装steam畅玩游戏

deepin V23缺少32位库，在星火商店安装的steam,打开报错，无法使用！ 通过flathub网站安装steam,可以正常使用，详细教程如下： flathub网址：主页 | Flathub 注意：flathub下载速度慢，只…
阅读更多...
vite+vue 项目使用 electron

vite+vue 项目使用 electron

创建 vitevue 项目 npm create viteElectron 官方文档 electron 安装 安装 electron npm install --save-dev electron新建 electron 的入口文件，我这里在根目录新建 electron 文件夹，然后新建main.js和preload.js文件 根据官网说明，将以下…
阅读更多...
node版本问题

node版本问题

服务器下载下来的vue项目启动出现下列问题 npm ERR! path E:\vueEnv\app\node_modules\node-sass npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js npm ERR! Building: C:\Program Files\nodejs\node.exe E:\vueEnv\ap…
阅读更多...
单目标应用：基于麻雀搜索算法SSA的微电网优化调度MATLAB

单目标应用：基于麻雀搜索算法SSA的微电网优化调度MATLAB

一、微网系统运行优化模型 参考文献： [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、麻雀搜索算法简介 麻雀搜索算法 (Sparrow Search Algorithm, SSA) 是一种新型的群智能优化算法，于2020…
阅读更多...
springboot项目配置flyway菜鸟级别教程

springboot项目配置flyway菜鸟级别教程

1、Flyway的工作原理 Flyway在第一次执行时，会创建一个默认名为flyway_schema_history的历史记录表，这张表会用来跟踪或记录数据库的状态，然后每次项目启动时都会自动扫描在resources/db/migration下的文件的版本号并且通过查询flyway_schem…
阅读更多...
Error running ‘xxx‘: Command line is too long. Shorten command line for xxxx

Error running ‘xxx‘: Command line is too long. Shorten command line for xxxx

完整报错信息：Error running ArticleFreemarkerTest.test: Command line is too long. Shorten command line for ArticleFreemarkerTest.test or also for JUnit default configuration. 翻译为运行“ArticleFreemarkerTest.test”时出错，命令行太长。…
阅读更多...
【2023年数学建模国赛】C题代码与技术文档分享

【2023年数学建模国赛】C题代码与技术文档分享

2023年数学建模国赛C题 第一问代码code1_Q1_1.mCode1_Q1_2.mCode1_Q1_3.m实验结果 技术文档问题分析假设符号说明1 第一问1.1分布检验模型的建立1.2 相关性模型的建立1.3各种类蔬菜的销量分布及相关关系 写在最后 第一问代码 code1_Q1_1.m clc clear Dxlsread(合成表1,合成表…
阅读更多...
常见缺少msvcp140.dll问题及解决方法，分享多种方法帮你解决

常见缺少msvcp140.dll问题及解决方法，分享多种方法帮你解决

在日常使用电脑的过程中，我们可能会遇到各种问题，比如电脑提示msvcp140.dll文件丢失。这个问题通常是由于某些程序或游戏需要这个dll文件来正常运行，但是由于某种原因，这个文件被误删或者损坏了。那么，如何解决这个问题…
阅读更多...
MySQL进阶 —— 超详细操作演示！！！（上）

MySQL进阶 —— 超详细操作演示！！！（上）

MySQL进阶 —— 超详细操作演示！！！（上） 一、存储引擎1.1 MySQL 体系结构1.2 存储引擎介绍1.3 存储引擎特点1.4 存储引擎选择 二、索引2.1 索引概述2.2 索引结构2.3 索引分类2.4 索引语法2.5 SQL 性能分析2.6 索引使用2…
阅读更多...
[学习笔记]CS224W

[学习笔记]CS224W

资料： 课程网址 斯坦福CS224W图机器学习、图神经网络、知识图谱【同济子豪兄】 斯坦福大学CS224W图机器学习公开课-同济子豪兄中文精讲 图的基本表示 图是描述各种关联现象的通用语言。与传统数据分析中的样本服从独立同分布假设不一样，图数据自带关联…
阅读更多...
Mysql 性能分析(慢日志、profiling、explain)、读写分离（主从架构）、分库分表（垂直分库、垂直分表、水平分表）

Mysql 性能分析(慢日志、profiling、explain)、读写分离（主从架构）、分库分表（垂直分库、垂直分表、水平分表）

查看系统性能参数 一条sql查询语句在执行前，需要确定查询执行计划，如果存在多种执行计划的话，mysql会计算每个执行计划所需要的成本，从中选择 成本最小的一个作为最终执行的执行计划 想要查看某条sql语句的查询成本，可…
阅读更多...
SpringMVC框架@RequestMapping用法，处理器方法参数接收，处理器方法返回值详解

SpringMVC框架@RequestMapping用法，处理器方法参数接收，处理器方法返回值详解

1. RequestMapping 定义请求规则 1.1 指定模块名称 通过RequestMapping 注解可以定义处理器对于请求的映射规则。该注解可以注解在方 法上，也可以注解在类上，但意义是不同的。value 属性值常以“/”开始。RequestMapping 的 value 属性用于定义所匹配请…
阅读更多...
大数据下的精准营销获客

大数据下的精准营销获客

2012年以后，大数据（big data）一词越来越多地被提及，人们用它来描述和定义信息爆炸时代产生的海量数据，并命名与之相关的技术发展与创新。哈佛大学社会学教授加里金说“这是一场革命，庞大的数据资源使得各个…
阅读更多...
【面试经典150 | 数组】合并两个有序数组

【面试经典150 | 数组】合并两个有序数组

文章目录 写在前面Tag题目来源题目解读解题思路方法一：合并排序方法二：双指针方法三：原地操作-从前往后方法四：原地操作-从后往前 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法，两到三天更新一篇文章…
阅读更多...
OpenCV（十八）：图像直方图

OpenCV（十八）：图像直方图

目录 1.直方图统计 2.直方图均衡化 3.直方图匹配 1.直方图统计 直方图统计是一种用于分析图像或数据的统计方法，它通过统计每个数值或像素值的频率分布来了解数据的分布情况。 在OpenCV中，可以使用函数cv::calcHist()来计算图像的直方图。 calcHist(…
阅读更多...
基于SSM的蜀都天香酒楼管理系统

基于SSM的蜀都天香酒楼管理系统

末尾获取源码 开发语言：Java Java开发工具：JDK1.8 后端框架：SSM 前端：采用JSP技术开发 数据库：MySQL5.7和Navicat管理工具结合 服务器：Tomcat8.5 开发软件：IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
【Tomcat服务部署及优化】

【Tomcat服务部署及优化】

Tomcat 一、什么是Tomcat?二、Tomcat 核心组件2.1 Tomcat 组件2.3 Container组件的结构2.4 Tomcat 请求过程 三、Tomcat 部署3.1 安装JDK3.2 设置JDK环境变量3.3 安装Tomcat并用supervisor启动解压添加到supervisord服务测试能否通过supervisorctl启动 四、Tomcat的端口和主要…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023