LittlevGL 切换界面的演示

作为初学者都会遇到如何切换界面的问题,今天在这里就跟大家演示下如何切换界面。

其实 lvgl 切换界面不是很难,只需要下面几行代码即可实现:

lv_obj_t* btn1,* btn2;
lv_obj_t* current_app_obj_user=NULL;
#define LV_DESKTOP  lv_disp_get_scr_act(NULL)

/**********************
*      MACROS
**********************/

static void btn_event_handler(lv_obj_t * obj, lv_event_t event)
{
    lv_obj_t* parent_menu;
    static lv_style_t style_menu;
    if (event == LV_EVENT_CLICKED) {
        if (obj == btn1) {
            printf("Btn1 Clicked\n");
            if (current_app_obj_user == NULL) {
                current_app_obj_user = lv_obj_create(LV_DESKTOP, NULL);
                lv_obj_set_size(current_app_obj_user, LV_HOR_RES_MAX, LV_VER_RES_MAX);
                parent_menu = current_app_obj_user;
                /* 将桌面的背景颜色设置为其他颜色 */
                lv_style_copy(&style_menu, &lv_style_plain);
                style_menu.body.main_color = LV_COLOR_ORANGE;
                style_menu.body.grad_color = style_menu.body.main_color;
                lv_obj_set_style(parent_menu, &style_menu);

                lv_obj_t* lable = lv_label_create(parent_menu, NULL);
                lv_label_set_text(lable, "this is menu1!");
                lv_obj_align(lable, NULL, LV_ALIGN_CENTER, 0, -10);
                btn2 = lv_btn_create(parent_menu, NULL);
                lv_obj_t* label_btn = lv_label_create(btn2, NULL);
                lv_label_set_text(label_btn, "Back");
                lv_obj_align(btn2, lable, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
                lv_obj_set_event_cb(btn2, btn_event_handler);
            }
        }
        else if (obj == btn2) {
            lv_obj_del(current_app_obj_user);
            current_app_obj_user = NULL;
        }
    }
}

lv_obj_t* desktop = lv_obj_create(lv_disp_get_scr_act(NULL), NULL);
    lv_obj_set_size(desktop, LV_HOR_RES_MAX, LV_VER_RES_MAX);
    lv_obj_t* lable = lv_label_create(desktop, NULL);
    lv_label_set_text(lable, "hello world!");
    lv_obj_align(lable, NULL, LV_ALIGN_CENTER, 0, 0);
    btn1 = lv_btn_create(desktop, NULL);
    lv_obj_t *label_btn = lv_label_create(btn1, NULL);
    lv_label_set_text(label_btn, "Menu1");
    lv_obj_align(btn1, lable, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
    lv_obj_set_event_cb(btn1, btn_event_handler);

我们在main界面定义一个 label和 按钮 btn1,通过点击 Menu1 来切换到界面1,再点击界面1 Back按钮就返回了。

 LittlevGL 切换界面的演示_第1张图片

 

LittlevGL 切换界面的演示_第2张图片 

你可能感兴趣的:(LittlevGL)