lvgl 实现表格table，并且固定表头

lvgl自带table组件不能实现固定住表格头部，但是在用户角度看，固定表头是必须的。以下是参考h5原生来实现的表格组件，效果如下：

lvgl table源码如下：

1、表格数据可根据具体业务调整数据大小

typedef struct tableData {
    char str[20];
} tableData;
// 表头            
tableData header[3] = {
    {
        .str = "h1"
    },
    {
        .str = "h2"
    },
    {
        .str = "h3"
    }
};
// 表格数据
tableData body[5][3] = {
    {
        {
            .str = "text1"
        },
        {
            .str = "text2"
        },
        {
            .str = "text3"
        }
    },
    {
        {
            .str = "text4"
        },
        {
            .str = "text5"
        },
        {
            .str = "text6"
        }
    },
    {
        {
            .str = "text1"
        },
        {
            .str = "text2"
        },
        {
            .str = "text3"
        }
    },
    {
        {
            .str = "text1"
        },
        {
            .str = "text2"
        },
        {
            .str = "text3"
        }
    },
    {
        {
            .str = "text1"
        },
        {
            .str = "text2"
        },
        {
            .str = "text3"
        }
    }
};

2、table 具体实现源码：

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 * ui_tableHeader = lv_obj_create(ui_main);
    lv_obj_remove_style_all(ui_tableHeader);
    lv_obj_set_size(ui_tableHeader, lv_pct(100), LV_SIZE_CONTENT);
    lv_obj_set_flex_flow(ui_tableHeader, LV_FLEX_FLOW_ROW);
    lv_obj_set_style_bg_color(ui_tableHeader, lv_color_hex(0x262626), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(ui_tableHeader, 255, LV_PART_MAIN);
    for (size_t i = 0; i < 3; i++)
    {
        lv_obj_t * ui_headerItem = lv_obj_create(ui_tableHeader);
        lv_obj_remove_style_all(ui_headerItem);
        lv_obj_set_size(ui_headerItem, lv_pct(100/3), 48);
        if (i< 2)
        {
            lv_obj_set_style_border_width(ui_headerItem, 1, LV_PART_MAIN);
            lv_obj_set_style_border_side(ui_headerItem, LV_BORDER_SIDE_RIGHT, LV_PART_MAIN);
            lv_obj_set_style_border_color(ui_headerItem, lv_color_hex(0x404040), LV_PART_MAIN);
            lv_obj_set_style_border_opa(ui_headerItem, 255, LV_PART_MAIN);
        }
        lv_obj_t * ui_text = lv_label_create(ui_headerItem);
        lv_obj_set_size(ui_text, LV_SIZE_CONTENT, LV_SIZE_CONTENT);   /// 1
        lv_obj_set_align(ui_text, LV_ALIGN_CENTER);
        lv_obj_set_style_text_color(ui_text, lv_color_hex(0xFFFFFF), LV_PART_MAIN);
        lv_obj_set_style_text_opa(ui_text, 255, LV_PART_MAIN);
        lv_label_set_text(ui_text, header[i].str);
        lv_obj_set_style_text_font(ui_text, &lv_font_montserrat_18, LV_PART_MAIN);
    }
    lv_obj_t * ui_body = lv_obj_create(ui_main);
    lv_obj_remove_style_all(ui_body);
    lv_obj_set_size(ui_body, lv_pct(100), 280);
    lv_obj_set_flex_flow(ui_body, LV_FLEX_FLOW_COLUMN);
    for (size_t i = 0; i < 5; i++)
    {
        lv_obj_t * ui_bodyItem = lv_obj_create(ui_body);
        lv_obj_remove_style_all(ui_bodyItem);
        lv_obj_set_size(ui_bodyItem, lv_pct(100), 74);
        lv_obj_set_style_bg_color(ui_bodyItem, lv_color_hex(0x161616), LV_PART_MAIN);
        lv_obj_set_style_bg_opa(ui_bodyItem, 255, LV_PART_MAIN);
        lv_obj_set_flex_flow(ui_bodyItem, LV_FLEX_FLOW_ROW);
        lv_obj_set_style_border_width(ui_bodyItem, 1, LV_PART_MAIN);
        lv_obj_set_style_border_side(ui_bodyItem, LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN);
        lv_obj_set_style_border_color(ui_bodyItem, lv_color_hex(0x404040), LV_PART_MAIN);
        lv_obj_set_style_border_opa(ui_bodyItem, 255, LV_PART_MAIN);
        lv_obj_clear_flag(ui_bodyItem, LV_OBJ_FLAG_SCROLLABLE);
        for (size_t j = 0; j < 3; j++)
        {
            lv_obj_t * ui_itemCell = lv_obj_create(ui_bodyItem);
            lv_obj_remove_style_all(ui_itemCell);
            lv_obj_set_size(ui_itemCell, lv_pct(100/3), 74);
            if (j< 2)
            {
                lv_obj_set_style_border_width(ui_itemCell, 1, LV_PART_MAIN);
                lv_obj_set_style_border_side(ui_itemCell, LV_BORDER_SIDE_RIGHT, LV_PART_MAIN);
                lv_obj_set_style_border_color(ui_itemCell, lv_color_hex(0x404040), LV_PART_MAIN);
                lv_obj_set_style_border_opa(ui_itemCell, 255, LV_PART_MAIN);
            }
            lv_obj_t * ui_celltext = lv_label_create(ui_itemCell);
            lv_obj_set_size(ui_celltext, LV_SIZE_CONTENT, LV_SIZE_CONTENT);   /// 1
            lv_obj_set_align(ui_celltext, LV_ALIGN_CENTER);
            lv_obj_set_style_text_color(ui_celltext, lv_color_hex(0xFFFFFF), LV_PART_MAIN);
            lv_obj_set_style_text_opa(ui_celltext, 255, LV_PART_MAIN);
            lv_label_set_text(ui_celltext, body[i][j].str);
            lv_obj_set_style_text_font(ui_celltext, &lv_font_montserrat_18, LV_PART_MAIN);
        }
        
    }