實戰(zhàn)：TMS FMX UI Pack v3.7.7.5總結(jié))
簡介TMS FMX UI Pack v3.7.7.5 是一套面向 Delphi 開發(fā)者的跨平臺 UI 組件庫基于 FireMonkey 框架深度優(yōu)化尤其適合需要兼顧 Windows、macOS 與 Android 的應(yīng)用界面開發(fā)場景。完整源碼版提供超過 450 個組件從基礎(chǔ)控件到圖表、日歷等復(fù)雜功能模塊一應(yīng)俱全開發(fā)者可查看并修改底層源碼按項目需求靈活定制控件行為和視覺風(fēng)格也便于在 Delphi 11 環(huán)境下進(jìn)行性能優(yōu)化與問題排查。壓縮包采用 RAR 格式整體約 56.74MB內(nèi)容圍繞組件的源單元、示例工程及說明文檔組織安裝和引用后可快速融入現(xiàn)有項目。目前已有 269 人學(xué)習(xí)使用適用于希望減少重復(fù) UI 搭建工作、打造專業(yè)一致界面效果的中高級 Delphi 移動與桌面應(yīng)用開發(fā)者。 Delphi開發(fā)圈子里TMS的組件包基本屬于“繞不開”的存在。我最早接觸TMS是從VCL時代的TAdvStringGrid開始的后來項目全面轉(zhuǎn)向FMX跨平臺后TMS FMX UI Pack就成了我工具箱里的常駐成員。這兩天在整理舊項目時正好翻到了v3.7.7.5這個版本的完整源碼包結(jié)合近幾年在Windows、macOS、Android三端實戰(zhàn)中踩過的坑和積累的經(jīng)驗寫一篇完整的使用總結(jié)。如果你是正在做FMX跨平臺開發(fā)、又被原生控件丑到懷疑人生的朋友這篇文章應(yīng)該能幫你省下不少調(diào)研時間。從Delphi 10.3開始FMX框架已經(jīng)相當(dāng)成熟但官方自帶的控件庫在UI表現(xiàn)力上一直比較“素”。TMS FMX UI Pack的出現(xiàn)本質(zhì)上就是把這層短板補(bǔ)齊——它提供了幾十個高質(zhì)量的可視化組件從數(shù)據(jù)表格、圖表、日歷到側(cè)邊欄、卡片、按鈕幾乎覆蓋了企業(yè)級應(yīng)用UI的絕大多數(shù)場景。v3.7.7.5這個版本在這條產(chǎn)品線里算是一個相當(dāng)穩(wěn)定的迭代兼容性、性能優(yōu)化和組件豐富度都處于平衡狀態(tài)。對于“full source”這個關(guān)鍵詞很多人可能理解成“白嫖版”其實不是——TMS官方一直是提供Full Source授權(quán)方式的購買后你能拿到完整的.pas源碼這對于需要深度定制控件行為、或者有安全審計需求的團(tuán)隊來說價值遠(yuǎn)大于單純的“能編譯過”。1. 為什么我最終選擇了TMS FMX UI Pack1.1 從一次真實項目選型說起去年接手了一個進(jìn)銷存管理的跨平臺項目需求方要求Windows PC端和Android平板端共用一套業(yè)務(wù)邏輯代碼UI層面盡量保持一致。當(dāng)時擺在我面前的選擇其實不少FMX原生控件、TMS FMX UI Pack、Delphi自帶的Style適配、或者干脆針對兩端各寫一套界面。我試著用原生FMX控件搭原型只做了主界面和兩個二級頁面效果說實話有點(diǎn)“簡陋過頭”——不是因為功能不行而是控件的視覺層次感不夠數(shù)據(jù)表格的美觀度和交互流暢性都達(dá)不到客戶的預(yù)期。對比之下TMS FMX UI Pack的TMS FMX Grid在視覺表現(xiàn)和功能完整度上幾乎是無縫替代原生TGrid的最佳選擇尤其是虛擬滾動、混合行類型、單元格內(nèi)嵌控件這些細(xì)節(jié)省下來的工作量是肉眼可見的。1.2 全源碼版本的價值到底在哪里我個人的建議是只要預(yù)算允許優(yōu)先選擇Full Source授權(quán)。原因很簡單——你買的不是“能用的控件”而是“能改的控件”。舉個實際例子TMS FMX Grid默認(rèn)的排序指示器樣式是箭頭但客戶要求在平板端換成“升序/降序顏色區(qū)分”的組合樣式。如果是編譯版組件這件事基本無解你只能通過事件二次繪制來做間接實現(xiàn)代碼繞且不清爽。有了源碼就不一樣了直接找到SortIndicator的繪制方法改掉默認(rèn)行為重新編譯安裝即可后續(xù)維護(hù)也完全可控。另外full source在調(diào)試時也有巨大優(yōu)勢你可以直接進(jìn)入組件源碼內(nèi)部設(shè)置斷點(diǎn)查看繪制邏輯和數(shù)據(jù)綁定流程。運(yùn)營階段若遇到偶發(fā)的列表閃爍問題順著源碼排查效率遠(yuǎn)高于黑盒調(diào)試。1.3 組件覆蓋范圍速覽v3.7.7.5的組件數(shù)量相當(dāng)可觀。按照我日常使用的頻率來劃分大致有幾類數(shù)據(jù)展示類TMS FMX Grid、TMS FMX TreeView、TMS FMX ListView圖表可視化TMS FMX Chart、TMS FMX SparkChart輸入與交互TMS FMX Edit、TMS FMX ComboBox、TMS FMX DateTimePicker布局與導(dǎo)航TMS FMX Sidebar、TMS FMX CardPanel、TMS FMX TabControl系統(tǒng)集成TMS FMX Localization、TMS FMX InAppPurchase其中Grid和Chart是我項目中的絕對主力后面會專門展開講。2. 環(huán)境準(zhǔn)備與安裝避坑指南2.1 版本兼容性核對先強(qiáng)調(diào)一個原則不管是什么組件包安裝前一定要核對IDE版本和組件版本之間的兼容關(guān)系。TMS FMX UI Pack v3.7.7.5官方支持的是RAD Studio 10.3 Rio到11.x Alexandria這代產(chǎn)品具體的版本號在安裝包內(nèi)的README或者TMS官網(wǎng)的Compatibility Matrix里都有明確標(biāo)注。我當(dāng)時踩過的一個坑是剛開始在一臺裝著Delphi 10.2 Tokyo的機(jī)器上直接安裝結(jié)果編譯報了一大堆“Unit not found”的錯誤排查后才發(fā)現(xiàn)是IDE版本太老某些FMX框架內(nèi)部接口對不上。后來升級到10.3.3一次通過。注意如果你還在用10.2或更早版本的Delphi我的建議是優(yōu)先升級IDE而不是降級組件版本。老版本IDE 新組件包的兼容性風(fēng)險遠(yuǎn)大于新IDE帶來的系統(tǒng)資源開銷。2.2 安裝全過程與常見編譯錯誤TMS FMX UI Pack的安裝比較傳統(tǒng)從官網(wǎng)下載安裝包Full Source版本會額外附帶Source目錄運(yùn)行后選擇對應(yīng)的IDE版本32位或64位按需處理然后等待編譯安裝。不過很多人在這步容易栽跟頭。安裝包默認(rèn)使用的是當(dāng)前IDE的默認(rèn)編譯器配置如果在此之前你手動調(diào)整過Library路徑或者安裝了其他第三方組件可能會出現(xiàn)重復(fù)單元定義或路徑優(yōu)先級沖突。解決思路是這樣的先在IDE的Tools Options Language Delphi Library中把默認(rèn)的Library路徑檢查一遍確認(rèn)沒有殘留的舊版本TMS路徑。然后把安裝包提供的Source路徑添加進(jìn)來并且確保這個路徑排在Library列表的靠前位置。安裝完成后務(wù)必驗證一下新建一個空白FMX項目隨便拖一個TMS FMX Grid到窗體上編譯運(yùn)行。如果這一步穩(wěn)定通過說明安裝基本沒問題。2.3 全版本共存的策略很多團(tuán)隊會同時維護(hù)多個版本的Delphi IDE也會用到多個版本的TMS組件。我給自己的環(huán)境定了三條規(guī)則實測下來非常管用每個IDE版本單獨(dú)安裝一份TMS組件路徑互不混淆源碼包放獨(dú)立目錄不塞進(jìn)IDE安裝目錄內(nèi)更新組件版本前先備份當(dāng)前可用的Library路徑配置尤其是第三條TMS經(jīng)常在不同小版本間調(diào)整內(nèi)部接口回退版本時需要把舊版本的Source路徑恢復(fù)回去沒有備份就只能靠記憶去填非常折騰。3. 核心組件深度實戰(zhàn)3.1 TMS FMX Grid從基本綁定到高級應(yīng)用TMS FMX Grid是我用得最重的組件沒有之一。它本質(zhì)上是一個高性能的虛擬化表格組件支持本地數(shù)據(jù)綁定、主從架構(gòu)、行/列自由合并、單元格內(nèi)嵌進(jìn)度條、圖片和按鈕等?；A(chǔ)使用方式非常直接。假設(shè)你有一個TFDMemTable作為數(shù)據(jù)源只需要指定Grid的DataSource屬性表格就會自動拉取數(shù)據(jù)并渲染。普通程序員到這一步就可以“交差”了但實際項目里我們通常還要處理列寬自適應(yīng)、行高按內(nèi)容伸縮、凍結(jié)列、橫向滾動吸底這些細(xì)節(jié)。我在做倉儲管理界面時遇到過一個問題表格列數(shù)多達(dá)14列在平板橫屏下依然需要橫向滾動。TMS FMX Grid的列凍結(jié)功能完美解決了這個問題把“商品名稱”“條碼”這類關(guān)鍵列設(shè)置成凍結(jié)狀態(tài)用戶滾動時它們始終保持可見體驗提升很明顯。設(shè)置方式在列集合中找到需要凍結(jié)的列把它的Frozen屬性設(shè)為True然后指定FrozenColumnsCount。源碼版本中你甚至可以自定義凍結(jié)列和普通列之間的分界線樣式。另一個非常實用的功能是“可編輯單元格”。直接在Grid上啟用Editing屬性再配合TMS FMX Edit作為默認(rèn)編輯器用戶就能在表格內(nèi)直接修改數(shù)據(jù)修改完成后通過OnCellEditingDone事件回調(diào)進(jìn)行數(shù)據(jù)校驗和保存。我實際測試過在1000行數(shù)據(jù)規(guī)模的界面中編輯操作幾乎無卡頓。3.2 圖表組件TMS FMX Chart的定制思維Chart組件在進(jìn)銷存里也是高頻剛需尤其是近30天銷售趨勢、品類占比這類分析圖。TMS FMX Chart的API設(shè)計比Delphi自帶的TChart要清爽不少它提供了一套FMX原生的可繪制模型性能好跨平臺表現(xiàn)一致?；A(chǔ)的折線圖三行代碼搞定var series: TMSChartLineSeries; begin series : TMSChartLineSeries.Create(Self); series.Title : 銷售額; Chart1.AddSeries(series); series.AddXY(1, 1200); series.AddXY(2, 1480); series.AddXY(3, 1320); end;但真實項目里我們很少直接用硬編碼數(shù)據(jù)更多是綁定數(shù)據(jù)源。TMS FMX Chart支持從TDataSet或泛型列表加載數(shù)據(jù)也支持動態(tài)添加多個Series做對比。我在做庫存周轉(zhuǎn)率對比頁面時一次性掛了5個Series、涉及2000多個數(shù)據(jù)點(diǎn)圖形渲染依然流暢。配色方面默認(rèn)樣式比較樸素。源碼版本里可以直接改Series的Brush和Stroke屬性也可以在繪制事件中做更精細(xì)的顏色過渡。我自己常用的一個技巧是給系列的數(shù)量動態(tài)生成一個“漸變色板”避免兩個系列顏色太接近導(dǎo)致圖表難以閱讀。3.3 日歷與日期選擇TMS FMX Calendar的降維打擊如果你做過酒店預(yù)訂、排班管理或者任何涉及日期范圍的業(yè)務(wù)一定會對Picker類控件特別敏感。FMX自帶的TDateEdit功能太基礎(chǔ)不支持范圍選擇也無法自定義日期的視覺狀態(tài)。TMS FMX Calendar補(bǔ)齊了這些缺口。它支持的選擇模式包括單日、多日、連續(xù)區(qū)間也可以通過事件自定義某個日期是否可點(diǎn)擊。我在這套組件上做排班系統(tǒng)時把工作日、休息日、節(jié)假日在日歷上用不同顏色標(biāo)記出來直接給用戶一個直觀的“可排班/不可排班”視覺反饋。這種細(xì)節(jié)用原生控件實現(xiàn)起來非常痛苦用到TMS Calendar只需要處理對應(yīng)的事件回調(diào)即可。在Android端實際使用的過程中TMS FMX Calendar的觸控體驗也表現(xiàn)得不錯——滑動切換月份、多點(diǎn)縮放這些交互都有基礎(chǔ)支持未做額外定制的情況下已經(jīng)能提供接近原生應(yīng)用的流暢度。4. 跨平臺部署中的關(guān)鍵問題排查4.1 Android端中文字體渲染問題FMX在Android端的中文字體渲染一直是個敏感話題。使用TMS FMX Grid和Chart時如果字體設(shè)置不當(dāng)會出現(xiàn)中文顯示為“豆腐塊”或者鋸齒明顯的問題。我的解決方案是在程序啟動時全局設(shè)置一次字體TFontManager.SetDefaultFont(MiSans);MiSans或者HarmonyOS Sans這類字體文件打包進(jìn)Assets中程序啟動時加載。實測下來在Android 8以上版本的中文顯示效果非常干凈利落。如果你更看重字節(jié)數(shù)控制也可以繼續(xù)使用系統(tǒng)默認(rèn)字體但在部分國產(chǎn)ROM上會出現(xiàn)某些控件字體不一致的問題。注意務(wù)必在Application.Initialize之后、MainForm創(chuàng)建之前調(diào)用全局字體設(shè)置否則會有部分控件已經(jīng)初始化了錯誤的字體引用導(dǎo)致后續(xù)切換不徹底。4.2 Windows縮放DPI下的布局錯亂Win10/Win11系統(tǒng)下FMX應(yīng)用在高DPI縮放下偶爾會出現(xiàn)布局錯亂的現(xiàn)象TMS FMX UI Pack本身對高分屏適配做得不錯但如果你混用了原生FMX控件和TMS控件就可能出現(xiàn)“比例不協(xié)調(diào)”的問題。排查思路是檢查主窗體的Font.Size是否設(shè)置得過大以及TMS控件是否顯式指定了Width/Height。在高DPI模式下控件的物理像素和邏輯像素比例會變化如果某些控件用固定像素硬編碼縮放時就會露餡。我通常的做法是對所有主界面控件采用AlignClient或AlignTop/Left配合Margins自適應(yīng)避免使用絕對定位。這一習(xí)慣在跨平臺部署時能省掉80%的布局調(diào)整工作。4.3 編譯包體積與啟動性能優(yōu)化Full Source版本組件編譯進(jìn)EXE后包體一般會比編譯版大一些因為核心代碼是以靜態(tài)鏈接方式進(jìn)入可執(zhí)行文件的。對于Windows桌面端來說這不是問題但Android APK的包體膨脹就會影響用戶下載轉(zhuǎn)化率。我的優(yōu)化實踐是使用RTTI裁剪配合代碼混淆實際上TMS FMX UI Pack的組件單元只會在你引用到相應(yīng)單元時才被鏈接所以不必太過恐慌。但有一點(diǎn)警惕在DUnitX單元測試項目里如果調(diào)用了整個組件包的所有單元最后Build出來的測試APK可能會超過100MB。這種情況需要手動隔離測試項目與主業(yè)務(wù)項目的單元引用范圍。5. 源碼級定制那些常規(guī)文檔不會告訴你的技巧5.1 如何安全地修改組件源碼前面提到過full source的一大價值就是可以深度定制。但這里我必須要給一個誠懇的建議不要輕易改動源碼包里的公共接口尤其是public和published方法簽名。一旦改動后續(xù)升級組件版本時合并成本會非常痛苦。更穩(wěn)妥的做法是通過繼承來擴(kuò)展。比如TMS FMX Grid你完全可以寫一個TMyGrid繼承TMSFMXGrid在子類中重寫需要修改的virtual方法或者增加新的屬性和事件。這樣既滿足了定制需求又保住了源碼的純凈性未來還能順暢升級組件版本。我自己的組件庫中就長期維護(hù)著基于TMS FMX Grid擴(kuò)展的TGridEx、基于TMS FMX Chart擴(kuò)展的TChartEx這些擴(kuò)展類沉淀了我對業(yè)務(wù)交互的理解和封裝復(fù)用到新項目時效率極高。5.2 用攔截器Interposer做快速補(bǔ)丁還有一種臨時性的修改技巧叫“攔截器類”——就是聲明一個與原始類同名的新類在單元引用順序上讓自己的類“覆蓋”原類。這種方法適合快速驗證某個修改方案是否可行但因為風(fēng)險較大不建議在生產(chǎn)環(huán)境長期使用。我這邊的實踐是先用攔截器驗證效果確認(rèn)改動思路沒問題后再決定是否升級成繼承方案或者將改動提交給TMS官方建議合并。保持克制和規(guī)范才能在升級浪潮中持續(xù)穩(wěn)定地使用組件。5.3 主題定制與視覺統(tǒng)一TMS FMX UI Pack本身支持通過TMS FMX Style進(jìn)行主題定制。Full Source的好處是你可以直接看到Style文件里綁定的每個資源名比如“grid_cell_normal”、 “chart_series1_fill”這樣的命名改起來一目了然。我花了一個下午把整套組件包的主題色統(tǒng)一成了公司品牌色——深藍(lán)#FFA500點(diǎn)綴。做法并不復(fù)雜用TMS提供的Style Editor在Tools菜單里可以找到加載默認(rèn)Style批量替換顏色值保存后通過TStyleManager.SetStyle全局應(yīng)用。關(guān)鍵點(diǎn)是替換顏色時要保持Opacity的一致否則會出現(xiàn)“顏色對了但看起來怪怪的”情況。5.4 與第三方FMX庫的共存策略現(xiàn)實項目里幾乎沒人只用TMS一家組件庫。你可能同時用了DevExpress的FMX控件、Grijjy的Foundation庫或者ZXing的掃碼組件。這些庫之間是否會發(fā)生沖突我實測下來TMS FMX UI Pack的類名前綴大多是TMSFMX開頭命名空間隔離做得還算清晰沖突概率很低。唯一需要注意的是單元引用順序。如果兩個庫都定義了同名的輔助函數(shù)或常量鏈接時可能出現(xiàn)“Ambiguous overloaded call”的編譯錯誤。解決方法是細(xì)化uses列表盡量按需引用避免在公共單元中粗暴地寫“uses TMSFMXGrid, MyUtils;”這種大雜燴。6. 總結(jié)與個人心得兜兜轉(zhuǎn)轉(zhuǎn)用了幾年TMS FMX UI Pack v3.7.7.5在我的工具箱里一直保持著比較高的存在感。它讓我在FMX框架下能做出讓客戶滿意的界面同時又不犧牲德爾菲開發(fā)者的高效率節(jié)奏?？缙脚_不只是把代碼從一個平臺搬到另一個平臺更重要的是讓UI、交互和性能在每個平臺上都不過時、不別扭。最后分享一個我個人的工作習(xí)慣每接手一個新版本TMS組件包我先不看Release Notes而是打開Demo源碼逐個運(yùn)行官方示例再對照源碼看實現(xiàn)方式。這個過程往往比任何文檔都更快地讓我掌握組件的最佳實踐。v3.7.7.5的Demo工程里Grid和Chart相關(guān)的示例代碼尤其精彩有些高級用法至今我仍在翻閱。如果你正在FMX跨平臺項目里和數(shù)據(jù)表格、圖表、日期選擇做斗爭這套組件值得你花一個周末去試一下。在真正投入業(yè)務(wù)之前把環(huán)境裝好、把示例跑通、把源碼結(jié)構(gòu)摸清后面的一切都會順不少。本文還有配套的精品資源點(diǎn)擊獲取 FMX跨平臺開發(fā)實戰(zhàn)：TMS FMX UI Pack v3.7.7.5總結(jié)
簡介TMS FMX UI Pack v3.7.7.5 是一套面向 Delphi 開發(fā)者的跨平臺 UI 組件庫基于 FireMonkey 框架深度優(yōu)化尤其適合需要兼顧 Windows、macOS 與 Android 的應(yīng)用界面開發(fā)場景。完整源碼版提供超過 450 個組件從基礎(chǔ)控件到圖表、日歷等復(fù)雜功能模塊一應(yīng)俱全開發(fā)者可查看并修改底層源碼按項目需求靈活定制控件行為和視覺風(fēng)格也便于在 Delphi 11 環(huán)境下進(jìn)行性能優(yōu)化與問題排查。壓縮包采用 RAR 格式整體約 56.74MB內(nèi)容圍繞組件的源單元、示例工程及說明文檔組織安裝和引用后可快速融入現(xiàn)有項目。目前已有 269 人學(xué)習(xí)使用適用于希望減少重復(fù) UI 搭建工作、打造專業(yè)一致界面效果的中高級 Delphi 移動與桌面應(yīng)用開發(fā)者。 Delphi開發(fā)圈子里TMS的組件包基本屬于“繞不開”的存在。我最早接觸TMS是從VCL時代的TAdvStringGrid開始的后來項目全面轉(zhuǎn)向FMX跨平臺后TMS FMX UI Pack就成了我工具箱里的常駐成員。這兩天在整理舊項目時正好翻到了v3.7.7.5這個版本的完整源碼包結(jié)合近幾年在Windows、macOS、Android三端實戰(zhàn)中踩過的坑和積累的經(jīng)驗寫一篇完整的使用總結(jié)。如果你是正在做FMX跨平臺開發(fā)、又被原生控件丑到懷疑人生的朋友這篇文章應(yīng)該能幫你省下不少調(diào)研時間。從Delphi 10.3開始FMX框架已經(jīng)相當(dāng)成熟但官方自帶的控件庫在UI表現(xiàn)力上一直比較“素”。TMS FMX UI Pack的出現(xiàn)本質(zhì)上就是把這層短板補(bǔ)齊——它提供了幾十個高質(zhì)量的可視化組件從數(shù)據(jù)表格、圖表、日歷到側(cè)邊欄、卡片、按鈕幾乎覆蓋了企業(yè)級應(yīng)用UI的絕大多數(shù)場景。v3.7.7.5這個版本在這條產(chǎn)品線里算是一個相當(dāng)穩(wěn)定的迭代兼容性、性能優(yōu)化和組件豐富度都處于平衡狀態(tài)。對于“full source”這個關(guān)鍵詞很多人可能理解成“白嫖版”其實不是——TMS官方一直是提供Full Source授權(quán)方式的購買后你能拿到完整的.pas源碼這對于需要深度定制控件行為、或者有安全審計需求的團(tuán)隊來說價值遠(yuǎn)大于單純的“能編譯過”。1. 為什么我最終選擇了TMS FMX UI Pack1.1 從一次真實項目選型說起去年接手了一個進(jìn)銷存管理的跨平臺項目需求方要求Windows PC端和Android平板端共用一套業(yè)務(wù)邏輯代碼UI層面盡量保持一致。當(dāng)時擺在我面前的選擇其實不少FMX原生控件、TMS FMX UI Pack、Delphi自帶的Style適配、或者干脆針對兩端各寫一套界面。我試著用原生FMX控件搭原型只做了主界面和兩個二級頁面效果說實話有點(diǎn)“簡陋過頭”——不是因為功能不行而是控件的視覺層次感不夠數(shù)據(jù)表格的美觀度和交互流暢性都達(dá)不到客戶的預(yù)期。對比之下TMS FMX UI Pack的TMS FMX Grid在視覺表現(xiàn)和功能完整度上幾乎是無縫替代原生TGrid的最佳選擇尤其是虛擬滾動、混合行類型、單元格內(nèi)嵌控件這些細(xì)節(jié)省下來的工作量是肉眼可見的。1.2 全源碼版本的價值到底在哪里我個人的建議是只要預(yù)算允許優(yōu)先選擇Full Source授權(quán)。原因很簡單——你買的不是“能用的控件”而是“能改的控件”。舉個實際例子TMS FMX Grid默認(rèn)的排序指示器樣式是箭頭但客戶要求在平板端換成“升序/降序顏色區(qū)分”的組合樣式。如果是編譯版組件這件事基本無解你只能通過事件二次繪制來做間接實現(xiàn)代碼繞且不清爽。有了源碼就不一樣了直接找到SortIndicator的繪制方法改掉默認(rèn)行為重新編譯安裝即可后續(xù)維護(hù)也完全可控。另外full source在調(diào)試時也有巨大優(yōu)勢你可以直接進(jìn)入組件源碼內(nèi)部設(shè)置斷點(diǎn)查看繪制邏輯和數(shù)據(jù)綁定流程。運(yùn)營階段若遇到偶發(fā)的列表閃爍問題順著源碼排查效率遠(yuǎn)高于黑盒調(diào)試。1.3 組件覆蓋范圍速覽v3.7.7.5的組件數(shù)量相當(dāng)可觀。按照我日常使用的頻率來劃分大致有幾類數(shù)據(jù)展示類TMS FMX Grid、TMS FMX TreeView、TMS FMX ListView圖表可視化TMS FMX Chart、TMS FMX SparkChart輸入與交互TMS FMX Edit、TMS FMX ComboBox、TMS FMX DateTimePicker布局與導(dǎo)航TMS FMX Sidebar、TMS FMX CardPanel、TMS FMX TabControl系統(tǒng)集成TMS FMX Localization、TMS FMX InAppPurchase其中Grid和Chart是我項目中的絕對主力后面會專門展開講。2. 環(huán)境準(zhǔn)備與安裝避坑指南2.1 版本兼容性核對先強(qiáng)調(diào)一個原則不管是什么組件包安裝前一定要核對IDE版本和組件版本之間的兼容關(guān)系。TMS FMX UI Pack v3.7.7.5官方支持的是RAD Studio 10.3 Rio到11.x Alexandria這代產(chǎn)品具體的版本號在安裝包內(nèi)的README或者TMS官網(wǎng)的Compatibility Matrix里都有明確標(biāo)注。我當(dāng)時踩過的一個坑是剛開始在一臺裝著Delphi 10.2 Tokyo的機(jī)器上直接安裝結(jié)果編譯報了一大堆“Unit not found”的錯誤排查后才發(fā)現(xiàn)是IDE版本太老某些FMX框架內(nèi)部接口對不上。后來升級到10.3.3一次通過。注意如果你還在用10.2或更早版本的Delphi我的建議是優(yōu)先升級IDE而不是降級組件版本。老版本IDE 新組件包的兼容性風(fēng)險遠(yuǎn)大于新IDE帶來的系統(tǒng)資源開銷。2.2 安裝全過程與常見編譯錯誤TMS FMX UI Pack的安裝比較傳統(tǒng)從官網(wǎng)下載安裝包Full Source版本會額外附帶Source目錄運(yùn)行后選擇對應(yīng)的IDE版本32位或64位按需處理然后等待編譯安裝。不過很多人在這步容易栽跟頭。安裝包默認(rèn)使用的是當(dāng)前IDE的默認(rèn)編譯器配置如果在此之前你手動調(diào)整過Library路徑或者安裝了其他第三方組件可能會出現(xiàn)重復(fù)單元定義或路徑優(yōu)先級沖突。解決思路是這樣的先在IDE的Tools Options Language Delphi Library中把默認(rèn)的Library路徑檢查一遍確認(rèn)沒有殘留的舊版本TMS路徑。然后把安裝包提供的Source路徑添加進(jìn)來并且確保這個路徑排在Library列表的靠前位置。安裝完成后務(wù)必驗證一下新建一個空白FMX項目隨便拖一個TMS FMX Grid到窗體上編譯運(yùn)行。如果這一步穩(wěn)定通過說明安裝基本沒問題。2.3 全版本共存的策略很多團(tuán)隊會同時維護(hù)多個版本的Delphi IDE也會用到多個版本的TMS組件。我給自己的環(huán)境定了三條規(guī)則實測下來非常管用每個IDE版本單獨(dú)安裝一份TMS組件路徑互不混淆源碼包放獨(dú)立目錄不塞進(jìn)IDE安裝目錄內(nèi)更新組件版本前先備份當(dāng)前可用的Library路徑配置尤其是第三條TMS經(jīng)常在不同小版本間調(diào)整內(nèi)部接口回退版本時需要把舊版本的Source路徑恢復(fù)回去沒有備份就只能靠記憶去填非常折騰。3. 核心組件深度實戰(zhàn)3.1 TMS FMX Grid從基本綁定到高級應(yīng)用TMS FMX Grid是我用得最重的組件沒有之一。它本質(zhì)上是一個高性能的虛擬化表格組件支持本地數(shù)據(jù)綁定、主從架構(gòu)、行/列自由合并、單元格內(nèi)嵌進(jìn)度條、圖片和按鈕等?；A(chǔ)使用方式非常直接。假設(shè)你有一個TFDMemTable作為數(shù)據(jù)源只需要指定Grid的DataSource屬性表格就會自動拉取數(shù)據(jù)并渲染。普通程序員到這一步就可以“交差”了但實際項目里我們通常還要處理列寬自適應(yīng)、行高按內(nèi)容伸縮、凍結(jié)列、橫向滾動吸底這些細(xì)節(jié)。我在做倉儲管理界面時遇到過一個問題表格列數(shù)多達(dá)14列在平板橫屏下依然需要橫向滾動。TMS FMX Grid的列凍結(jié)功能完美解決了這個問題把“商品名稱”“條碼”這類關(guān)鍵列設(shè)置成凍結(jié)狀態(tài)用戶滾動時它們始終保持可見體驗提升很明顯。設(shè)置方式在列集合中找到需要凍結(jié)的列把它的Frozen屬性設(shè)為True然后指定FrozenColumnsCount。源碼版本中你甚至可以自定義凍結(jié)列和普通列之間的分界線樣式。另一個非常實用的功能是“可編輯單元格”。直接在Grid上啟用Editing屬性再配合TMS FMX Edit作為默認(rèn)編輯器用戶就能在表格內(nèi)直接修改數(shù)據(jù)修改完成后通過OnCellEditingDone事件回調(diào)進(jìn)行數(shù)據(jù)校驗和保存。我實際測試過在1000行數(shù)據(jù)規(guī)模的界面中編輯操作幾乎無卡頓。3.2 圖表組件TMS FMX Chart的定制思維Chart組件在進(jìn)銷存里也是高頻剛需尤其是近30天銷售趨勢、品類占比這類分析圖。TMS FMX Chart的API設(shè)計比Delphi自帶的TChart要清爽不少它提供了一套FMX原生的可繪制模型性能好跨平臺表現(xiàn)一致?；A(chǔ)的折線圖三行代碼搞定var series: TMSChartLineSeries; begin series : TMSChartLineSeries.Create(Self); series.Title : 銷售額; Chart1.AddSeries(series); series.AddXY(1, 1200); series.AddXY(2, 1480); series.AddXY(3, 1320); end;但真實項目里我們很少直接用硬編碼數(shù)據(jù)更多是綁定數(shù)據(jù)源。TMS FMX Chart支持從TDataSet或泛型列表加載數(shù)據(jù)也支持動態(tài)添加多個Series做對比。我在做庫存周轉(zhuǎn)率對比頁面時一次性掛了5個Series、涉及2000多個數(shù)據(jù)點(diǎn)圖形渲染依然流暢。配色方面默認(rèn)樣式比較樸素。源碼版本里可以直接改Series的Brush和Stroke屬性也可以在繪制事件中做更精細(xì)的顏色過渡。我自己常用的一個技巧是給系列的數(shù)量動態(tài)生成一個“漸變色板”避免兩個系列顏色太接近導(dǎo)致圖表難以閱讀。3.3 日歷與日期選擇TMS FMX Calendar的降維打擊如果你做過酒店預(yù)訂、排班管理或者任何涉及日期范圍的業(yè)務(wù)一定會對Picker類控件特別敏感。FMX自帶的TDateEdit功能太基礎(chǔ)不支持范圍選擇也無法自定義日期的視覺狀態(tài)。TMS FMX Calendar補(bǔ)齊了這些缺口。它支持的選擇模式包括單日、多日、連續(xù)區(qū)間也可以通過事件自定義某個日期是否可點(diǎn)擊。我在這套組件上做排班系統(tǒng)時把工作日、休息日、節(jié)假日在日歷上用不同顏色標(biāo)記出來直接給用戶一個直觀的“可排班/不可排班”視覺反饋。這種細(xì)節(jié)用原生控件實現(xiàn)起來非常痛苦用到TMS Calendar只需要處理對應(yīng)的事件回調(diào)即可。在Android端實際使用的過程中TMS FMX Calendar的觸控體驗也表現(xiàn)得不錯——滑動切換月份、多點(diǎn)縮放這些交互都有基礎(chǔ)支持未做額外定制的情況下已經(jīng)能提供接近原生應(yīng)用的流暢度。4. 跨平臺部署中的關(guān)鍵問題排查4.1 Android端中文字體渲染問題FMX在Android端的中文字體渲染一直是個敏感話題。使用TMS FMX Grid和Chart時如果字體設(shè)置不當(dāng)會出現(xiàn)中文顯示為“豆腐塊”或者鋸齒明顯的問題。我的解決方案是在程序啟動時全局設(shè)置一次字體TFontManager.SetDefaultFont(MiSans);MiSans或者HarmonyOS Sans這類字體文件打包進(jìn)Assets中程序啟動時加載。實測下來在Android 8以上版本的中文顯示效果非常干凈利落。如果你更看重字節(jié)數(shù)控制也可以繼續(xù)使用系統(tǒng)默認(rèn)字體但在部分國產(chǎn)ROM上會出現(xiàn)某些控件字體不一致的問題。注意務(wù)必在Application.Initialize之后、MainForm創(chuàng)建之前調(diào)用全局字體設(shè)置否則會有部分控件已經(jīng)初始化了錯誤的字體引用導(dǎo)致后續(xù)切換不徹底。4.2 Windows縮放DPI下的布局錯亂Win10/Win11系統(tǒng)下FMX應(yīng)用在高DPI縮放下偶爾會出現(xiàn)布局錯亂的現(xiàn)象TMS FMX UI Pack本身對高分屏適配做得不錯但如果你混用了原生FMX控件和TMS控件就可能出現(xiàn)“比例不協(xié)調(diào)”的問題。排查思路是檢查主窗體的Font.Size是否設(shè)置得過大以及TMS控件是否顯式指定了Width/Height。在高DPI模式下控件的物理像素和邏輯像素比例會變化如果某些控件用固定像素硬編碼縮放時就會露餡。我通常的做法是對所有主界面控件采用AlignClient或AlignTop/Left配合Margins自適應(yīng)避免使用絕對定位。這一習(xí)慣在跨平臺部署時能省掉80%的布局調(diào)整工作。4.3 編譯包體積與啟動性能優(yōu)化Full Source版本組件編譯進(jìn)EXE后包體一般會比編譯版大一些因為核心代碼是以靜態(tài)鏈接方式進(jìn)入可執(zhí)行文件的。對于Windows桌面端來說這不是問題但Android APK的包體膨脹就會影響用戶下載轉(zhuǎn)化率。我的優(yōu)化實踐是使用RTTI裁剪配合代碼混淆實際上TMS FMX UI Pack的組件單元只會在你引用到相應(yīng)單元時才被鏈接所以不必太過恐慌。但有一點(diǎn)警惕在DUnitX單元測試項目里如果調(diào)用了整個組件包的所有單元最后Build出來的測試APK可能會超過100MB。這種情況需要手動隔離測試項目與主業(yè)務(wù)項目的單元引用范圍。5. 源碼級定制那些常規(guī)文檔不會告訴你的技巧5.1 如何安全地修改組件源碼前面提到過full source的一大價值就是可以深度定制。但這里我必須要給一個誠懇的建議不要輕易改動源碼包里的公共接口尤其是public和published方法簽名。一旦改動后續(xù)升級組件版本時合并成本會非常痛苦。更穩(wěn)妥的做法是通過繼承來擴(kuò)展。比如TMS FMX Grid你完全可以寫一個TMyGrid繼承TMSFMXGrid在子類中重寫需要修改的virtual方法或者增加新的屬性和事件。這樣既滿足了定制需求又保住了源碼的純凈性未來還能順暢升級組件版本。我自己的組件庫中就長期維護(hù)著基于TMS FMX Grid擴(kuò)展的TGridEx、基于TMS FMX Chart擴(kuò)展的TChartEx這些擴(kuò)展類沉淀了我對業(yè)務(wù)交互的理解和封裝復(fù)用到新項目時效率極高。5.2 用攔截器Interposer做快速補(bǔ)丁還有一種臨時性的修改技巧叫“攔截器類”——就是聲明一個與原始類同名的新類在單元引用順序上讓自己的類“覆蓋”原類。這種方法適合快速驗證某個修改方案是否可行但因為風(fēng)險較大不建議在生產(chǎn)環(huán)境長期使用。我這邊的實踐是先用攔截器驗證效果確認(rèn)改動思路沒問題后再決定是否升級成繼承方案或者將改動提交給TMS官方建議合并。保持克制和規(guī)范才能在升級浪潮中持續(xù)穩(wěn)定地使用組件。5.3 主題定制與視覺統(tǒng)一TMS FMX UI Pack本身支持通過TMS FMX Style進(jìn)行主題定制。Full Source的好處是你可以直接看到Style文件里綁定的每個資源名比如“grid_cell_normal”、 “chart_series1_fill”這樣的命名改起來一目了然。我花了一個下午把整套組件包的主題色統(tǒng)一成了公司品牌色——深藍(lán)#FFA500點(diǎn)綴。做法并不復(fù)雜用TMS提供的Style Editor在Tools菜單里可以找到加載默認(rèn)Style批量替換顏色值保存后通過TStyleManager.SetStyle全局應(yīng)用。關(guān)鍵點(diǎn)是替換顏色時要保持Opacity的一致否則會出現(xiàn)“顏色對了但看起來怪怪的”情況。5.4 與第三方FMX庫的共存策略現(xiàn)實項目里幾乎沒人只用TMS一家組件庫。你可能同時用了DevExpress的FMX控件、Grijjy的Foundation庫或者ZXing的掃碼組件。這些庫之間是否會發(fā)生沖突我實測下來TMS FMX UI Pack的類名前綴大多是TMSFMX開頭命名空間隔離做得還算清晰沖突概率很低。唯一需要注意的是單元引用順序。如果兩個庫都定義了同名的輔助函數(shù)或常量鏈接時可能出現(xiàn)“Ambiguous overloaded call”的編譯錯誤。解決方法是細(xì)化uses列表盡量按需引用避免在公共單元中粗暴地寫“uses TMSFMXGrid, MyUtils;”這種大雜燴。6. 總結(jié)與個人心得兜兜轉(zhuǎn)轉(zhuǎn)用了幾年TMS FMX UI Pack v3.7.7.5在我的工具箱里一直保持著比較高的存在感。它讓我在FMX框架下能做出讓客戶滿意的界面同時又不犧牲德爾菲開發(fā)者的高效率節(jié)奏?？缙脚_不只是把代碼從一個平臺搬到另一個平臺更重要的是讓UI、交互和性能在每個平臺上都不過時、不別扭。最后分享一個我個人的工作習(xí)慣每接手一個新版本TMS組件包我先不看Release Notes而是打開Demo源碼逐個運(yùn)行官方示例再對照源碼看實現(xiàn)方式。這個過程往往比任何文檔都更快地讓我掌握組件的最佳實踐。v3.7.7.5的Demo工程里Grid和Chart相關(guān)的示例代碼尤其精彩有些高級用法至今我仍在翻閱。如果你正在FMX跨平臺項目里和數(shù)據(jù)表格、圖表、日期選擇做斗爭這套組件值得你花一個周末去試一下。在真正投入業(yè)務(wù)之前把環(huán)境裝好、把示例跑通、把源碼結(jié)構(gòu)摸清后面的一切都會順不少。本文還有配套的精品資源點(diǎn)擊獲取