★ FEATURED ARTICLE 简介TMS FMX UI Pack 3.7.3.0 是一套专为 Delphi FireMonkeyFMX跨平台开发设计的商业级 UI 组件库适用于 Delphi XE7 至 10.4 Sydney 全系列版本面向中高级 Delphi 开发者解决原生 FMX 组件样式单一、交互体验不足、多端适配困难等问题广泛用于构建高颜值、高性能的 Windows/macOS/iOS/Android 桌面与移动应用界面。资源包共1410个文件含386个核心 Pascal 源码.pas、69个 IDE 工程文件.dproj、59个 FMX 界面模板.fmx、344个编译单元.dcu及多语言词典.aff、主题样式.style、图标资源.png/.ico/.gif等完整覆盖源码、示例、安装脚本与文档压缩后58.28MB。已有579人学习下载用户可直接导入 IDE 安装组件包复用全部演示工程、本地化资源与跨平台 UI 实现方案快速提升 FMX 应用的视觉表现力与开发效率。1. TMS FMX UI Pack 是什么一套能绕过 FireMonkey 原生控件限制的商业级 UI 组件集专为 Delphi 10.4 Win64/Android/iOS 混合部署场景而生你有没有试过在 Delphi 10.4 里用 FireMonkeyFMX开发一个需要真·高 DPI 适配、深色模式自动切换、且在 Windows 和 Android 上都保持一致滚动惯性与动画节奏的管理后台原生 TButton、TListView 一上真机就露馅Windows 上字体发虚、Android 上列表滑动卡顿、iOS 上导航栏阴影错位——这不是玄学是 FMX 渲染管线在不同平台底层抽象层上的固有撕裂。TMS FMX UI Pack 3.7.3.0 就是为缝合这个裂缝而存在的它不替换 FMX 引擎而是用纯 Pascal 实现了一套覆盖 90% 企业级 UI 场景的控件族从带 SVG 图标支持的 TAdvToolBar到支持虚拟化渲染的 TAdvStringGrid再到可绑定 REST 数据源的 TAdvTreeView全部通过 FMX 的 Canvas 接口直绘绕开了平台原生控件的黑匣子。它不是给学生练手的 Demo 控件而是某高校实验室在交付某跨平台设备监控系统时因原生 FMX 在 Android 12 上触发 SurfaceFlinger 渲染异常而紧急切换的生产级替代方案。如果你正卡在 Delphi 10.4 的 FMX 多端一致性难题里这份资源就是你该拆开的第一包「后悔药」。2. 安装与集成从 ZIP 解压到 IDE 注册三步完成 TMS FMX UI Pack 3.7.3.0 的 Delphi 10.4 支持TMS FMX UI Pack 不走 BPL 安装向导也不依赖在线包管理器——它的交付形态是 ZIP 包内嵌完整源码 预编译 DCU IDE 集成脚本这种“老派但可靠”的方式恰恰规避了 Delphi 10.4 中 IDE Package Manager 对第三方组件路径解析的诸多 Bug。整个过程分三步解压定位、DCU 路径注入、IDE 组件面板注册。每一步都必须严格匹配 Delphi 10.4 的目录结构否则后续编译会报Unit not found或Class not registered。2.1 解压与目录结构校验确认 ZIP 内含Source,Lib,Design三个核心文件夹下载得到的TMSFMXUIPack_3.7.3.0_D10.4.zip解压后必须存在以下三级结构路径以 Windows 为例Linux/macOS 用户需将\替换为/TMSFMXUIPack_3.7.3.0_D10.4\ ├── Source\ ← 所有控件的 .pas 源码含完整注释与条件编译指令 ├── Lib\ │ ├── win64\ ← Delphi 10.4 默认 Win64 平台 DCU │ │ ├── tmsfmxui.dcu │ │ ├── tmsfmxgrid.dcu │ │ └── ... ← 共 47 个 DCU覆盖全部 32 个控件单元 │ ├── android\ ← Android arm64-v8a 架构 DCU注意不含 x86_64 │ └── ios\ ← iOS arm64 架构 DCU不含 simulator └── Design\ ├── d104\ ← Delphi 10.4 专用设计时包 │ ├── tmsfmxuidesign.bpl │ └── tmsfmxgriddesign.bpl └── ...提示若 ZIP 内无Design\d104\子目录或Lib\win64\下缺失tmsfmxui.dcu说明下载包损坏。TMS 官方分发包中tmsfmxui.dcu文件大小恒为 1,248,560 字节±2KB可用certutil -hashfile tmsfmxui.dcu SHA256校验。2.2 DCU 路径注入修改 Delphi 10.4 全局库路径避免手动添加{$I}Delphi 10.4 的 IDE 库路径Tools → Options → Language → Delphi → Library必须显式包含Lib\win64Win64 编译、Lib\androidAndroid 编译等路径否则即使 DCU 存在编译器也无法索引。操作步骤如下启动 Delphi 10.4 IDE进入Tools → Options → Language → Delphi → Library在Library path文本框末尾追加注意分号分隔;C:\TMSFMXUIPack_3.7.3.0_D10.4\Lib\win64;C:\TMSFMXUIPack_3.7.3.0_D10.4\Lib\android;C:\TMSFMXUIPack_3.7.3.0_D10.4\Lib\ios点击OK保存重启 IDE —— 此步不可省略IDE 不会热加载新路径。逻辑说明Delphi 编译器按Library path顺序扫描.dcu文件。将 TMS 路径置于末尾可确保当项目同时引用原生 FMX 单元如FMX.Controls和 TMS 单元如TMSFMXUI时优先使用原生单元定义仅在 TMS 特有类如TTMSFMXButton才 fallback 到 TMS DCU。若将 TMS 路径置顶会导致FMX.Types.TValue等基础类型冲突。2.3 设计时包注册安装tmsfmxuidesign.bpl并验证组件面板设计时包.bpl负责将控件图标、属性编辑器、事件模板注入 IDE 工具栏。注册步骤如下进入Component → Install Packages…点击Add…定位到Design\d104\tmsfmxuidesign.bpl勾选该包点击OK观察 IDE 左侧组件面板是否出现TMS FMX UI页签内含TTMSFMXButton、TTMSFMXGrid等图标。参数说明tmsfmxuidesign.bpl是 Delphi 10.4 专用编译产物其内部版本号硬编码为3.7.3.0与d104子目录名强绑定。若错误加载d103或d11目录下的.bplIDE 会弹出Package xxx.bpl requires version 30.0 of the IDE错误Delphi 10.4 IDE 版本号为 30.0。此时必须卸载错误包Component → Options → Remove再重装正确版本。3. 核心控件实战用 TTMSFMXButton 替代原生 TButton实现跨平台统一点击反馈与 SVG 图标原生TButton在 FMX 中的点击反馈pressed state由平台原生控件接管导致 Windows 上是颜色变暗、Android 上是水波纹、iOS 上是缩放动画——视觉割裂。TTMSFMXButton则完全接管绘制流程通过OnDrawBackground事件与TCanvas.FillRect()实现像素级可控的按下态且支持直接加载.svg文件作为图标无需预转 PNG。下面以一个真实调试场景为例某跨平台设备配置工具需在按钮上显示「刷新」SVG 图标并在点击时播放 150ms 的缩放动画。3.1 创建 TTMSFMXButton 并加载 SVG 图标两行代码搞定矢量图标// 在窗体 OnCreate 事件中 procedure TForm1.FormCreate(Sender: TObject); begin // 1. 创建 TTMSFMXButton 实例非拖拽便于动态控制 fRefreshBtn : TTMSFMXButton.Create(Self); fRefreshBtn.Parent : Self; fRefreshBtn.Align : TAlignLayout.Client; // 2. 加载 SVG 图标路径为相对工程根目录 fRefreshBtn.Image.Svg.LoadFromFile(Resources\refresh.svg); fRefreshBtn.Image.Svg.Width : 24; fRefreshBtn.Image.Svg.Height : 24; end;逻辑说明TTMSFMXButton.Image.Svg是 TMS 封装的 SVG 渲染器其LoadFromFile方法内部调用TSvgDocument.LoadFromFile支持标准 SVG 1.1 语法不支持foreignObject等扩展标签。Width/Height属性控制 SVG 渲染尺寸单位为像素与TImage的Proportional属性无关——这是 TMS 自研 SVG 引擎的硬约束若设为 0 则不渲染图标。3.2 自定义点击反馈动画用 TTimer 实现 150ms 缩放 颜色过渡// 在按钮 OnClick 事件中 procedure TForm1.fRefreshBtnClick(Sender: TObject); begin // 启动缩放动画 Timer已预先创建 fAnimTimer fAnimTimer.Enabled : True; fAnimTimer.Tag : 0; // 0开始缩小, 1开始放大 end; // Timer OnTimer 事件Interval 10ms procedure TForm1.fAnimTimerTimer(Sender: TObject); var ScaleFactor: Single; begin case fAnimTimer.Tag of 0: // 缩小阶段0ms→75msScale 1.0→0.85 begin ScaleFactor : 1.0 - (fAnimTimer.Tag * 0.015); // 每10ms减0.015 if ScaleFactor 0.85 then begin fAnimTimer.Tag : 1; ScaleFactor : 0.85; end; end; 1: // 放大阶段75ms→150msScale 0.85→1.0 begin ScaleFactor : 0.85 (fAnimTimer.Tag * 0.015); if ScaleFactor 1.0 then begin fAnimTimer.Enabled : False; ScaleFactor : 1.0; end; end; end; // 应用缩放注意必须调用 Repaint 强制重绘 fRefreshBtn.Scale.X : ScaleFactor; fRefreshBtn.Scale.Y : ScaleFactor; fRefreshBtn.Repaint; end;参数说明TTMSFMXButton.Scale属性直接作用于控件绘制坐标系比TButton的Opacity更精准。Repaint调用是关键——TMS 控件的Scale变更不会自动触发重绘必须显式调用否则动画卡顿。Tag作为状态机变量避免使用TThread.Synchronize等复杂同步机制符合 Delphi 10.4 单线程 UI 模型。3.3 深色模式适配监听系统主题变更并动态切换按钮背景色TMS FMX UI Pack 3.7.3.0 内置TMSFMXThemeManager但默认不启用。需手动订阅TPlatformServices.Current.GetServiceIFMXSystemActionsService的OnThemeChanged事件// 在窗体 OnCreate 中注册主题监听 procedure TForm1.FormCreate(Sender: TObject); var SysAct: IFMXSystemActionsService; begin if TPlatformServices.Current.SupportsPlatformService(IFMXSystemActionsService, IInterface(SysAct)) then begin SysAct.OnThemeChanged : HandleThemeChange; end; end; procedure TForm1.HandleThemeChange(const ATheme: TSystemTheme); begin if ATheme TSystemTheme.Dark then begin fRefreshBtn.Fill.Color : $FF2D2D2D; // 深色模式背景 fRefreshBtn.TextSettings.FontColor : $FFFFFFFF; end else begin fRefreshBtn.Fill.Color : $FFEEEEEE; // 浅色模式背景 fRefreshBtn.TextSettings.FontColor : $FF333333; end; end;逻辑说明IFMXSystemActionsService.OnThemeChanged是 Delphi 10.4 新增接口仅在 Windows 10 1809、Android 10、iOS 13 上有效。TSystemTheme枚举值为Light/Dark/Unspecified其中Unspecified表示系统未提供主题信息如旧版 Android此时应 fallback 到用户偏好设置。TMS 控件的Fill.Color支持$AARRGGBB格式Alpha 通道必须显式指定如$FF否则透明度异常。4. 避坑指南Delphi 10.4 下 TMS FMX UI Pack 3.7.3.0 的五个高频翻车点与血泪修复法集成 TMS FMX UI Pack 后90% 的编译失败和运行时异常都集中在以下五类场景。这些不是文档里写的“注意事项”而是某开发者在连续 72 小时调试某医疗设备 Android APK 时踩出的真实坑每一条都附带可复现现象、根本原因与一行命令级修复方案。4.1 现象Android 编译通过但 APK 安装后启动白屏Logcat 报java.lang.UnsatisfiedLinkError: dlopen failed: library libtmsfmxui.so not found原因TMS FMX UI Pack 的 Android 版本仅提供arm64-v8a架构的libtmsfmxui.so但 Delphi 10.4 默认构建 APK 时会打包armeabi-v7a、x86、x86_64多架构 so 库。当设备为armeabi-v7a如旧款三星 Galaxy Tab A时系统尝试加载libtmsfmxui.so失败触发UnsatisfiedLinkError导致 FMX 初始化中断UI 线程崩溃。解决强制 Delphi 10.4 仅构建arm64-v8a架构。进入Project → Options → Deployment删除所有armeabi-v7a、x86、x86_64条目仅保留arm64-v8a再进入Options → SDK Manager确认 Android SDK Platform-Tools 版本 ≥ 30.0.3旧版aapt不支持单架构打包。4.2 现象iOS 真机调试时 Xcode 报Undefined symbol: _TMSFMXUIRegisterArchive 失败原因Delphi 10.4 的 iOS 部署链中TMSFMXUI单元的初始化函数_TMSFMXUIRegister未被链接器识别。根本原因是TMSFMXUI.pas中的initialization段未被标记为{$IFDEF IOS} {$WEAKLINKRTTI ON} {$ENDIF}导致 ARC 编译器优化掉该符号。解决手动修改Source\TMSFMXUI.pas第 1 行在unit TMSFMXUI;上方插入{$IFDEF IOS} {$WEAKLINKRTTI ON} {$ENDIF}保存后重新编译tmsfmxui.dcu右键Source\TMSFMXUI.pas→ Compile再用新 DCU 替换Lib\ios\tmsfmxui.dcu。4.3 现象Windows 上TTMSFMXGrid滚动时 CPU 占用飙升至 30%鼠标悬停单元格延迟明显原因TTMSFMXGrid默认启用LiveBindings支持即使未绑定数据源其内部TBindingListT仍持续轮询INotifyPropertyChanged接口。在高 DPI 显示器如 4K150%下每次MouseMove事件都会触发InvalidateCell导致Paint循环失控。解决在TTMSFMXGrid.Create后立即禁用 LiveBindingsfGrid : TTMSFMXGrid.Create(Self); fGrid.DisableLiveBinding : True; // 关键此属性在 3.7.3.0 中新增 fGrid.Parent : Self;DisableLiveBinding是 TMS 3.7.3.0 新增属性默认False设为True后彻底移除绑定相关对象CPU 占用回落至 2%。4.4 现象Android 上TTMSFMXButton的OnClick事件在快速连点时丢失两次点击间隔 300ms 即失效原因Android 系统对View.OnClickListener有防抖机制debounce默认 300ms 内重复点击只触发一次。TMS FMX UI Pack 的 Android 实现未重写onTouchEvent直接复用 FMX 原生触摸处理导致该机制生效。解决在按钮OnMouseDown事件中手动拦截并转发procedure TForm1.fRefreshBtnMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); begin // 立即触发 Click绕过系统防抖 fRefreshBtn.Click; end;注意OnMouseDown事件在OnClick之前触发且不受防抖影响此方案实测可支持 100ms 间隔连点。4.5 现象iOS 上TTMSFMXWebView加载 HTTPS 页面时白屏Console 输出NSURLSessionTask finished with error - code: -1202原因TTMSFMXWebView基于WKWebView但 TMS 3.7.3.0 未在Info.plist中声明NSAppTransportSecurity导致 iOS 10 默认阻止非 ATS 兼容的 HTTPS 请求如自签名证书、TLS 1.0。解决在Project → Options → Version Info中点击Edit Custom Properties添加以下 XML 片段keyNSAppTransportSecurity/key dict keyNSAllowsArbitraryLoads/key true/ /dict此操作等效于在Info.plist中添加 ATS 配置允许所有 HTTPS 请求。生产环境应替换为具体域名白名单。5. 进阶技巧用 TMSFMXThemeManager 实现运行时主题热切换无需重启应用TMS FMX UI Pack 3.7.3.0 的TMSFMXThemeManager是一个被严重低估的模块——它不仅能响应系统主题变更还能在运行时强制切换整套控件皮肤且切换过程零闪烁、无重绘撕裂。某跨平台工业 HMI 系统要求操作员在不退出软件的前提下从「日间蓝灰主题」一键切至「夜间墨绿主题」我们正是靠这个技巧交付的。5.1 主题文件结构.tmstheme是 JSON 格式的样式映射表非二进制资源TMS 主题文件如DayTheme.tmstheme本质是 UTF-8 编码的 JSON结构清晰可读{ Name: DayTheme, BaseColor: FFEBEBEB, AccentColor: FF2196F3, TextColor: FF333333, Controls: { TTMSFMXButton: { Fill.Color: FFEBEBEB, Text.FontColor: FF333333, Pressed.Fill.Color: FFDDDDDD }, TTMSFMXGrid: { Header.Fill.Color: FF2196F3, Row.AlternatingFill.Color: FFF5F5F5 } } }提示BaseColor是全局背景色AccentColor是强调色如按钮主色Controls下每个键对应控件类名值为属性路径.分隔与颜色值$AARRGGBB格式。TMS 提供ThemeEditor.exe工具位于Tools\目录可视化编辑但手动改 JSON 更快。5.2 运行时加载与应用三行代码完成主题热切换// 1. 创建 ThemeManager 实例全局唯一 fThemeMgr : TMSFMXThemeManager.Create(Self); // 2. 加载主题文件支持流式加载无需文件落地 fThemeMgr.LoadFromFile(Themes\NightTheme.tmstheme); // 3. 应用主题自动遍历当前窗体所有 TMS 控件 fThemeMgr.ApplyToForm(Self);逻辑说明ApplyToForm方法采用深度优先遍历Self.Children对每个is TMSFMXControl的子控件调用ApplyTheme。它不触发Repaint而是直接修改控件的Fill.Color、TextSettings.FontColor等属性因此切换瞬间完成。若需应用到多窗体调用fThemeMgr.ApplyToForm(Form2)即可。5.3 主题继承与覆盖用ParentTheme实现深色模式下的局部浅色控件某 HMI 系统要求整体为深色主题但「设备状态指示灯」区域必须保持浅色背景以便观察 LED 效果。TMS 支持主题继承// NightTheme.tmstheme { Name: NightTheme, BaseColor: FF121212, ParentTheme: DayTheme, // 继承 DayTheme 的所有定义 Controls: { TTMSFMXPanel: { Fill.Color: FF121212 // 覆盖父主题的 FFEBEBEB } } }然后在代码中// 为特定 Panel 指定独立主题 fStatusPanel.ThemeName : DayTheme; // 强制使用 DayTheme 的 Fill.Color fThemeMgr.ApplyToForm(Self); // 此次 Apply 会尊重 ThemeName 属性ThemeName是 TMS 控件的内置属性优先级高于TMSFMXThemeManager的全局设置。从那以后我每次做主题切换功能都强制走一遍fThemeMgr.ApplyToForm(Self)控件.ThemeName : xxx的双保险流程再没遇到过主题残留问题。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
