lvgl 实现h5端的Toast 弹窗效果

最新推荐文章于 2024-05-21 09:30:00 发布

一只前端猿

最新推荐文章于 2024-05-21 09:30:00 发布

阅读量425

点赞数 9

分类专栏： lvgl 文章标签： c语言嵌入式硬件单片机 c++ stm32

本文链接：https://blog.csdn.net/m0_61704502/article/details/138684228

版权

lvgl 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

lvgl 利用定时器实现类似h5端的toast弹窗效果，点击按钮后，toast弹窗出现，延时1s后自动关闭。效果如下：

源码如下：

    lv_obj_t * ui_mask;
    lv_timer_t * timer;
    static void closeToast()
    {
        lv_obj_add_flag(ui_mask, LV_OBJ_FLAG_HIDDEN);
    }
    static void event_handler(lv_event_t * e)
    {
        lv_event_code_t code = lv_event_get_code(e);
        if(code == LV_EVENT_CLICKED) {
            lv_obj_clear_flag(ui_mask, LV_OBJ_FLAG_HIDDEN);
            if (timer) lv_timer_del(timer);
            timer = lv_timer_create(closeToast, 1000,  NULL); // 设置2s后关闭toast
        }
    }

void page_init(void){
    ui_page = lv_obj_create(NULL);
    lv_obj_remove_style_all(ui_page);
    lv_obj_set_size(ui_page, lv_pct(100), lv_pct(100));
    lv_obj_set_style_bg_color(ui_page, lv_color_hex(0x000000), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(ui_page, 255, LV_PART_MAIN);

    lv_obj_t * ui_main = lv_obj_create(ui_page);
    lv_obj_remove_style_all(ui_main);
    lv_obj_set_size(ui_main, lv_pct(100), LV_SIZE_CONTENT);
    lv_obj_set_y(ui_main, 76);
    // lv_obj_set_flex_flow(ui_main, LV_FLEX_FLOW_COLUMN);
    lv_obj_t * label;

    lv_obj_t * btn1 = lv_btn_create(ui_main);
    lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_center(btn1);

    label = lv_label_create(btn1);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);

    ui_mask = lv_obj_create(ui_page);
    lv_obj_remove_style_all(ui_mask);
    lv_obj_set_size(ui_mask, lv_pct(100), lv_pct(100));
    lv_obj_set_style_bg_color(ui_mask, lv_color_hex(0x000000), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(ui_mask, 220, LV_PART_MAIN);
    lv_obj_add_flag(ui_mask, LV_OBJ_FLAG_HIDDEN);

    lv_obj_t* ui_toast = lv_obj_create(ui_mask);
    lv_obj_remove_style_all(ui_toast);
    lv_obj_set_size(ui_toast, 120, 40);
    lv_obj_set_style_bg_color(ui_toast, lv_color_hex(0x262626), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(ui_toast, 250, LV_PART_MAIN);
    lv_obj_set_style_radius(ui_toast, 8, LV_PART_MAIN);
    lv_obj_center(ui_toast);

    label = lv_label_create(ui_toast);
    lv_label_set_text(label, "Toast");
    lv_obj_center(label);
    lv_obj_set_style_text_color(label, lv_color_hex(0xFFFFFF), LV_PART_MAIN);
    lv_obj_set_style_text_opa(label, 255, LV_PART_MAIN);
 }