lvgl 动态创建控件

在前端开发中会有静态资源这一说法，其包含了静态页面以及css样式、图片等等。而在使用lvgl开发页面时，也可以实现类似的静态写法。它可以使页面的加载更快，页面信息也更快展现给用户。

但是这种写法会使内存占用更多，因其需要缓存页面。还有一种写法就是静态和动态相结合的写法。

在lvgl的页面也有生命周期这一说法，lvgl 页面生命周期介绍。所以可以在页面初始化的时候创建控件，在页面卸载的时候清除对应的控件。对于一些不依赖后台数据的控件就默认写死在静态页面上，对于需要根据后台数据更新的控件就可以动态创建。

其效果如下：

源码：

lv_obj_t * ui_main;
void createButton (void)
{
    lv_obj_t * btn1 = lv_btn_create(ui_main);
    lv_obj_center(btn1);

    lv_obj_t * label2 = lv_label_create(btn1);
    lv_label_set_text(label2, "button");
    lv_obj_center(label2);
}

void init (lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if (code == LV_EVENT_SCREEN_LOAD_START)
    {
        createButton(); // 页面加载时创建 button
    } else if (code == LV_EVENT_SCREEN_UNLOAD_START)
    {
        lv_obj_clean(ui_main); // 页面卸载时清除 button
    }
}

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_add_event_cb(ui_page, init, LV_EVENT_ALL, NULL);

    ui_main = lv_obj_create(ui_page);
    lv_obj_remove_style_all(ui_main);
    lv_obj_set_size(ui_main, 200, 200);
    lv_obj_set_style_bg_color(ui_main, lv_color_hex(0xdc7878), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(ui_main, 200, LV_PART_MAIN);
    lv_obj_set_y(ui_main, 76);
    lv_obj_center(ui_main);
}