嵌入式GUI LVGL『Table表格控件』介绍

Posted 2021-09-14 Wireless_Link

一. LVGL GUI开关控件的概念

像往常一样，表是从包含文本的行，列和单元格构建的。
由于仅存储文本，因此 Table 对象的权重非常轻。没有为单元创建任何实际对象，但它们是动态绘制的。

二. LVGL GUI开关小部件和样式

该表的主要部分称为 LV_TABLE_PART_BG 。它是一个类似于背景的矩形，并使用所有典型的背景样式属性。
对于单元，有 4 个虚拟部分。每个单元格都具有类型（1、2、3 或 4），该类型指示要在其上应用哪个部分的样式。单元格部分为：

• LV_TABLE_PART_CELL1
• LV_TABLE_PART_CELL2
• LV_TABLE_PART_CELL3
• LV_TABLE_PART_CELL4

单元格还使用所有典型的背景样式属性。如果 \\n 单元格内容中有一个换行符（），则在换行符之后将使用线条样式属性绘制一条水平分隔线。
单元格中的文本样式是从单元格部分或背景部分继承的。

三. LVGL GUI开关控件的使用

1. 行跟列(Rows and Columns)

通过这个函数设置表格的行数lv_table_set_row_cnt(table, row_cnt)

通过这个函数设置表格的列数lv_table_set_col_cnt(table, col_cnt)

我们写个程序验证下：

void lvgl_table_row_col_test(void)
{
    lv_obj_t* table = lv_table_create(lv_scr_act(), NULL);
    lv_table_set_row_cnt(table, 4);
    lv_table_set_col_cnt(table, 2);
    lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0);
}

嗯？？？你可以看到确实是4行，但是不是两列，别急，赋值后才能看出两列来，继续往后看

2. 设置单元格值(Set cell value)

通过这个函数lv_table_set_cell_value(table, row, col, "Content")设置单元格值，正好也验证下上面遗留的问题点

程序（解惑了上面的疑问）：

void lvgl_table_value_test(void)
{
    lv_obj_t* table = lv_table_create(lv_scr_act(), NULL);
    lv_table_set_row_cnt(table, 4);
    lv_table_set_col_cnt(table, 2);
    lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0);

    /*Fill the first column*/
    lv_table_set_cell_value(table, 0, 0, "Name");
    lv_table_set_cell_value(table, 1, 0, "Jorden");
    lv_table_set_cell_value(table, 2, 0, "Jame");
    lv_table_set_cell_value(table, 3, 0, "Kobe");

    /*Fill the second column*/
    lv_table_set_cell_value(table, 0, 1, "Age");
    lv_table_set_cell_value(table, 1, 1, "52");
    lv_table_set_cell_value(table, 2, 1, "36");
    lv_table_set_cell_value(table, 3, 1, "40");

}

3. 对齐(Align)

通过这个函数进行单元格值对齐，lv_table_set_cell_align(table, row, col, LV_LABEL_ALIGN_LEFT/CENTER/RIGHT)

4. 单元格类型(Cell type)

您可以使用 4 种不同的单元格类型。每个都有自己的风格。
单元格类型可用于添加不同的样式，例如：

• 表头
• 第一栏
• 突出显示一个单元格
• 等等

可以选择的类型可以是 1、2、3 或 4。 lv_table_set_cell_type(table, row, col, type) 

写个程序验证下，说实话，我是没看出有啥区别

void lvgl_table_cell_type_test(void)
{
    lv_obj_t* table = lv_table_create(lv_scr_act(), NULL);
    lv_table_set_row_cnt(table, 4);
    lv_table_set_col_cnt(table, 2);
    lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0);

    /*Fill the first column*/
    lv_table_set_cell_value(table, 0, 0, "Name");
    lv_table_set_cell_value(table, 1, 0, "Jorden");
    lv_table_set_cell_value(table, 2, 0, "Jame");
    lv_table_set_cell_value(table, 3, 0, "Kobe");

    /*Fill the second column*/
    lv_table_set_cell_value(table, 0, 1, "Age");
    lv_table_set_cell_value(table, 1, 1, "52");
    lv_table_set_cell_value(table, 2, 1, "36");
    lv_table_set_cell_value(table, 3, 1, "40");

    lv_table_set_cell_type(table, 0, 0, 2);
    lv_table_set_cell_type(table, 0, 1, 2);
}

5. 合并单元格(Merge cells)

可以使用lv_table_set_cell_merge_right(table, col, row, true)水平合并单元格。要合并更多相邻的单元格，对每个单元格应用此函数

6. 裁剪文字(Crop text)

默认情况下，文字会自动换行以适合单元格的宽度，并且单元格的高度会自动设置。要禁用此功能并保持启用状态不变。 lv_table_set_cell_crop(table, row, col, true)

7. 滚动(Scroll)

使表格可滚动放置在页面上

好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓