1. Button to switch objects
program
global variable
static lv_obj_t *contanier1= NULL;
static lv_obj_t *contanier2= NULL;
The button corresponds to the callback function to realize the switching of the container
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);
}
}
Create containers contanier1 and 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); // 标签居中显示
}
}
}
}
Call the container creation function and hide container 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);
}
Effect
Press the button, only switch between Cont1 and Cont2, and the rest remain unchanged
2. Button to switch pages
method 1:
Page switching is realized through LV_OBJ_FLAG_HIDDEN hidden attribute, source
//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);
}
}
Create two windows and add a hidden attribute to one of them
void lv_win_switch_main()
{
show_button_win1();
show_button_win2();
// 给窗口2的容器添加隐藏属性
lv_obj_add_flag(win2_contanier, LV_OBJ_FLAG_HIDDEN);
Method 2:
In the callback function, create the new window and delete the old one
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
Method 3:
Use the following two functions to load the screen
直接加载该屏幕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);
Animation class:
LV_SCR_LOAD_ANIM_NONE Toggle immediately after delay milliseconds
LV_SCR_LOAD_ANIM_OVER_LEFT/RIGHT/TOP/BOTTOM Move the new screen in the specified direction
LV_SCR_LOAD_ANIM_MOVE_LEFT/RIGHT/TOP/BOTTOM Both the new screen and the current screen move in the specified direction
LV_SCR_LOAD_ANIM_FADE_ON Fade the new screen into the old screen
the code
create page 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); // 设置到屏幕大小
create page 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); //设置到屏幕大小
Create button one_btn from one, create button two_btn from two, register callback functions respectively, and pass in user-defined data 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);
Call the callback function when the button is pressed, get the user-defined data two, one, and switch to the corresponding interface 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);
}
Effect
Press button one to switch to screen two
Method 4:
Create multiple interfaces on a single canvas, each equal to the screen size