LVGL 入门（十一）：实现两个界面

目录一、前言二、基础界面创建三、LVGL 图层介绍四、双界面基础实现方法五、总结六、结尾一、前言我是Hello_Embed在前面的学习中我们掌握了 LVGL 按钮、标签等基础控件的使用以及事件响应、定时器等核心功能。而在实际的嵌入式 GUI 开发中多界面交互是必不可少的需求。本篇我们先从最简单的方式入手学习如何创建两个独立界面实现按钮触发打印对应界面信息的基础功能为后续的界面切换打下基础。二、基础界面创建LVGL 提供了丰富的 API能帮助我们快速搭建自定义界面。我们可以借助官方 API轻松创建界面 A 和界面 B实现核心需求创建两个按钮按下后打印对应界面的信息。开发前建议新建文件夹存放代码.c与.h文件参考 LVGL 工程例程编写最后将文件夹添加到 CodeBlocks 中编译。补充官方按钮控件参考文档https://docs.lvgl.io/master/widgets/button.html官方基础按钮示例代码staticvoidevent_handler(lv_event_t*e){lv_event_code_tcodelv_event_get_code(e);if(codeLV_EVENT_CLICKED){LV_LOG_USER(Clicked);}elseif(codeLV_EVENT_VALUE_CHANGED){LV_LOG_USER(Toggled);}}voidlv_example_button_1(void){lv_obj_t*btn2lv_button_create(lv_screen_active());lv_obj_add_event_cb(btn2,event_handler,LV_EVENT_ALL,NULL);lv_obj_align(btn2,LV_ALIGN_CENTER,0,40);lv_obj_add_flag(btn2,LV_OBJ_FLAG_CHECKABLE);lv_obj_set_height(btn2,LV_SIZE_CONTENT);labellv_label_create(btn2);lv_label_set_text(label,Toggle);lv_obj_center(label);}对官方代码稍加改造即可实现自定义按钮staticvoidevent_handler(lv_event_t*e);voidcode_display(void);voidcode_display(void){lv_obj_t*btnlv_button_create(lv_screen_active());lv_obj_add_event_cb(btn,event_handler,LV_EVENT_ALL,NULL);lv_obj_align(btn,LV_ALIGN_CENTER,0,40);lv_obj_add_flag(btn,LV_OBJ_FLAG_CHECKABLE);lv_obj_set_height(btn,LV_SIZE_CONTENT);lv_obj_t*labellv_label_create(btn);lv_label_set_text(label,Toggled);lv_obj_center(label);}staticvoidevent_handler(lv_event_t*e){lv_event_code_tcodelv_event_get_code(e);if(codeLV_EVENT_VALUE_CHANGED){LV_LOG_USER(Toggled);}}三、LVGL 图层介绍我们创建的界面默认直接显示在屏幕层LVGL 还包含顶层、系统层这两个图层默认显示在屏幕层上方。调高图层不透明度后会直接覆盖屏幕层内容测试代码如下lv_obj_set_style_bg_color(lv_layer_top(),lv_color_hex(0xffff00),0);lv_obj_set_style_bg_opa(lv_layer_top(),LV_OPA_COVER,0);执行后屏幕变为黄色按钮会被顶层覆盖。四、双界面基础实现方法方法 1编译开关切换简易方式通过宏定义开关编译时切换显示界面 A / 界面 Bvoidcode_display(void){#if0lv_obj_t*btnlv_button_create(lv_screen_active());lv_obj_add_event_cb(btn,event_handler,LV_EVENT_ALL,NULL);lv_obj_align(btn,LV_ALIGN_CENTER,0,40);lv_obj_add_flag(btn,LV_OBJ_FLAG_CHECKABLE);lv_obj_set_height(btn,LV_SIZE_CONTENT);lv_obj_t*labellv_label_create(btn);lv_label_set_text(label,Page[a]);lv_obj_center(label);#elselv_obj_t*btnlv_button_create(lv_screen_active());lv_obj_add_event_cb(btn,event_handler,LV_EVENT_ALL,NULL);lv_obj_align(btn,LV_ALIGN_CENTER,0,40);lv_obj_add_flag(btn,LV_OBJ_FLAG_CHECKABLE);lv_obj_set_height(btn,LV_SIZE_CONTENT);lv_obj_t*labellv_label_create(btn);lv_label_set_text(label,Page[b]);lv_obj_center(label);#endif}方法 2函数封装切换将两个界面封装为独立函数通过注释调用函数实现界面切换按钮可打印对应界面信息voidcode_display(void){//page_a();page_b();}staticvoidpage_a(void){lv_obj_t*btnlv_button_create(lv_screen_active());lv_obj_align(btn,LV_ALIGN_CENTER,0,40);lv_obj_add_flag(btn,LV_OBJ_FLAG_CHECKABLE);lv_obj_set_height(btn,LV_SIZE_CONTENT);lv_obj_t*labellv_label_create(btn);lv_label_set_text(label,Page[a]);lv_obj_center(label);lv_obj_add_event_cb(btn,event_handler,LV_EVENT_ALL,label);}staticvoidpage_b(void){lv_obj_t*btnlv_button_create(lv_screen_active());lv_obj_align(btn,LV_ALIGN_CENTER,0,40);lv_obj_add_flag(btn,LV_OBJ_FLAG_CHECKABLE);lv_obj_set_height(btn,LV_SIZE_CONTENT);lv_obj_t*labellv_label_create(btn);lv_label_set_text(label,Page[b]);lv_obj_center(label);lv_obj_add_event_cb(btn,event_handler,LV_EVENT_ALL,label);}staticvoidevent_handler(lv_event_t*e){lv_event_code_tcodelv_event_get_code(e);lv_obj_t*labellv_event_get_user_data(e);if(codeLV_EVENT_VALUE_CHANGED){LV_LOG_USER(%s,lv_label_get_text(label));}}运行效果如下按钮触发后可正常打印界面标识五、总结基于 LVGL 官方 API 可快速创建按钮、标签搭建基础界面LVGL 包含屏幕层、顶层、系统层高层级图层会覆盖下层可通过编译开关、函数封装两种简易方式实现双界面创建与切换。六、结尾本文学习的双界面实现方式仅适用于基础测试无法满足实际产品的动态切换需求。我是Hello_Embed持续分享 LVGL 实战干货下一篇我们将学习真正的界面动态切换方法敬请关注