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