Watch代码生成工具

应用 UI 框架

概述

view 的交互：

通过 VIEW_DEFINE 静态定义一个 view（包括 id，proc 以及其他属性）

            
VIEW_DEFINE(flashlight_view, _flashlight_view_handler, NULL, \
        NULL, FLASHLIGHT_VIEW, NORMAL_ORDER, UI_VIEW_LVGL, DEF_UI_VIEW_WIDTH, DEF_UI_VIEW_HEIGHT);
            
        

先通过 res manager 加载 UI Editor 资源

        
static int _load_resource(flashlight_view_data_t *data, bool first_layout)
{
    int32_t ret;

    /* load scene */
    if(first_layout)
    {
        ret = lvgl_res_load_scene(SCENE_FLASHLIGHT_VIEW, &data->res_scene, DEF_STY_FILE, DEF_RES_FILE, DEF_STR_FILE);
        if (ret < 0) {
            SYS_LOG_ERR("SCENE_FLASHLIGHT_VIEW not found");
            return -ENOENT;
        }
    }

    /* load resource */
    lvgl_res_load_pictures_from_scene(&data->res_scene, _bmp_ids, data->img_dsc_bmp, data->pt_bmp, NUM_BMPS);

    if(first_layout)
    {
        /* open font */

        lvgl_res_load_strings_from_scene(&data->res_scene, _txt_ids, data->res_txt, NUM_TXTS);
        /* convert resource */
    }

    SYS_LOG_INF("load resource succeed");

    return 0;
}
        
    

资源加载完成后

调用 GUI 函数初始化整个界面的视图元素，例如 LVGL的

        
static int _flashlight_view_layout_update(view_data_t *view_data, bool first_layout)
{
    lv_obj_t *scr = lv_disp_get_scr_act(view_data->display);
    lv_obj_set_style_bg_color(scr, lv_color_make(0, 0, 0), LV_PART_MAIN);// + rgb(0, 0, 0)
    lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, LV_PART_MAIN);
    
    flashlight_view_data_t *data = view_data->user_data;

    if(first_layout)
    {
        data = app_mem_malloc(sizeof(*data));
        if (!data) {
            return -ENOMEM;
        }

        view_data->user_data = data;
        memset(data, 0, sizeof(*data));

    }

    if (_load_resource(data, first_layout)) {
        app_mem_free(data);
        view_data->user_data = NULL;
        return -ENOENT;
    }

    if(first_layout)
    {
        // 在这创建你的页面对象
        data->switch1 = an_switch_create(scr, 202, 220, 0, NULL);
    }

    return 0;
}
        
    

通过 ui_view_paint 主动更新 view，通常用于需要主动更新 view 的 data，例如表盘需要定时更新时间。

        
// 在这里更新页面内容，请调用ui_view_paint(FLASHLIGHT_VIEW);
static int _flashlight_view_paint(view_data_t *view_data)
{
    // 外部数据获取接口
    // const flashlight_view_presenter_t *presenter = view_get_presenter(view_data);
    
    flashlight_view_data_t *data = view_data->user_data;

    if (data) {
        SYS_LOG_INF("_flashlight_view_paint");
    }
    return 0;
}
        
    

通过 ui_view_delete，销毁 view。

        
static int _flashlight_view_delete(view_data_t *view_data)
{
    flashlight_view_data_t *data = view_data->user_data;
    int i;

    if (data) {
        _unload_resource(data);
        lv_obj_t *scr = lv_disp_get_scr_act(view_data->display);
        lv_obj_del(scr);

        app_mem_free(data);
        view_data->user_data = NULL;
    } else {
        lvgl_res_preload_cancel_scene(SCENE_FLASHLIGHT_VIEW);
    }

    lvgl_res_unload_scene_compact(SCENE_FLASHLIGHT_VIEW);
    return 0;
}
        
    

注意：

由于所有 view 的绘制以及显示请求都是在同一个线程（UI Service 线程），所以

        
int _flashlight_view_handler(uint16_t view_id, uint8_t msg_id, void * msg_data)
{
    view_data_t *view_data = msg_data;

    switch (msg_id) {
    case MSG_VIEW_PRELOAD:
        return _flashlight_view_preload(view_data, false);
    case MSG_VIEW_LAYOUT:
        return _flashlight_view_layout(view_data);
    case MSG_VIEW_DELETE:
        return _flashlight_view_delete(view_data);
    case MSG_VIEW_PAINT:
        return _flashlight_view_paint(view_data);
    case MSG_VIEW_FOCUS:
        return _flashlight_view_focus_changed(view_data, true);
    case MSG_VIEW_DEFOCUS:
        return _flashlight_view_focus_changed(view_data, false);
    case MSG_VIEW_UPDATE:
        return _flashlight_view_updated(view_data);
    default:
        return 0;
    }
    return 0;
}
        
    

`回调不能有等待，以免 UI 卡死`