智能硬件嵌入式硬件開發(fā)【免費下載鏈接】X-TRACKA GPS bicycle speedometer that supports offline maps and track recording項目地址https://gitcode.com/gh_mirrors/xt/X-TRACK點擊查看免費下載LVGLLight and Versatile Graphics Library的lv_table是一個專為嵌入式 GUI 設(shè)計的高效表格控件它只存儲文本、不創(chuàng)建任何真實子對象單元格全部在繪制時即時渲染因此內(nèi)存占用極輕非常適合在資源受限的嵌入式設(shè)備上展示結(jié)構(gòu)化數(shù)據(jù)。本文以 X-TRACK離線地圖 GPS 自行車碼表倉庫中內(nèi)置的 LVGL 源碼與文檔為研究對象系統(tǒng)講解lv_table的樣式劃分、單元格讀寫、行列管理、合并、滾動、事件與按鍵交互并結(jié)合 lv_table.h 與 lv_table.c 給出源碼級原理支撐以及 lv_example_table_1.c / lv_example_table_2.c 兩個可直接復(fù)用的實戰(zhàn)示例。讀完本文你將能夠獨立完成一個可滾動、可合并、可按鍵選中單元格的 LVGL 表格。一、控件概述為什么說 Table 是最輕量的表格lv_table的定位很明確表格由行、列、存放文本的單元格構(gòu)成控件本身極其輕量因為只有文本被存儲單元格不會創(chuàng)建任何真實對象而是在繪制時按需畫出來。這意味著你在創(chuàng)建一張 200 行的表格時LVGL 并不會實例化 200 個 label 對象而是維護一張緊湊的文本數(shù)據(jù)表繪制階段統(tǒng)一渲染。從源碼結(jié)構(gòu)看這一點得到了充分印證。lv_table_t的數(shù)據(jù)結(jié)構(gòu)lv_table.h非常簡單typedef struct { lv_obj_t obj; /* 繼承自 Base Object */ uint16_t col_cnt; /* 列數(shù) */ uint16_t row_cnt; /* 行數(shù) */ char ** cell_data; /* 單元格文本指針數(shù)組每格頭部 1 字節(jié)存控制位 */ lv_coord_t * row_h; /* 每行高度 */ lv_coord_t * col_w; /* 每列寬度 */ uint16_t col_act; /* 當前激活列 */ uint16_t row_act; /* 當前激活行 */ } lv_table_t;整個控件的數(shù)據(jù)全部由這幾個字段承載沒有子對象樹。此外lv_table_class中聲明了editable LV_OBJ_CLASS_EDITABLE_TRUE和group_def LV_OBJ_CLASS_GROUP_DEF_TRUE見 lv_table.c說明 Table 是可編輯對象且默認加入控件組group——這正是它能通過編碼器encoder方向鍵逐格選中單元格的前提。啟用條件lv_table依賴 Label 控件且受LV_USE_TABLE宏開關(guān)控制若LV_USE_LABEL 0編譯會直接報錯lv_table: lv_label is required. Enable it in lv_conf.h (LV_USE_LABEL 1)見 lv_table.h默認配置模板中LV_USE_TABLE為 1見 lv_conf_template.h本倉庫 Simulator 的 lv_conf.h 同樣開啟了該功能Kconfig 菜單中也提供了對應(yīng)配置項見 lvgl/Kconfig。二、Parts 與樣式Part 機制下的表格美化lv_table只有兩個樣式部分PartLV_PART_MAIN表格的背景支持全部典型背景樣式屬性背景色、邊框、圓角、內(nèi)邊距等LV_PART_ITEMS單元格區(qū)域同樣支持背景樣式屬性外加文本樣式屬性字體、文字顏色、對齊方式、行間距等。默認主題default theme專門為單元格準備了table_cell樣式見 lv_theme_default.c其核心是給每個單元格繪制 1px 的上下邊框LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_BOTTOM從而形成典型的表格分隔線外觀。一個實用的樣式技巧表格默認會為被按下的單元格顯示按下狀態(tài)如果你希望自己接管選中態(tài)的繪制例如下面示例 2 中要自定義開關(guān)圖形可以移除該狀態(tài)樣式lv_obj_remove_style(table, NULL, LV_PART_ITEMS | LV_STATE_PRESSED);三、單元格操作寫入、格式化與讀取設(shè)置單元格文本單元格只能存儲文本因此數(shù)值必須先轉(zhuǎn)換為字符串再寫入void lv_table_set_cell_value(lv_obj_t * obj, uint16_t row, uint16_t col, const char * txt);要點對應(yīng)文檔說明文本會被 Table拷貝保存因此可以傳入局部變量函數(shù)返回后無需擔(dān)心指針失效文本支持換行符例如Value\n60.3會在單元格內(nèi)渲染成兩行行列會自動擴展如果指定的row/col超過了當前行列數(shù)Table 會自動增加行列。從實現(xiàn)看lv_table.clv_table_set_cell_value內(nèi)部首先做自動擴展if(col table-col_cnt) lv_table_set_col_cnt(obj, col 1); if(row table-row_cnt) lv_table_set_row_cnt(obj, row 1);隨后用lv_mem_realloc重新分配該格內(nèi)存并拷貝文本最后調(diào)用refr_cell_size觸發(fā)該格尺寸刷新。值得注意的實現(xiàn)細節(jié)每個單元格內(nèi)存塊的第 0 字節(jié)保存控制位control byte真正文本從第 1 字節(jié)開始讀取時通過table-cell_data[cell][1]跳過格式字節(jié)見 lv_table.c。printf 風(fēng)格格式化寫入LVGL 還提供了printf風(fēng)格的便捷接口尤其適合批量生成帶編號的文本void lv_table_set_cell_value_fmt(lv_obj_t * obj, uint16_t row, uint16_t col, const char * fmt, ...);其實現(xiàn)先通過lv_vsnprintf(NULL, 0, fmt, ap)計算格式化后的長度再按需 realloc 并寫入見 lv_table.c。注意該實現(xiàn)還處理了阿拉伯/波斯語文本整形LV_USE_ARABIC_PERSIAN_CHARS的兼容路徑。示例用法lv_table_set_cell_value_fmt(table, i, 0, Item %LV_PRIu32, i 1);其中LV_PRIu32是 LVGL 提供的跨平臺 printf 格式宏避免在 32/64 位環(huán)境下%u/%lu混用導(dǎo)致的格式警告。讀取單元格const char * lv_table_get_cell_value(lv_obj_t * obj, uint16_t row, uint16_t col);如果row/col越界或單元格為空返回空字符串而非空指針見 lv_table.c調(diào)用方可安全使用。四、行列管理行數(shù)、列數(shù)與列寬顯式設(shè)置行列數(shù)使用void lv_table_set_row_cnt(lv_obj_t * obj, uint16_t row_cnt); void lv_table_set_col_cnt(lv_obj_t * obj, uint16_t col_cnt);對應(yīng)的讀取接口為lv_table_get_row_cnt/lv_table_get_col_cnt。從源碼看改變行數(shù)時會 reallocrow_h與cell_data數(shù)組縮小表格時釋放多余的單元格內(nèi)存擴大時清零新增區(qū)域見 lv_table.c改變列數(shù)時由于列主序存儲布局變化需要整體搬遷cell_data并重新映射新增列默認寬度取LV_DPI_DEF每英寸點數(shù)換算的默認像素值見 lv_table.c。設(shè)置列寬使用void lv_table_set_col_width(lv_obj_t * obj, uint16_t col_id, lv_coord_t w);表格整體寬度會自動等于所有列寬之和表格高度則由單元格樣式字體、內(nèi)邊距等與行數(shù)自動計算。實際項目中推薦先設(shè)行列數(shù)、再逐格填充先lv_table_set_row_cntlv_table_set_col_cnt可以一次性分配好整個數(shù)據(jù)數(shù)組避免set_cell_value時反復(fù)自動擴展引發(fā)大量 realloc示例 2 的注釋就明確寫著 Not required but avoids a lot of memory reallocation。五、單元格合并水平合并單元格lv_table支持水平方向的單元格合并void lv_table_add_cell_ctrl(lv_obj_t * obj, uint16_t row, uint16_t col, lv_table_cell_ctrl_t ctrl); // 合并標志 // lv_table_add_cell_ctrl(table, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT);要合并多個相鄰單元格需要對每個目標單元格分別調(diào)用一次該函數(shù)。對應(yīng)清除合并標志的接口是lv_table_clear_cell_ctrl查詢狀態(tài)用lv_table_has_cell_ctrl。控制位定義完整列表見 lv_table.h控制位值用途LV_TABLE_CELL_CTRL_MERGE_RIGHT1 0與右側(cè)單元格合并LV_TABLE_CELL_CTRL_TEXT_CROP1 1裁剪超寬文本LV_TABLE_CELL_CTRL_CUSTOM_11 4用戶自定義位 1LV_TABLE_CELL_CTRL_CUSTOM_21 5用戶自定義位 2LV_TABLE_CELL_CTRL_CUSTOM_31 6用戶自定義位 3LV_TABLE_CELL_CTRL_CUSTOM_41 7用戶自定義位 4CUSTOM_1CUSTOM_4四個自定義控制位完全交由應(yīng)用層使用lv_table_has_cell_ctrl可查詢是否全部置位。源碼中控制位就存放在每個單元格內(nèi)存塊的第 0 字節(jié)格式字節(jié)這也是每個格子在 realloc 文本前先備份ctrl的原因見 lv_table.c。六、尺寸與滾動LV_SIZE_CONTENT 與可滾動表格lv_table默認寬度與高度均為LV_SIZE_CONTENT見類定義width_def/height_deflv_table.c因此若寬或高設(shè)為LV_SIZE_CONTENTTable 會按內(nèi)容展開顯示全部行列例如lv_obj_set_size(table, LV_SIZE_CONTENT, LV_SIZE_CONTENT);會自動調(diào)整表格尺寸以容納所有行列若寬或高小于內(nèi)容固有尺寸Table 會變成可滾動LVGL 所有對象都帶滾動機制。實戰(zhàn)中最常見的是固定高度 內(nèi)容寬度的組合示例 1 正是這樣構(gòu)造可滾動表格的lv_obj_t * table lv_table_create(lv_scr_act()); /* 填充單元格…… */ lv_obj_set_height(table, 200); /* 高度 200px超過部分可滾動 */ lv_obj_center(table);七、事件系統(tǒng)繪制回調(diào)與值變更LV_EVENT_VALUE_CHANGED當通過按鍵編碼器選中一個新單元格時Table 發(fā)送LV_EVENT_VALUE_CHANGED。典型用途是配合lv_table_get_selected_cell實現(xiàn)選中即操作例如示例 2 的開關(guān)列表選中某行后切換該行CUSTOM_1控制位從而翻轉(zhuǎn)開關(guān)狀態(tài)static void change_event_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); bool chk lv_table_has_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1); if(chk) lv_table_clear_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1); else lv_table_add_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1); }LV_EVENT_DRAW_PART_BEGIN / DRAW_PART_END這兩個繪制事件對單元格逐個觸發(fā)事件類型為LV_TABLE_DRAW_PART_CELL事件參數(shù)lv_obj_draw_part_dsc_t中與表格相關(guān)的字段partLV_PART_ITEMSdraw_area單元格繪制區(qū)域rect_dsc/label_dsc矩形與文本繪制描述符可在此修改背景色、對齊方式等id單元格線性索引等于當前行 × 總列數(shù) 當前列。示例 1 用該回調(diào)實現(xiàn)了三種典型美化if(dsc-part LV_PART_ITEMS) { uint32_t row dsc-id / lv_table_get_col_cnt(obj); uint32_t col dsc-id - row * lv_table_get_col_cnt(obj); if(row 0) { /* 表頭居中、淺藍背景 */ dsc-label_dsc-align LV_TEXT_ALIGN_CENTER; dsc-rect_dsc-bg_color lv_color_mix(lv_palette_main(LV_PALETTE_BLUE), dsc-rect_dsc-bg_color, LV_OPA_20); dsc-rect_dsc-bg_opa LV_OPA_COVER; } else if(col 0) { /* 第一列右對齊 */ dsc-label_dsc-align LV_TEXT_ALIGN_RIGHT; } if((row ! 0 row % 2) 0) { /* 偶數(shù)行灰色條紋斑馬紋 */ dsc-rect_dsc-bg_color lv_color_mix(lv_palette_main(LV_PALETTE_GREY), dsc-rect_dsc-bg_color, LV_OPA_10); dsc-rect_dsc-bg_opa LV_OPA_COVER; } }由此可以看出表格樣式整列/整行統(tǒng)一這種需求不必逐格設(shè)置樣式在繪制回調(diào)里按行號/列號分支處理即可這也是 Table 控件推薦的美化模式。若在LV_EVENT_DRAW_PART_END中回調(diào)則可像示例 2 那樣用dsc-draw_ctx在單元格上額外繪制自定義圖形開關(guān)滑塊。另外LV_EVENT_DRAW_PART_BEGIN/END之外Table 作為 Base Object 的子類還繼承 Base Object 的全部事件事件機制的通用說明可參考 事件總覽。八、按鍵與編碼器交互方向鍵選格lv_table是一個可編輯對象且默認加入 group因此通過方向鍵/編碼器即可逐格移動選區(qū)LV_KEY_RIGHT / LEFT / UP / DOWN移動選中單元格LV_KEY_ENTER按慣例被翻譯為LV_EVENT_PRESSED / PRESSING / RELEASED等事件Table 不單獨處理 Enter 鍵。查詢當前選中的單元格uint16_t row, col; lv_table_get_selected_cell(table, row, col); // 無選中時 row/col 會被置為 LV_TABLE_CELL_NONE (0xFFFF)LV_TABLE_CELL_NONE定義為0XFFFF見 lv_table.h用于表示沒有單元格被選中。按鍵機制的通用說明可參考 輸入設(shè)備總覽。九、實戰(zhàn)示例從示例代碼到完整表格示例 1帶斑馬紋與滾動的水果價格表完整代碼見 lv_example_table_1.c核心步驟lv_table_create(lv_scr_act())創(chuàng)建表格逐格寫入兩列數(shù)據(jù)第 0 列為 Name第 1 列為 Price8 行數(shù)據(jù)lv_obj_set_height(table, 200)制造垂直滾動注冊LV_EVENT_DRAW_PART_BEGIN回調(diào)實現(xiàn)表頭居中高亮、首列右對齊、偶數(shù)行灰底。這是查看型表格的通用寫法適合數(shù)據(jù)瀏覽、日志列表等場景。示例 2用 Table 實現(xiàn)超輕量列表含開關(guān)完整代碼見 lv_example_table_2.c它演示了 Table 作為列表容器的經(jīng)典用法預(yù)分配 200 行 × 1 列l(wèi)v_table_set_row_cnt(table, ITEM_CNT)lv_table_set_col_cnt(table, 1)避免自動擴展帶來的反復(fù) realloc用lv_table_set_cell_value_fmt循環(huán)生成Item N文本移除單元格按下態(tài)樣式改由LV_EVENT_DRAW_PART_END在每行右側(cè)繪制一個圓形開關(guān)滑塊開關(guān)狀態(tài)由CUSTOM_1控制位記憶在LV_EVENT_VALUE_CHANGED中翻轉(zhuǎn)控制位實現(xiàn)選中即切換。該示例運行結(jié)束后會在屏幕上報告200 項僅用數(shù)毫秒創(chuàng)建、占用極少內(nèi)存直觀展示了lv_table只存文本、按需繪制的輕量特性。這種表格當列表用的模式非常適合嵌入式菜單、設(shè)置項列表等交互界面。十、API 速查表功能函數(shù)說明創(chuàng)建lv_table_create(parent)創(chuàng)建 Table 對象寫單元格lv_table_set_cell_value(table, row, col, txt)文本拷貝保存行列自動擴展格式化寫lv_table_set_cell_value_fmt(table, row, col, fmt, ...)printf 風(fēng)格讀單元格lv_table_get_cell_value(table, row, col)空/越界返回行數(shù)lv_table_set_row_cnt/lv_table_get_row_cnt顯式設(shè)定行數(shù)列數(shù)lv_table_set_col_cnt/lv_table_get_col_cnt顯式設(shè)定列數(shù)列寬lv_table_set_col_width/lv_table_get_col_width整體寬度 各列寬之和合并lv_table_add_cell_ctrl(table, r, c, LV_TABLE_CELL_CTRL_MERGE_RIGHT)水平合并控制位lv_table_add_cell_ctrl/lv_table_clear_cell_ctrl/lv_table_has_cell_ctrl合并、裁剪、自定義位選中格lv_table_get_selected_cell(table, row, col)無選中時為LV_TABLE_CELL_NONE滾動lv_obj_set_size(table, LV_SIZE_CONTENT, 高度/寬度)小于固有尺寸即可滾動十一、在 X-TRACK 工程中使用 Table 的注意事項X-TRACK 是一個基于 LVGL 的嵌入式 GPS 碼表項目Simulator 與 MDK-ARM 各平臺固件共用同一套 LVGL 源碼樹Simulator/LVGL.Simulator/lvgl。在資源敏感的嵌入式目標上使用lv_table時建議確認目標工程的lv_conf.h中LV_USE_TABLE已開啟否則頭文件中的#if LV_USE_TABLE ! 0會讓整個控件被編譯排除大數(shù)據(jù)量表格先設(shè)行列數(shù)再填充減少自動擴展期間的動態(tài)內(nèi)存 realloc 碎片文本內(nèi)容采用存指針/復(fù)用字符串策略善用lv_table_set_cell_value_fmt避免手寫snprintf轉(zhuǎn)換數(shù)值用繪制回調(diào)而非逐格建樣式對象的方式實現(xiàn)斑馬紋、表頭高亮等視覺效果保持控件無子對象的輕量特性。綜上lv_table以輕量存儲 即時繪制的設(shè)計在嵌入式 GUI 中兼顧了表現(xiàn)力與性能配合其按鍵選格、繪制回調(diào)與自定義控制位機制足以覆蓋數(shù)據(jù)展示、設(shè)置列表、日志瀏覽等絕大多數(shù)表格場景。贊分享智能硬件嵌入式硬件開發(fā)【免費下載鏈接】X-TRACKA GPS bicycle speedometer that supports offline maps and track recording項目地址https://gitcode.com/gh_mirrors/xt/X-TRACK點擊查看免費下載相關(guān)推薦Vant Cell 單元格組件完全指南從基礎(chǔ)用法到源碼級原理解析Vant Cell 單元格組件完全指南從基礎(chǔ)用法到源碼級原理解析 Cell 單元格是 Vant 移動端 UI 庫中最基礎(chǔ)也最高頻的列表展示組件常用于信息前端UI組件Vant Weapp SwipeCell 滑動單元格組件完全指南從基礎(chǔ)用法到源碼級原理解析Vant Weapp SwipeCell 滑動單元格組件完全指南從基礎(chǔ)用法到源碼級原理解析 導(dǎo)讀 SwipeCell滑動單元格是 Vant Weapp 小前端小程序UI組件移動開發(fā)ThingsBoard 表格組件單元格內(nèi)容函數(shù)Cell content function完全指南從配置到源碼級實現(xiàn)ThingsBoard 表格組件單元格內(nèi)容函數(shù)Cell content function完全指南從配置到源碼級實現(xiàn) 導(dǎo)讀 單元格內(nèi)容函數(shù)Cell con物聯(lián)網(wǎng)后端數(shù)據(jù)可視化消息隊列上一篇如何永久備份微信聊天記錄本地免費工具WeChatMsg終極指南下一篇AutoSubs終極指南3步實現(xiàn)本地AI字幕生成告別繁瑣手動編輯創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考