当前位置：首页 > news >正文

嵌入式GUI LVGL『Table表格控件』实战：从零构建数据展示界面

news 2026/4/18 5:19:24

1. 为什么选择LVGL的Table控件？

在嵌入式设备上展示数据表格是个常见需求，比如智能家居中显示房间温湿度列表，或者工业设备上展示传感器读数。我之前做过一个智能电表项目，需要在3.5寸屏幕上实时刷新20多项电力参数，试过几种方案后发现LVGL的Table控件有三大优势：

第一是内存占用极低。它不像传统表格控件那样为每个单元格创建独立对象，而是动态绘制文本内容。实测在STM32F407上，显示10x5的表格只占用约2KB内存。

第二是样式定制灵活。通过单元格类型区分表头和数据行太方便了。上周我给工厂做的设备监控界面，就用这个特性把报警数值自动显示为红色。

第三是滚动性能优秀。开启lv_table_set_scroll_propagation()后，手指滑动列表的帧率能保持在30FPS以上，这在资源有限的嵌入式设备上很难得。

2. 五分钟快速创建基础表格

2.1 初始化表格对象

先创建一个最简单的2x2表格，代码比想象中简单：

lv_obj_t *table = lv_table_create(lv_scr_act(), NULL); lv_table_set_row_cnt(table, 2); // 设置2行 lv_table_set_col_cnt(table, 2); // 设置2列 lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0); // 居中显示

这里有个新手容易踩的坑：刚创建完表格是看不到边框线的，必须填充内容后才会显示完整结构。我第一次用的时候还以为创建失败了，折腾半天才发现这个特性。

2.2 填充表格内容

用lv_table_set_cell_value()填充数据，注意行列索引都是从0开始：

// 填充第一列 lv_table_set_cell_value(table, 0, 0, "设备"); lv_table_set_cell_value(table, 1, 0, "温控器"); // 填充第二列 lv_table_set_cell_value(table, 0, 1, "状态"); lv_table_set_cell_value(table, 1, 1, "正常");

这时候应该能看到完整表格了。如果发现文字显示不全，可能是列宽不够，可以通过lv_table_set_col_width()调整：

lv_table_set_col_width(table, 0, 100); // 第一列宽度100像素 lv_table_set_col_width(table, 1, 80); // 第二列宽度80像素

3. 让表格更专业的5个技巧

3.1 单元格对齐方式

默认文本是左对齐的，通过lv_table_set_cell_align()可以调整：

// 表头居中显示 lv_table_set_cell_align(table, 0, 0, LV_LABEL_ALIGN_CENTER); lv_table_set_cell_align(table, 0, 1, LV_LABEL_ALIGN_CENTER); // 数据右对齐更美观 lv_table_set_cell_align(table, 1, 1, LV_LABEL_ALIGN_RIGHT);

3.2 单元格样式定制

LVGL提供了4种单元格类型，我通常这样使用：

类型1：默认数据单元格
类型2：表头样式
类型3：高亮重要数据
类型4：报警状态

// 设置表头样式 lv_table_set_cell_type(table, 0, 0, 2); lv_table_set_cell_type(table, 0, 1, 2); // 修改单元格背景色 static lv_style_t cell_style; lv_style_init(&cell_style); lv_style_set_bg_color(&cell_style, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x22, 0x8B, 0x22)); lv_obj_add_style(table, LV_TABLE_PART_CELL2, &cell_style);

3.3 自动换行与裁剪

当内容超过列宽时，默认会自动换行。如果希望保持单行显示并用省略号截断，可以开启裁剪模式：

lv_table_set_cell_crop(table, 1, 0, true);

3.4 合并单元格技巧

横向合并单元格在显示跨列标题时特别有用：

lv_table_set_cell_value(table, 0, 0, "设备状态总览"); lv_table_set_cell_merge_right(table, 0, 0, true); // 合并第一行的前两列

3.5 添加滚动功能

当数据行数超过屏幕高度时，只需两步实现滚动：

lv_obj_set_size(table, 200, 150); // 设置可视区域大小 lv_table_set_scroll_propagation(table, true); // 启用滚动传播

记得在父容器上也要启用滚动，实测在480x320屏幕上显示30行数据依然流畅。

4. 实战：智能家居控制面板

最近给客户做的空调控制系统，就用到了表格的高级功能：

4.1 动态更新数据

通过定时器刷新表格内容：

void update_table(lv_task_t *task) { lv_obj_t *table = (lv_obj_t *)task->user_data; lv_table_set_cell_value_fmt(table, 1, 1, "%.1f℃", get_current_temp()); lv_table_set_cell_value_fmt(table, 2, 1, "%d%%", get_humidity()); // 温度超过30度显示红色警告 if(get_current_temp() > 30) { lv_table_set_cell_type(table, 1, 1, 4); } }

4.2 添加交互事件

点击表格行切换设备状态：

lv_obj_set_event_cb(table, [](lv_obj_t *obj, lv_event_t event) { if(event == LV_EVENT_CLICKED) { uint16_t row; lv_table_get_pressed_cell(obj, &row, NULL); toggle_device(row - 1); // 第一行是表头 } });