LVGL8的窗口切换方式

LVGL8实现两个窗口的切换方式:
方法一:切换到窗口2时,删除窗口1的容器,这样可以删除窗口1下的所有子对象,这种方式适用于运存较小的设备

方法二:显示窗口1之前给窗口2的容器设置LV_OBJ_FLAG_HIDDEN隐藏属性,显示窗口2之前给窗口1的容器设置LV_OBJ_FLAG_HIDDEN隐藏属性

还是通过codeblock来模拟代码的运行,代码如下:

#define HIDDEN_WIN  (0)
static lv_obj_t *win1_contanier = NULL;
static lv_obj_t *win2_contanier = NULL;

static void win_btn_event_callback1(lv_event_t* event);
static void win_btn_event_callback2(lv_event_t* event);


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

    lv_obj_t * btn =NULL;
    win1_contanier = lv_obj_create(lv_scr_act());  // 基于屏幕创建一个和屏幕大小一样的容器win1_contanier
    if (win1_contanier != NULL)
    {
        lv_obj_set_style_bg_color(win1_contanier, lv_palette_main(LV_PALETTE_RED), 0);
        lv_obj_set_size(win1_contanier, 800, 480);
        lv_obj_add_style(win1_contanier, &obj_style, 0);

        btn = lv_btn_create(win1_contanier);
        if (btn != NULL)
        {
            lv_obj_set_size(btn, 100, 50);
            lv_obj_add_event_cb(btn, win_btn_event_callback1, LV_EVENT_ALL, NULL); // 给对象添加CLICK事件和事件处理回调函数
            lv_obj_center(btn);

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


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

    lv_obj_t * btn =NULL;
    win2_contanier = lv_obj_create(lv_scr_act()); // 基于屏幕创建一个和屏幕大小一样的容器win2_contanier
    if (win2_contanier != NULL)
    {
        lv_obj_set_style_bg_color(win2_contanier, lv_palette_main(LV_PALETTE_BLUE), 0);
        lv_obj_set_size(win2_contanier, 800, 480);
        lv_obj_add_style(win2_contanier, &obj_style, 0);

        btn = lv_btn_create(win2_contanier);
        if (btn != NULL)
        {
            lv_obj_set_size(btn, 100, 50);
            lv_obj_add_event_cb(btn, win_btn_event_callback2, LV_EVENT_ALL, NULL); // 给对象添加CLICK事件和事件处理回调函数
            lv_obj_center(btn);
            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); // 标签居中显示
            }
        }
     }
}


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)
    {
#if HIDDEN_WIN
        // 给窗口1的容器添加隐藏属性,清除窗口2的隐藏属性
        lv_obj_add_flag(win1_contanier, LV_OBJ_FLAG_HIDDEN);
        lv_obj_clear_flag(win2_contanier, LV_OBJ_FLAG_HIDDEN);
#else
        // 删除窗口1的win1_contanier容器,这样就可以把win1_contanier上的子对象全部删除,然后显示窗口2
        lv_obj_del(win1_contanier);
        show_button_win2();
#endif
    }
}


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)
    {
#if HIDDEN_WIN
        // 给窗口2的容器添加隐藏属性,清除窗口1的隐藏属性
        lv_obj_add_flag(win2_contanier, LV_OBJ_FLAG_HIDDEN);
        lv_obj_clear_flag(win1_contanier, LV_OBJ_FLAG_HIDDEN);
#else
        // 删除窗口2的win2_contanier容器,这样就可以把win2_contanier上的子对象全部删除,然后显示窗口1
        lv_obj_del(win2_contanier);
        show_button_win1();
#endif
    }
}


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

运行效果:

  • 19
    点赞
  • 116
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
lvgl8中,你可以使用`lv_page`和`lv_tabview`来实现滑动切换界面的效果。 使用`lv_page`可以让你的界面拥有滚动条和边缘效果。你可以在`lv_page`中添加多个子元素,每个子元素就是一个界面。然后你可以使用`lv_page`的API切换不同的子元素。 使用`lv_tabview`可以让你的界面在底部显示多个标签,每个标签对应一个界面。当你点击不同的标签时,就会切换到对应的界面。 以下是一个使用`lv_page`的示例代码: ```c static lv_obj_t * page1; static lv_obj_t * page2; void create_pages(lv_obj_t * parent) { // 创建页面1 page1 = lv_page_create(parent, NULL); lv_page_set_scrollbar_mode(page1, LV_SCROLLBAR_MODE_ON); lv_page_set_edge_flash(page1, true); lv_page_set_style(page1, LV_PAGE_STYLE_SB, &lv_style_pretty); lv_page_set_style(page1, LV_PAGE_STYLE_BG, &lv_style_pretty_color); lv_obj_t * label1 = lv_label_create(page1, NULL); lv_label_set_text(label1, "This is page 1"); // 创建页面2 page2 = lv_page_create(parent, NULL); lv_page_set_scrollbar_mode(page2, LV_SCROLLBAR_MODE_ON); lv_page_set_edge_flash(page2, true); lv_page_set_style(page2, LV_PAGE_STYLE_SB, &lv_style_pretty); lv_page_set_style(page2, LV_PAGE_STYLE_BG, &lv_style_pretty_color); lv_obj_t * label2 = lv_label_create(page2, NULL); lv_label_set_text(label2, "This is page 2"); // 设置初始显示的页面 lv_page_focus(page1, 0); } void switch_page() { static bool page1_visible = true; if (page1_visible) { lv_page_focus(page2, 0); } else { lv_page_focus(page1, 0); } page1_visible = !page1_visible; } ``` 在这个例子中,我们创建了两个页面,然后使用`lv_page_focus`函数在两个页面之间切换。 以下是一个使用`lv_tabview`的示例代码: ```c static lv_obj_t * tabview; void create_tabs(lv_obj_t * parent) { // 创建tabview tabview = lv_tabview_create(parent, NULL); // 创建tab1 lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1"); lv_obj_t * label1 = lv_label_create(tab1, NULL); lv_label_set_text(label1, "This is tab 1"); // 创建tab2 lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2"); lv_obj_t * label2 = lv_label_create(tab2, NULL); lv_label_set_text(label2, "This is tab 2"); } void switch_tab() { static bool tab1_visible = true; if (tab1_visible) { lv_tabview_set_tab_act(tabview, 1, LV_ANIM_ON); // 切换到tab2 } else { lv_tabview_set_tab_act(tabview, 0, LV_ANIM_ON); // 切换到tab1 } tab1_visible = !tab1_visible; } ``` 在这个例子中,我们创建了一个`lv_tabview`,然后在其中添加了两个标签和对应的界面。使用`lv_tabview_set_tab_act`函数可以在两个标签之间切换

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值