LVGL V8应用——通过按键切换页面

news2025/7/8 23:00:48

一、按键切换对象

程序

全局变量

static lv_obj_t *contanier1= NULL;
static lv_obj_t *contanier2= NULL;

按钮对应回调函数，实现容器的切换

static void win_btn_event_callback1(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if (code == LV_EVENT_CLICKED)
    {
        // 给窗口1的容器添加隐藏属性，清除窗口2的隐藏属性
        lv_obj_add_flag(contanier1, LV_OBJ_FLAG_HIDDEN);
        lv_obj_clear_flag(contanier2, LV_OBJ_FLAG_HIDDEN);
    }
}


static void win_btn_event_callback2(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if (code == LV_EVENT_CLICKED)
    {
        // 给窗口2的容器添加隐藏属性，清除窗口1的隐藏属性
        lv_obj_add_flag(contanier2, LV_OBJ_FLAG_HIDDEN);
        lv_obj_clear_flag(contanier1, LV_OBJ_FLAG_HIDDEN);
    }
}

创建容器contanier1和contanier2

void cont1(lv_obj_t *page)
{
    static lv_style_t obj_style;
    lv_style_reset(&obj_style);
    lv_style_init(&obj_style); // 初始化按钮样式
    lv_style_set_radius(&obj_style, 0); // 设置样式圆角弧度

    contanier1= lv_obj_create(page);  // 基于屏幕创建一个和屏幕大小一样的容器win1_contanier

    if (contanier1!= NULL)
    {
        lv_obj_set_style_bg_color(contanier1, lv_palette_main(LV_PALETTE_RED), 0);
        lv_obj_align(contanier1,LV_ALIGN_TOP_MID,0,0);
        lv_obj_set_size(contanier1, 280, 100);
        lv_obj_add_style(contanier1, &obj_style, 0);

        lv_obj_t * label = lv_label_create(contanier1);
        lv_label_set_text(label, "Cont1"); // 设置标签文本

        lv_obj_t * btn = lv_btn_create(contanier1);
        if (btn != NULL)
        {
            lv_obj_set_size(btn, 60, 40);
            lv_obj_align(btn,LV_ALIGN_BOTTOM_RIGHT,0,0);
            lv_obj_add_event_cb(btn, win_btn_event_callback1, LV_EVENT_ALL, page); // 给对象添加CLICK事件和事件处理回调函数

            lv_obj_t *label = lv_label_create(btn); // 给按钮添加标签
            if (label != NULL)
            {
                lv_label_set_text(label, "Button1"); // 设置标签文本
                lv_obj_center(label); // 标签居中显示
            }
        }
    }
}

void cont2(lv_obj_t *page)
{
    static lv_style_t obj_style;
    lv_style_reset(&obj_style);
    lv_style_init(&obj_style); // 初始化按钮样式
    lv_style_set_radius(&obj_style, 0); // 设置样式圆角弧度

    win2_contanier = lv_obj_create(page); // 基于屏幕创建一个和屏幕大小一样的容器win2_contanier
    if (contanier2 != NULL)
    {
        lv_obj_set_style_bg_color(contanier2 , lv_palette_main(LV_PALETTE_BLUE), 0);
        lv_obj_align(contanier2 ,LV_ALIGN_TOP_MID,0,0);
        lv_obj_set_size(contanier2 , 280, 100);
        lv_obj_add_style(contanier2 , &obj_style, 0);

        lv_obj_t * label = lv_label_create(contanier2 );
        lv_label_set_text(label, "Cont2"); // 设置标签文本

        lv_obj_t * btn = lv_btn_create(contanier2 );
        if (btn != NULL)
        {
            lv_obj_set_size(btn, 60, 40);
            lv_obj_align(btn,LV_ALIGN_BOTTOM_RIGHT,0,0);
            lv_obj_add_event_cb(btn, win_btn_event_callback2, LV_EVENT_ALL, page); // 给对象添加CLICK事件和事件处理回调函数
            lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_RED), 0);

            lv_obj_t *label = lv_label_create(btn); // 给按钮添加标签
            if (label != NULL)
            {
                lv_label_set_text(label, "Button2"); // 设置标签文本
                lv_obj_center(label); // 标签居中显示
            }
        }
    }
}

调用容器创建函数，并隐藏容器2

void main(void)
{
    lv_obj_t * page = lv_obj_create(lv_scr_act());
    lv_obj_set_size(page, LV_HOR_RES, LV_VER_RES);       //设置到屏幕大小

    label_refresh(page);

    cont1(page);
    cont2(page);
    lv_obj_add_flag(win2_contanier, LV_OBJ_FLAG_HIDDEN);
}

效果

在这里插入图片描述
在这里插入图片描述
按下按钮，只执行Cont1与Cont2之间的切换，其余部分不变

二、按键切换页面

方法1：

通过LV_OBJ_FLAG_HIDDEN隐藏属性实现页面切换，来源

//win1按钮回调函数，按下之后隐藏win1，显示win2
static void win_btn_event_callback1(lv_event_t* event)
{
    lv_event_code_t code = lv_event_get_code(event);
    if (code == LV_EVENT_CLICKED)
    {
        // 给窗口1的容器添加隐藏属性，清除窗口2的隐藏属性
        lv_obj_add_flag(win1_contanier, LV_OBJ_FLAG_HIDDEN);
        lv_obj_clear_flag(win2_contanier, LV_OBJ_FLAG_HIDDEN);
    }
}
 //win2按钮回调函数，按下之后隐藏win2，显示win1
static void win_btn_event_callback2(lv_event_t* event)
{
    lv_event_code_t code = lv_event_get_code(event);
    if (code == LV_EVENT_CLICKED)
    {
        // 给窗口2的容器添加隐藏属性，清除窗口1的隐藏属性
        lv_obj_add_flag(win2_contanier, LV_OBJ_FLAG_HIDDEN);
        lv_obj_clear_flag(win1_contanier, LV_OBJ_FLAG_HIDDEN);
    }
}

创建两个窗口，给其中一个窗口加上隐藏属性

void lv_win_switch_main()
{
    show_button_win1();
    show_button_win2();
    // 给窗口2的容器添加隐藏属性
    lv_obj_add_flag(win2_contanier, LV_OBJ_FLAG_HIDDEN);

方法2：

在回调函数中，创建新窗口并删除旧窗口


static void win_btn_event_callback1(lv_event_t* event)
{
    lv_event_code_t code = lv_event_get_code(event);
    if (code == LV_EVENT_CLICKED)
    {
        // 删除窗口1的win1_contanier容器，这样就可以把win1_contanier上的子对象全部删除，然后显示窗口2
        lv_obj_del(win1_contanier);
        show_button_win2();
    }
}
 
 
static void win_btn_event_callback2(lv_event_t* event)
{
    lv_event_code_t code = lv_event_get_code(event);
    if (code == LV_EVENT_CLICKED)
    {
        // 删除窗口2的win2_contanier容器，这样就可以把win2_contanier上的子对象全部删除，然后显示窗口1
        lv_obj_del(win2_contanier);
        show_button_win1();
    }
}

void lv_win_switch_main()
{
    show_button_win1();
#endif

方法3：

使用下面两个函数加载屏幕

直接加载该屏幕scr
参数1：要加载的屏幕
static inline void lv_scr_load(lv_obj_t * scr)
{
    lv_disp_load_scr(scr);
}

通过动画的方式显示
参数1：要加载的屏幕
参数2：动画类别
参数3：切换动画需要的时间
参数4：为true时则会在切换界面后将旧界面删除，节约内存
void lv_scr_load_anim(lv_obj_t * scr, lv_scr_load_anim_t anim_type, uint32_t time, uint32_t delay, bool auto_del);

动画类别：
LV_SCR_LOAD_ANIM_NONE 在 delay 毫秒后立即切换
LV_SCR_LOAD_ANIM_OVER_LEFT/RIGHT/TOP/BOTTOM 将新屏幕按指定的方向移动
LV_SCR_LOAD_ANIM_MOVE_LEFT/RIGHT/TOP/BOTTOM 新屏幕和当前屏幕都按指定的方向移动
LV_SCR_LOAD_ANIM_FADE_ON 将新屏幕淡入旧屏幕

代码

创建页面1

    lv_obj_t * one = lv_obj_create(lv_scr_act());                  	//在默认屏上创建obj对象
    lv_obj_set_style_bg_color(one,lv_color_hex(0xeeffcc), LV_STATE_DEFAULT); // obj背景色设成黄色
    lv_obj_set_size(one, LV_HOR_RES, LV_VER_RES);       			// 设置到屏幕大小

创建页面2

	lv_obj_t * two = lv_obj_create(NULL);                          // 创建新屏幕但未加载到显示
    lv_obj_set_style_bg_color(two,lv_color_hex(0x00d8db), LV_STATE_DEFAULT);    // 背影色设成蓝色
    lv_obj_set_size(two, LV_HOR_RES, LV_VER_RES);       			//设置到屏幕大小

从one创建按钮one_btn ，two创建按钮two_btn ，分别注册回调函数，传入用户自定义数据two，one

	lv_obj_t* one_btn = lv_btn_create(one);
    lv_obj_align(one_btn, LV_ALIGN_TOP_MID, 0, 20);

    lv_obj_t* label = lv_label_create(one_btn);             // 创建label
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);         // label居屏幕中心对齐
    lv_label_set_text(label, "ONE");                    // label显示ONE
    lv_obj_add_event_cb(one_btn, one_btn_event_handler, LV_EVENT_CLICKED, two);

    lv_obj_t* two_btn = lv_btn_create(two);
    lv_obj_align(two_btn, LV_ALIGN_TOP_MID, 0, 20);

    label = lv_label_create(two_btn);                       // 创建label
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);         // 居中对齐
    lv_label_set_text(label, "TWO");                    // label上显示TWO
    lv_obj_add_event_cb(two_btn, two_btn_event_handler, LV_EVENT_CLICKED, one);

当按钮按下时调用回调函数，获取用户自定义数据two，one，并切换到相应界面lv_scr_load_anim（）；

void one_btn_event_handler(lv_event_t *e)
{
    lv_obj_t * two = lv_event_get_user_data(e);
    
	// 加载屏幕TWO,动画效果为LV_SCR_LOAD_ANIM_FADE_ON,切换时间为100ms,延迟0ms后从第一屏开始切换，切换完成后隐藏屏幕二
    lv_scr_load_anim(two, LV_SCR_LOAD_ANIM_FADE_ON, 100, 0, false); 
}
void two_btn_event_handler(lv_event_t *e)
{
    lv_obj_t * one = lv_event_get_user_data(e);
    
	// 加载屏幕one,动画效果为LV_SCR_LOAD_ANIM_FADE_ON,切换时间为100ms,延迟0ms后从第二屏开始切换，切换完成后隐藏屏幕一
    lv_scr_load_anim(one, LV_SCR_LOAD_ANIM_FADE_ON, 100, 0, false); 
}

效果

按下按钮one切换到屏幕two
在这里插入图片描述
在这里插入图片描述

方法4：

在唯一画布上建立多个界面，每个界面大小都等于屏幕大小

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

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

相关文章

猿创征文｜前端到全栈，一名 IT 初学者的学习与成长之路

猿创征文｜前端到全栈，一名 IT 初学者的学习与成长之路

目录导读写在前面创作之路❤ 前端开发工程师知识体系❤ Vue&React 开发框架❤ 前端开发实战❤ Linux&云原生小马技术栈❤ 主打技术专栏❤ 其他专栏(实用干货)❤ 技术栈词云学习与成长总结写在前面 2021 年 7 月 18 日我在 CSDN 发布了第一篇技术文章，距现在…
阅读更多...
如何用html制作一个简单的网页

如何用html制作一个简单的网页

哈喽，大家好！我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作，其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。 了解html 1. 学习html之前先要知道html是什么 HTML的全称为超文本标…
阅读更多...
查看Chrome浏览器版本及下载对应的webdriver，并下载安装

查看Chrome浏览器版本及下载对应的webdriver，并下载安装

查看Chrome浏览器版本及下载对应的webdriver，并下载 文章目录查看Chrome浏览器版本及下载对应的webdriver，并下载一，查看自己电脑的Chrome的版本二，webdriver的对应版本三，安装一，查看自己电脑的Chrome的版…
阅读更多...
nvm介绍、安装、报错处理以及使用

nvm介绍、安装、报错处理以及使用

前言 工作中我们偶尔可能同时在进行多个项目开发，而多个不同的项目所使用的 node 版本又是不一样的，在这种情况下，对于维护多个版本的node 将会是一件非常麻烦的事情，因为需要操作做卸载安装操作，而nvm 就是为解决这个…
阅读更多...
关于Vue3的defineProps用法

关于Vue3的defineProps用法

之前只是单纯的会用，因为vue关于父子组件通讯差别有一点点大。 1.在父组件内传递变量的时候，需要加冒号:，否则你就只是单纯的传递了一个字符串而已。 2.在子组件里不需要引入defineProps就可调用该函数去接收父组件传来的属性。 我个人在这里…
阅读更多...
axios基本使用及跨域问题详解

axios基本使用及跨域问题详解

前端请求自然也发展迅速，从原生的XHR到jquery ajax，再到现在的axios和fetch。axios（ https://axios-http.com/zh/ ）是Vue推荐的http库，这个还是要了解一点的。 安装 $ npm install axios基本使用的例子 1、在main.j…
阅读更多...
Vue项目：学生管理系统

Vue项目：学生管理系统

💂 个人主页: 陶然同学🤟 版权: 本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦💅 想寻找共同成长的小伙伴，请点击【Java全栈开发社区】…
阅读更多...
Nginx的安装配置教程

Nginx的安装配置教程

一、Nginx的下载与安装 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好 1.下载 在Nginx的官网的下载页面…
阅读更多...
JavaScript-匿名函数

JavaScript-匿名函数

什么是匿名函数 1、匿名函数,即没有名称的函数 2、如果单独只写一个匿名函数，此时是不符合语法要求的 会报错。需要给 匿名函数包裹一个括号，使之成为表达式。 3、被小括号包裹的内容会被js识别为一个函数表达式 如何执行和使用匿名函数？ …
阅读更多...
前端直传阿里云OSS

前端直传阿里云OSS

阿里云对象存储服务（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。 目前通过Web端直传文件（Object）到OSS，有两种方案： 一、利用OSS…
阅读更多...
web渗透之文件上传漏洞

web渗透之文件上传漏洞

目录一、原理二、利用方式三、文件上传的风险处四、文件上传漏洞的危害五、文件上传漏洞常见的绕过方式1、前端绕过检测2、mime类型检测绕过3、黑名单绕过（1）、相似扩展名（2）、apache配置文件（3）、大小写绕…
阅读更多...
如何将html模板资源转为vuecli项目

如何将html模板资源转为vuecli项目

1.目标 将找到的html素材模板，转换为vue的文件。 这个网上照了一圈，没找到合适的方案，就自己尝试弄了一下 目标效果 2.具体步骤 1. 通过vueclie 创建项目 vue create 项目名称然后把默认的样式删除了 2. 将静态资源放到vue项目的 publi…
阅读更多...
【python】自动填写问卷星问卷及提交

【python】自动填写问卷星问卷及提交

前言：问卷是很好的网络调查方式之一，近年来，问卷星被广泛应用于各方面的调查。本文介绍了利用python代码自动填写问卷星基本题目，拥有自动填写、解决智能验证、批量提交问卷等功能。 目录 1.下载浏览器驱动 2. selenium基本配置…
阅读更多...
【Java 基础篇】Java 初识、编译运行机制及开发环境搭建

【Java 基础篇】Java 初识、编译运行机制及开发环境搭建

一、Java 语言初识二、Java 编译运行机制2.1 JVM、JRE、JDK 三大概念介绍2.2 Java 是如何运行的三、Java 开发环境搭建(文末附下载地址)四、第一个 Java 项目4.1 创建项目和 .Java 源文件4.2 输出 hello world一、Java 语言初识 Java 是由 Sun Microsystems 公司于 1995 年 5 …
阅读更多...
十大经典排序算法（下）

十大经典排序算法（下）

🍓个人主页：bit.. 🍒系列专栏：Linux(Ubuntu)入门必看 C语言刷题 数据结构与算法 HTML和CSS3 目录 1.6 快速排序 1. 算法步骤 2. 动图演示 3.代码实现 1.7 堆排序 1. 算法步骤 2. 动图演示 3. 代码实现 1.8 计数排…
阅读更多...
JavaScript注册监听事件与清除监听事件

JavaScript注册监听事件与清除监听事件

JavaScript中有两种方法可以注册监听事件，一种是传统的注册方式，on事件名称的注册方法，如btn.onclick,还有方法监听事件注册方式， addEventListener()和ie8以下的attachEvent()。 注册监听事件 传统方式 语法格式：元…
阅读更多...
ES6笔记————let，箭头函数，剩余参数

ES6笔记————let，箭头函数，剩余参数

目录 一.let,var,const区别 let const 区别 二，解构 1 数组解构 2对象解构 三，箭头函数 1 基础语法 2 省略写法 3 对象方法里的this 4 apply/call调用时的this 5 箭头函数中this 8 箭头函数应用 四，剩余函数 一.let,var,con…
阅读更多...
【bug】Failed at the node-sass@4.14.1 postinstall script（终于圆满解决）

【bug】Failed at the node-sass@4.14.1 postinstall script（终于圆满解决）

花了两个小时才解决 首先是从git上克隆项目到本地，然后安装nodele_modules，输入npm i安装 安装到一半报错 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass4.14.1 postinstall: node scripts/build.js npm ERR! Exit status 1 npm ERR! …
阅读更多...
关于 Vue “__ob__:Observer“ 属性的解决方案

关于 Vue “__ob__:Observer“ 属性的解决方案

问题描述 我们操作 Vue 数据的时候，经常会看到这个属性: __ob__:Observer在我们操作这个数据的时候，如果想要单独拿这个数据里面的值，就会返回 undefined经过我在网上查找相关资料，发现 __ob__:Observer 是 Vue 中一个非常重要的…
阅读更多...
【vue】diff 算法详解

【vue】diff 算法详解

一、diff算法是什么 diff算法是一种通过同层的树节点进行比较的高效算法 diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图，所以 diff 算法本质上就是比较两个js对象的差异 特点 1. 比较只会在同层级进行，不会跨层级比较 2. 在diff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023