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

一. 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)

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

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

猜你喜欢

转载自blog.csdn.net/XiaoXiaoPengBo/article/details/114077640