LVGL学习笔记18 - 表Table

目录

1. Parts

1.1 LV_PART_MAIN

1.2 LV_PART_ITEMS

2. 样式

2.1 设置行列数

2.2 设置单元格字符串

 2.3  设置单元格宽度

2.4 设置表格高度和宽度

2.5 设置字符串颜色

2.6 设置边框颜色

2.7 设置背景颜色

3. 事件

4. CELL CTRL

---

表格是由包含文本的行、列和单元格构建的。它不是真实的对象，只是临时绘制的。

表格通过lv_table_create创建。

lv_obj_t* obj1 = lv_table_create(lv_scr_act());

1. Parts

表格主要有2个Parts：LV_PART_MAIN和LV_PART_ITEMS。

1.1 LV_PART_MAIN

对应表格的背景。

1.2 LV_PART_ITEMS

对应表格的单元格，包括背景样式属性和文本属性。

2. 样式

2.1 设置行列数

通过lv_table_set_row_cnt和lv_table_set_col_cnt设置行列数。

lv_table_set_row_cnt(obj1, 5);
lv_table_set_col_cnt(obj1, 2);

2.2 设置单元格字符串

通过lv_table_set_cell_value或lv_table_set_cell_value_fmt设置。

lv_table_set_cell_value(obj1, 0, 0, "Item1");
lv_table_set_cell_value_fmt(obj1, 0, 1, "0x%x", 1);

 2.3  设置单元格宽度

通过lv_table_set_col_width设置，高度不需要设置，会根据单元格样式（字体、填充等）和行数自动计算的。

lv_table_set_col_width(obj1, 1, 100);

2.4 设置表格高度和宽度

通过lv_obj_set_height和lv_obj_set_width或设置表格的整体高度和宽度，当大小小于实际大小时，表格会出现滚动属性。

lv_obj_set_size(obj1, 200, 200);

如果参数不是具体的数字，而是LV_SIZE_CONTENT，则大小随内容大小设置。

2.5 设置字符串颜色

lv_obj_set_style_text_color(obj1, lv_color_hex(0xFF0000), LV_PART_ITEMS);

 

注意，PARTS对应的是LV_PART_ITEMS，而且并没有影响到单元格选中时的显示。如果要改变选中时的颜色，则需要加上状态LV_STATE_FOCUS_KEY

lv_obj_set_style_text_color(obj1, lv_color_hex(0xFF0000), LV_PART_ITEMS | LV_STATE_FOCUS_KEY);

 

2.6 设置边框颜色

lv_obj_set_style_border_color(obj1, lv_color_make(252, 144, 181), LV_PART_MAIN);

注意外面一圈蓝色实际是选中的框，不是表格本体的边框。

如果要设置内部格的框，可以通过对象的Style修改：

lv_obj_set_style_outline_width(obj1, 2, LV_PART_ITEMS);

2.7 设置背景颜色

和字符串颜色类似，LV_PART_ITEMS对应整个背景，而LV_PART_ITEMS | LV_STATE_FOCUS_KEY对应选中时的背景颜色。

lv_obj_set_style_bg_color(obj1, lv_color_make(252, 144, 181), LV_PART_ITEMS);

lv_obj_set_style_bg_color(obj1, lv_color_make(252, 144, 181), LV_PART_ITEMS | LV_STATE_FOCUS_KEY);

3. 事件

一般可以通过事件LV_EVENT_DRAW_PART_BEGIN和LV_EVENT_DRAW_PART_END重绘来实现特别的显示。

通过lv_obj_add_event_cb添加事件回调函数，例如LV_EVENT_DRAW_PART_BEGIN事件的添加方式：

lv_obj_add_event_cb(obj1, table_event_begin_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

回调函数原型如下：

static void table_event_begin_cb(lv_event_t* e)

这里有一个重要的指针变量：lv_obj_draw_part_dsc_t

lv_obj_draw_part_dsc_t* dsc = (lv_obj_draw_part_dsc_t*)lv_event_get_param(e);

 通过其成员变量part是否LV_PART_ITEMS

if (dsc->part == LV_PART_ITEMS)
{
}

成员变量id的含义是：当前行 × 列数 + 当前列，所以要得到行数和列数的方式：

uint32_t row = dsc->id / lv_table_get_col_cnt(obj);
uint32_t col = dsc->id - row * lv_table_get_col_cnt(obj);

成员变量label_dsc对应字符串显示，例如将字符串居中显示：

if (row == 0)
{dsc->label_dsc->align = LV_TEXT_ALIGN_CENTER;
}

同理，成员变量rect_dsc对应背景的方框。其他则是空指针，即无意义。可以通过VS查看变量了解具体的定义。

4. CELL CTRL

即对单元格添加控制，定义的控制位有：

enum {LV_TABLE_CELL_CTRL_MERGE_RIGHT = 1 << 0,LV_TABLE_CELL_CTRL_TEXT_CROP   = 1 << 1,LV_TABLE_CELL_CTRL_CUSTOM_1    = 1 << 4,LV_TABLE_CELL_CTRL_CUSTOM_2    = 1 << 5,LV_TABLE_CELL_CTRL_CUSTOM_3    = 1 << 6,LV_TABLE_CELL_CTRL_CUSTOM_4    = 1 << 7,
};

这些位可以通过OR的方式组合控制位。前面2个是系统定义好的CTRL，其他4个是自定义CTRL。

获取选中CELL的行列：

lv_obj_t* obj = lv_event_get_target(e);
uint16_t col;
uint16_t row;
lv_table_get_selected_cell(obj, &row, &col);

通过lv_table_has_cell_ctrl获取列表单元格是否有发生CTRL，通过lv_table_add_cell_ctrl和lv_table_clear_cell_ctrl设置是否产生CTRL。

chk = lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT);
if (chk == true)
{lv_table_clear_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT);
}
else
{lv_table_add_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT);
}

LV_TABLE_CELL_CTRL_TEXT_CROP按字面意思是指裁剪字符串，但是没有试出来效果。