LVGL 界面跳转逻辑的设计与实现

这篇具有很好参考价值的文章主要介绍了LVGL 界面跳转逻辑的设计与实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用方法

        源码 gui_scr_mgr.c 和 gui_scr_mgr.h 见最后参考资料,下面我会介绍一下使用方法,至于原理下面也有一些解释。

        1、初始化,假设 LVGL 的入口是 lvgl_app_init();然后初始化我们界面管理系统,21行初始化界面管理系统,22行设置界面的根界面。当然需要包括头文件 gui_scr_mgr.h。

lvgl界面切换,LVGL,ui,c语言

         2、创建界面,假设创建界面 gui_main_scr.c 和 gui_main_scr.h。gui_main_scr.c 界面的框架如下(需要按照此框架写自己的代码),Create 创建 LVGL 控件;Enter 注册事件;Layout 界面的布局; Exit 与 Enter 对应,注销在 Enter 注册的事件,Destroy 与 Create 对应,释放在 Create 申请的空间。

lvgl界面切换,LVGL,ui,c语言

gui_main_scr.h 的内容如下。

lvgl界面切换,LVGL,ui,c语言

         3、声明 ID 和界面结构体 Handle,下面以添加界面 gui_main_scr 为例,添加 ID,ID 必须放到全局的 .h 文件中。

lvgl界面切换,LVGL,ui,c语言

       声明界面结构体,在 gui_scr_mgr.c 中,将界面结构体放到界面管理系统中;然后在 gui_scr_mgr.h 中声明界面结构体。

lvgl界面切换,LVGL,ui,c语言

lvgl界面切换,LVGL,ui,c语言

         4、按照上面的方法,在创建一个界面,然后在两个界面中添加一下控件,然后在控件的回调中去调用界面管理的 push 和 pop 函数。运行效果如下图所示,详情见参考资料 vs2019 工程。

lvgl界面切换,LVGL,ui,c语言

1、简介

        摘录:LVGL - Open Collective

What is LVGL?

        LVGL is the most popular free and open source embedded graphics library to create beautiful UIs for any MCU, MPU and display type.  It has all the features to create modern and smartphone-like GUIs: 30+ built-in widgets, a powerful style system, web inspired layout managers, and a typography system

        LVGL 之前好像叫做 litterVGL 不知道啥时候改名了,LVGL 和 litterVGL 说的是一个东西。相比于其他的嵌入式 UI,LVGL 的优势在于:1、它是免费开源的,白嫖的力量自然不用多说。2、第二个是它的 UI 风格类似于移动端,是比较好看的,更符合现在人的审美。3、它是跨平台的,基本上是适用于任何 MCU、MPC上显示。正事它的这些优势,LVGL 得以在最近一些年可以流行起来。

2、界面调度机制

        LVGL 虽然提供了 30+ 的组件,和上百种的样式,还支持之定义组件,但是 LVGL 还是缺少了界面管理的功能,所以 LVGL 需要我们关注一下页面管理机制(项目的 GUI 交互不因该只停留在一个界面上)。管理界面管理的机制可以参考 Android 的实现,主要关注的是界面生命周期界面返回栈,这个在最后的参考资料中给出。

2.1 界面的生命周期

        嵌入式 UI 和移动端的 UI 还是有比较大的差距的,所以也不用弄得和 Android 的 Activity 生命周期弄那么复杂,简单概括一下就是,LVGL 的一个界面生命周期有如下几个状态:创建界面和组件、进入界面、界面布局、退出界面、销毁界面,示意图如下。至于下面的从 Exit 到 Entry 状态的转变涉及到界面返回栈,后面会分享到。

lvgl界面切换,LVGL,ui,c语言

        各个部分的主要功能如下表,这样就对界面处于某一状态下的功能有了具体的定义。这样就可以用一个结构体对一个界面进行描述了(见代码实现部分)。

Create 界面 obj 的创建、各种组件的创建、定时器创建
Entry 为组件添加事件,开启定时器,注册监听器

Layout

对界面进行布局,界面处于活跃状态
Exit 屏蔽组件事件,暂停定时器,注销监听器
Destroy 销毁组件、销毁定时器、销毁界面

2.2 界面返回栈

        界面返回栈是执行某项工作时产生的界面的集合,并按照界面打开的顺序排列在返回栈中,如下图所示,打开一个界面就向返回栈中执行 push 操作,关闭一个界面就执行一个 pop 操作。 这样做的好处是,界面与界面之间相互独立,也不用判断界面之间的跳转关系。

lvgl界面切换,LVGL,ui,c语言

         举个例子说明返回栈的优势,如下图所示,假设我们从主界面 scr1 执行了一些操作让其到 scr5 上,那么界面的打开顺序是 scr1 -> scr2 -> scr5,如果用户执行完操作后,关闭了 scr5,那需要在 scr5 中判断要返回到 scr2 上,而不是返回到 scr3、scr4、scr6 上。这样的操作会让界面之间存在关联,会导致在界面较多的时候,难以更改界面的跳转逻辑。

lvgl界面切换,LVGL,ui,c语言

         而返回栈就避免了这样问题,在界面打开的时候,就已经记录了界面的打开顺序,要想返回上一个打开的界面,直接执行 pop 操作就可以了。如下图所示,闭关界面 scr5 后,进入的是 scr2。

lvgl界面切换,LVGL,ui,c语言

         返回栈的 push 和 pop 操作对应界面的生命周期如下图。以 push 和 pop scr2 为例,绿色为界面的活跃状态,绿色条纹表示界面正在构建中,灰色表示界面的退出态(Exit)。

lvgl界面切换,LVGL,ui,c语言

         当有新的界面 scr2 入栈时,前一个界面 scr1 会进入 Exit 态;当 scr2 退出时,会先进入 Exit 态,最后在进入销毁态(Destory);这样做是确保在销毁界面前,关闭界面相关的回调、定时器等事件。

参考资料

VS2019模拟器工程:GitHub - ShallowGreen123/lvgl_mydemo: Daily development

见源码scr模块:https://github.com/ShallowGreen123/data

界面生命周期:SystemView

界面返回栈:Android 界面返回栈文章来源地址https://www.toymoban.com/news/detail-785392.html

到了这里,关于LVGL 界面跳转逻辑的设计与实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • LVGL - RV1109 LVGL UI刷新效率优化-02

    前面好早写过一个文章,说明如何把LVGL移到RV1109上的操作,使用DRM方式!但出现刷新效率不高的问题! 因为一直没有真正的应用在产品中,所以也就放下了! 最近开发上需要考虑低成本,低内存的方案,所以后续考虑使用LVGL上来做UI,所以这里捡回来再炒一次! 这里还是使

    2024年02月06日
    浏览(29)
  • 采用一种比较粗暴的方法解决lvgl切换screen时候造成的卡死问题/LVGL/stm32/内存

    最近有个项目在做基于stm32h7的交互界面制作,大概需要通过lvgl图形库做11个界面加上一堆控件(可以看一下下面的图,只能说真不少),然后就出现了烧录程序后,就会出现白屏(大概率就是卡死了),一开始想简化一下页面,注释了几个(治标不治本,所以再找了别的方法

    2024年03月14日
    浏览(63)
  • LVGL界面开发之模拟器环境搭建

            通常我们在使用 LVGL 进行界面开发时,会先在PC上搭建模拟器环境,而不是直接烧录到硬件板子上,使用模拟器是百利而无一害的,而且它是跨平台的,任何Windows,Linux或macOS系统都可以运行PC模拟器。每当界面有改动时,都可以在PC模拟器上快速便捷地验证并查看修

    2023年04月11日
    浏览(40)
  • LVGL学习(5):物理按键切换焦点之焦点保存和恢复

    最近在做的项目用到了LVGL,基于实际产品使用的特殊情况,屏幕没有接触摸屏,而是使用物理按键来控制所有的object,而且硬件上只有四个按键,功能分别是:返回、左/上、右/下和确定,在切换界面的过程中,也引出了一个焦点切换问题。

    2024年02月08日
    浏览(31)
  • LVGL笔记(6)-电子相册使用手势切换图片(windows仿真)

    今天看了一下lvgl的EVENT枚举,有一个事件 LV_EVENT_GESTURE 是响应手势滑屏的,就把电子相册的按键改为手势操作。 参考文章: 1.作者:weixin_46964996,文章: LVGL 的 LV_EVENT_GESTURE 2.我自己的文章: LVGL笔记(2)-电子相册(windows模拟和ESP32-S3) 先看看效果: 手势滑动相册 这个lvgl的事

    2024年02月11日
    浏览(31)
  • ESP32 移植 LVGL UI 库

    硬件:ESP32 LCD : ST7796  3.5寸 480*320 屏  电容触摸 IC: GT911 IDE: Visual Studio Code with Platoform IO extension LVGL 版本:3.0 移植前已经使用 eSPI 驱动起了 ST7796 屏,别且实现了触摸驱动。 下载 LVGL 代码 下载 LVGL 文件,放置到 工程的 .lib 库中:   编辑配置文件 把 LVGL 源文件根目录下的 

    2024年02月07日
    浏览(25)
  • 嵌入式图形库开发绚丽界面(lvgl、emwin、awtk)

            早些年的单片机开发中,很多都是使用文字菜单界面,这种界面让人感觉非常的朴实无华,内容言简意赅,如果使用图形库进行开发,你的产品一下子就让别人觉得有点高级,更容易去接收它。对于现在来说,很多的嵌入式图形库都可以做出绚丽的界面,占用RAM小,

    2024年01月25日
    浏览(34)
  • metaRTC7集成lvgl ui demo编译指南

    开源轻量级嵌入式图形库lvgl:Light and Versatile Graphics Library,最低只需8kb内存,可为任何 MCU、MPU 和显示类型创建漂亮的 UI。 metaRTC新增lvgl demo,可在linux下编译运行。 https://github.com/metartc/metaRTC/releases/tag/7.0.050 https://github.com/metartc/metaRTC/releases/tag/7.0.050 https://gitee.com/metartc/metaRT

    2024年02月07日
    浏览(31)
  • 【案例讲解】LVGL 向UI任务发送顺序执行的延时任务方法

    更多源码分析请访问: LVGL 源码分析大全 由于 lv_timer_create 的执行实现方式为 后进先出 的栈执行方式,这导致在添加一些需要顺序执行的延时任务时会很麻烦,因此,需要实现一个 先进先出 接口。 以ESP32中 examples/factory_demo 为例:ESP32上的LVGL是采用多任务(相当于Linux上的

    2024年01月16日
    浏览(29)
  • Unity 关卡跳转——开始界面切换到游戏场景的实现

    1 .在已有关卡的基础上,另外新建一个关卡,将其命名为start并进行保存。 2 .在新建立的start关卡中创建TitleScreen.cs脚本,代码如下。 (值得注意的是,这里不要忘记使用unity引擎提供的SceneManagement类,即在脚本顶部添加 using UnityEngine.SceneManagement;) 3 .将TitleScreen.cs脚本挂载到

    2024年02月11日
    浏览(28)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包