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

LVGL Table实战：手把手教你打造一个带合并单元格和自定义样式的嵌入式UI数据表格

news 2026/5/2 15:24:51

LVGL Table实战：手把手教你打造一个带合并单元格和自定义样式的嵌入式UI数据表格

在嵌入式设备上展示复杂数据时，表格是最直观的呈现方式之一。但默认的LVGL Table控件往往显得单调，难以满足专业级UI的需求。本文将带你深入探索LVGL Table的高级功能，从单元格合并到条件样式定制，打造一个既美观又实用的数据表格。

1. 基础准备与环境搭建

在开始高级功能之前，我们需要确保开发环境已经正确配置。假设你已经完成了LVGL库的移植和基本显示功能的验证。以下是创建基础表格的代码示例：

lv_obj_t* table = lv_table_create(lv_scr_act()); lv_table_set_col_cnt(table, 4); // 设置4列 lv_table_set_row_cnt(table, 10); // 设置10行 lv_obj_set_size(table, 320, 240); // 设置表格尺寸

基础表格创建后，我们可以通过以下方式填充数据：

lv_table_set_cell_value(table, 0, 0, "ID"); lv_table_set_cell_value(table, 0, 1, "Name"); lv_table_set_cell_value(table, 0, 2, "Status"); lv_table_set_cell_value(table, 0, 3, "Value");

注意：LVGL的表格索引从0开始，第一个参数是行号，第二个是列号。

2. 单元格合并与布局优化

在实际应用中，我们经常需要合并单元格来创建更复杂的布局。LVGL提供了LV_TABLE_CELL_CTRL_MERGE_RIGHT控制位来实现这一功能。

2.1 基本合并操作

要实现单元格向右合并，可以使用以下代码：

// 合并第1行第1列和第2列 lv_table_add_cell_ctrl(table, 1, 1, LV_TABLE_CELL_CTRL_MERGE_RIGHT);

合并后，第一个单元格的内容会占据合并后的所有空间，后续单元格的内容将被忽略。

2.2 多列合并技巧

对于需要合并多列的情况，可以连续设置多个单元格的合并属性：

// 合并3列 lv_table_add_cell_ctrl(table, 2, 1, LV_TABLE_CELL_CTRL_MERGE_RIGHT); lv_table_add_cell_ctrl(table, 2, 2, LV_TABLE_CELL_CTRL_MERGE_RIGHT);

2.3 合并单元格的样式调整

合并后的单元格可能需要特殊样式处理。我们可以通过事件回调来实现：

static void table_event_cb(lv_event_t* e) { lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e); if(dsc->part == LV_PART_ITEMS) { uint32_t row = dsc->id / lv_table_get_col_cnt(table); uint32_t col = dsc->id % lv_table_get_col_cnt(table); if(lv_table_has_cell_ctrl(table, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT)) { dsc->rect_dsc->bg_color = lv_color_hex(0x3498db); // 设置合并单元格背景色 } } } lv_obj_add_event_cb(table, table_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

3. 高级样式定制技巧

LVGL的强大之处在于其灵活的样式系统。我们可以通过多种方式定制表格的外观。

3.1 表头样式定制

表头通常需要与数据行区分开来。我们可以通过判断行号来实现：

static void table_event_cb(lv_event_t* e) { lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e); if(dsc->part == LV_PART_ITEMS) { uint32_t row = dsc->id / lv_table_get_col_cnt(table); if(row == 0) { // 表头行 dsc->rect_dsc->bg_color = lv_color_hex(0x2c3e50); dsc->label_dsc->color = lv_color_white(); dsc->label_dsc->font = &lv_font_montserrat_16; } } }

3.2 斑马线效果

交替行颜色可以提高表格的可读性：

static void table_event_cb(lv_event_t* e) { lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e); if(dsc->part == LV_PART_ITEMS) { uint32_t row = dsc->id / lv_table_get_col_cnt(table); if(row > 0) { // 跳过表头 if(row % 2 == 0) { dsc->rect_dsc->bg_color = lv_color_hex(0xf8f9fa); } else { dsc->rect_dsc->bg_color = lv_color_hex(0xe9ecef); } } } }

3.3 条件样式

根据单元格内容动态改变样式：

static void table_event_cb(lv_event_t* e) { lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e); if(dsc->part == LV_PART_ITEMS) { uint32_t row = dsc->id / lv_table_get_col_cnt(table); uint32_t col = dsc->id % lv_table_get_col_cnt(table); const char* value = lv_table_get_cell_value(table, row, col); if(col == 2 && strcmp(value, "Error") == 0) { dsc->rect_dsc->bg_color = lv_color_hex(0xff6b6b); dsc->label_dsc->color = lv_color_white(); } } }

4. 性能优化与实战技巧

在资源受限的嵌入式设备上，表格性能优化尤为重要。

4.1 减少重绘区域

对于大型表格，可以通过设置局部重绘来提高性能：

lv_obj_set_style_bg_opa(table, LV_OPA_TRANSP, LV_PART_MAIN); lv_obj_set_style_border_width(table, 0, LV_PART_MAIN);

4.2 虚拟滚动技术

对于超长表格，可以实现虚拟滚动来节省内存：

lv_obj_set_height(table, 200); // 固定高度 lv_obj_set_scroll_dir(table, LV_DIR_VER); // 允许垂直滚动

4.3 动态加载数据

结合事件系统实现按需加载：

static void scroll_event_cb(lv_event_t* e) { lv_obj_t* obj = lv_event_get_target(e); lv_coord_t scroll_y = lv_obj_get_scroll_y(obj); lv_coord_t height = lv_obj_get_height(obj); // 计算当前可见行范围 uint16_t start_row = scroll_y / ROW_HEIGHT; uint16_t end_row = (scroll_y + height) / ROW_HEIGHT + 1; // 动态加载可见行数据 load_table_data(table, start_row, end_row); } lv_obj_add_event_cb(table, scroll_event_cb, LV_EVENT_SCROLL, NULL);

5. 综合案例：仪表盘数据表格

让我们将这些技术应用到一个实际的仪表盘案例中。

5.1 表格结构设计

lv_table_set_col_width(table, 0, 60); // ID列 lv_table_set_col_width(table, 1, 120); // 名称列 lv_table_set_col_width(table, 2, 80); // 状态列 lv_table_set_col_width(table, 3, 60); // 值列 // 设置表头 lv_table_set_cell_value(table, 0, 0, "ID"); lv_table_set_cell_value(table, 0, 1, "Sensor"); lv_table_set_cell_value(table, 0, 2, "Status"); lv_table_set_cell_value(table, 0, 3, "Value"); // 合并状态和值列的表头 lv_table_set_cell_value(table, 0, 2, "Status/Value"); lv_table_add_cell_ctrl(table, 0, 2, LV_TABLE_CELL_CTRL_MERGE_RIGHT);

5.2 数据可视化增强

static void table_event_cb(lv_event_t* e) { lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e); if(dsc->part == LV_PART_ITEMS) { uint32_t row = dsc->id / lv_table_get_col_cnt(table); uint32_t col = dsc->id % lv_table_get_col_cnt(table); if(col == 3 && row > 0) { // 值列 const char* value_str = lv_table_get_cell_value(table, row, col); float value = atof(value_str); // 根据值大小设置颜色渐变 if(value > 80) { dsc->rect_dsc->bg_color = lv_color_hex(0xff6b6b); } else if(value > 50) { dsc->rect_dsc->bg_color = lv_color_hex(0xffd166); } else { dsc->rect_dsc->bg_color = lv_color_hex(0x06d6a0); } } } }

5.3 交互增强

添加点击事件处理：

static void table_click_cb(lv_event_t* e) { lv_obj_t* obj = lv_event_get_target(e); uint16_t row, col; lv_table_get_selected_cell(obj, &row, &col); if(row > 0) { // 跳过表头 const char* name = lv_table_get_cell_value(obj, row, 1); const char* value = lv_table_get_cell_value(obj, row, 3); // 显示详细信息 show_detail_popup(name, value); } } lv_obj_add_event_cb(table, table_click_cb, LV_EVENT_CLICKED, NULL);

查看全文

http://www.jsqmd.com/news/738781/