简介本资源为面向 Delphi 12.3 开发者的 TMS FNC UI Pack v6.2.0.0 控件包适合使用 FireMonkey 与 VCL 框架进行跨平台界面开发的中高级程序员用于快速构建现代化、多平台的桌面与移动应用界面。压缩包共约 2000 个文件整体约 29.85MB其中 556 个 pas 源码单元、157 个 dpr 工程文件、87 个 dfm 与 67 个 fmx 窗体文件构成核心代码与界面定义另有 180 个 res 资源、158 个 ico 与 27 个 svg 图标、220 个 jpg 与 23 个 png 示例图片以及 8 个 dpk 包文件、37 个 lpi/lpr 工程和 50 个 html 帮助文档覆盖源码、示例、资源与文档多个层面。已有 55 人学习下载。读者可获得完整的 FNC 控件源码与示例工程便于研究跨平台 UI 组件的实现方式、复用现成界面模块并借助附带文档与示例快速集成到自己的 Delphi 项目中。1. Delphi 12.3 下 TMS FNC UI Pack v6.2.0.0 到底解决什么问题如果你正在用 Delphi 12.3 做桌面端项目又不想把界面写成清一色的 VCL 灰按钮TMS FNC UI Pack 大概率在你的候选清单里。它是一套跨框架的 UI 控件库同一份控件代码可以同时跑在 VCL、FMX、LCL 上覆盖表格、树、日程、图表、富文本编辑、 ribbon、页面控件等常见界面元素。v6.2.0.0 这个版本号对应的是一份以 .rar 形式分发的安装包里面包含源码、设计期包和示例工程。它真正省事的地方在于你不用为 VCL 和 FMX 各维护一套界面逻辑控件属性、事件、数据绑定方式基本一致。适合谁适合已经用 Delphi 12.3 建了主工程、需要快速补齐复杂界面尤其是 TreeView 带多列、Grid 带分组、日程排期的团队也适合想从零搭一套跨平台工具界面的独立开发者。这一章先把「它是什么、能省什么、边界在哪」讲清楚后面几章再落到安装、跑通、调参和踩坑。2. 安装 TMS FNC UI Pack v6.2.0.0从解压到设计期包注册2.1 解压后的目录结构与该动哪些文件拿到 .rar 之后先别急着双击。TMS 的安装包通常把源码、编译好的 DCU、设计期包和 Demo 混在一起直接乱点容易把旧版本残留带进来。我一般先解压到一个短路径比如D:\Components\TMSFNCUI_6200路径里不要有中文和空格Delphi 的包搜索路径对空格很敏感。解压后你会看到类似这样的结构目录/文件作用是否必须Source控件源码含 VCL/FMX/LCL 三套必须Packages设计期与运行期包工程必须Demos示例工程按框架分目录建议保留Lib预编译 DCU按 Delphi 版本分可选Readme.txt版本说明与已知问题建议读关键动作是先确认Packages下有没有对应 Delphi 12.3 的包工程。Delphi 12.3 的编译器版本和 12.0/12.1 不完全一样如果包里只有到 12.1 的 DCU就必须走源码编译不能直接引用 Lib 下的预编译文件。2.2 在 Delphi 12.3 里编译并注册设计期包打开 Delphi 12.3走File Open Project定位到Packages目录下对应 VCL 的包工程通常是TMSFNCUIPackVCL.dproj这类命名。打开后先别编译检查两件事一是Project Options Delphi Compiler Target里平台选的是 Win32 还是 Win64二是搜索路径里有没有把Source目录加进去。// 这不是要你运行的代码而是检查包工程搜索路径时该看到的条目 // Project Options Delphi Compiler Search Path 里应包含 // ..\Source // ..\Source\VCL // ..\Source\FMX // 如果缺了 Source\VCL编译时会报 TMSFNCGrid 等单元找不到确认路径后右键包工程选Build再选Install。Install 成功后Delphi 的 Tool Palette 里会出现 TMS FNC 分类里面能看到TMSFNCGrid、TMSFNCTreeView、TMSFNCRichEditor等控件。如果 Install 报「Cannot load package」八成是之前装过旧版本去Component Install Packages里把旧的 TMS 包 Remove 掉再重来。参数上要留意Output Directory和DCP Output Directory建议设成独立目录不要和系统默认的C:\Users\Public\Documents\Embarcadero\Studio\...混在一起否则多个 Delphi 版本共存时容易互相覆盖。这一步做完控件才算真正可用而不是只在源码里躺着。3. 用 TMSFNCTreeView 跑通第一个数据绑定界面3.1 为什么选 FNC 的 TreeView 而不是原生 VCL原生 VCL 的TTreeView够用但一旦你要在节点上显示多列、加复选框、做虚拟加载就得自己写大量绘制代码。TMS FNC 的TMSFNCTreeView把这些做成了属性Columns可以定义多列Node.CheckType控制复选框样式VirtualNodes支持大数据量懒加载。更关键的是同一套代码在 FMX 下也能编译这对以后要出移动端或跨平台版本的团队是实打实的省事。常见做法是主界面用 VCL 保证 Windows 下的稳定性和第三方组件兼容局部复杂控件用 FNC 版本。我一般会先在一个空白 Form 上放一个TMSFNCTreeView确认它能正常绘制再往主工程里搬。3.2 最小可运行示例从数据库加载树节点下面这段代码演示从数据库查询结果填充 TreeView用的是 Delphi 常见的TFDQuery加DataSource方式。假设有一张Departments表字段是ID、ParentID、Name。procedure TFormMain.LoadTreeFromDB; var Node, ParentNode: TTMSFNCTreeViewNode; NodeMap: TDictionaryInteger, TTMSFNCTreeViewNode; DeptID, ParentID: Integer; begin FNCtree.BeginUpdate; // 批量操作前挂起重绘避免闪烁 try FNCtree.Clear; NodeMap : TDictionaryInteger, TTMSFNCTreeViewNode.Create; try FDQuery1.SQL.Text : SELECT ID, ParentID, Name FROM Departments ORDER BY ParentID, ID; FDQuery1.Open; while not FDQuery1.Eof do begin DeptID : FDQuery1.FieldByName(ID).AsInteger; ParentID : FDQuery1.FieldByName(ParentID).AsInteger; Node : FNCtree.AddNode(nil); // 先建节点稍后挂父级 Node.Text[0] : FDQuery1.FieldByName(Name).AsString; Node.DataInteger : DeptID; // 把主键存进节点方便后续定位 NodeMap.Add(DeptID, Node); if (ParentID 0) and NodeMap.TryGetValue(ParentID, ParentNode) then Node.Parent : ParentNode; // 父节点已建好直接挂上去 FDQuery1.Next; end; finally NodeMap.Free; end; finally FNCtree.EndUpdate; // 恢复重绘一次性刷新 end; end;逻辑说明BeginUpdate/EndUpdate是 FNC 控件的标准批量操作模式少了它几百个节点会逐个重绘界面卡到你以为程序死了。NodeMap用来解决父子顺序问题——如果查询结果里子节点先出现父节点还没建直接挂会失败所以先全部建好再按 ParentID 关联。Node.DataInteger是 FNC 节点自带的通用存储字段把数据库主键塞进去后面选中节点时不用再反查。参数说明Node.Text[0]里的 0 是列索引如果你在Columns里定义了多列第二列就是Text[1]。Node.Parent赋值时父节点必须已经在树里否则会抛异常。FDQuery1的FetchOptions.Mode建议设成fmAll避免在遍历时反复取数导致连接占用。3.3 节点选中后回填详情面板树跑通之后下一步通常是点节点、右边显示详情。FNC 的OnNodeClick事件里能拿到Node对象直接读DataInteger去查详情即可。procedure TFormMain.FNCtreeNodeClick(Sender: TObject; Node: TTMSFNCTreeViewNode); begin if Node nil then Exit; FDQueryDetail.Close; FDQueryDetail.ParamByName(DeptID).AsInteger : Node.DataInteger; FDQueryDetail.Open; // 把详情字段绑到右侧的编辑控件上 EditName.Text : FDQueryDetail.FieldByName(Name).AsString; EditMemo.Text : FDQueryDetail.FieldByName(Remark).AsString; end;这里有个容易忽略的点OnNodeClick在键盘上下键切换节点时也会触发如果你在事件里做了耗时查询连续按键会堆积查询。稳妥做法是加一个Timer做防抖或者用OnNodeChanged配合标志位。参数上ParamByName的名字要和 SQL 里的:DeptID完全一致大小写不敏感但拼写必须对。4. 界面细节调优圆角、间距与多框架差异4.1 Panel 圆角与子控件间距的实操参数热搜里「panel控件圆角」「子控件间距」这两个词在 FNC 里对应的是TMSFNCPanel的Corners和Padding属性。原生 VCL 的TPanel没有圆角要圆角得自己写CreateRoundRectRgn而 FNC 面板直接给属性。// 在 FormCreate 里设置面板外观 FNCpanel.Corners : [tcTopLeft, tcTopRight, tcBottomLeft, tcBottomRight]; FNCpanel.CornerRadius : 12; // 圆角半径单位像素 FNCpanel.Fill.Color : $FF2D2D30; // 深色填充注意是 ABGR 顺序 FNCpanel.Stroke.Color : $FF3F3F46; FNCpanel.Stroke.Width : 1; FNCpanel.Padding.SetBounds(16, 12, 16, 12); // 左、上、右、下参数说明CornerRadius超过控件高度一半时圆角会被裁成半圆视觉上反而怪一般 8 到 16 之间比较稳。Fill.Color在 FNC 里是 ABGR 而不是 VCL 常见的 BGR直接抄网页的 RGB 值会偏色这是血泪经验。Padding影响的是子控件与面板边缘的距离如果你发现子控件贴着边先查这里而不是去调子控件的Align。4.2 VCL 与 FMX 下同一控件的表现差异同一份 FNC 代码VCL 和 FMX 下渲染结果会有差别。VCL 走 GDI/Direct2DFMX 走 GPU 渲染圆角和阴影在 FMX 下更平滑但字体度量和 VCL 不完全一致。常见翻车场景是VCL 下调好的列宽到 FMX 下文字被截断。应对办法是不要在代码里写死像素宽度用Column.Width : -1让控件按内容自适应或者按ScaleFactor动态计算。FNC 提供了TMSFNCUtils里的屏幕缩放辅助函数多显示器不同 DPI 时尤其要留意。如果你只做 Windows 桌面VCL 版本足够一旦要出 macOS 或移动端就得从第一天起在 FMX 下也编译一遍别等最后再移植。5. 避坑与排查安装和运行中最容易翻车的几件事5.1 安装后 Tool Palette 里找不到控件现象包 Install 显示成功但 Tool Palette 里没有 TMS FNC 分类。原因通常是设计期包的DesignIDE依赖没勾上或者 Delphi 12.3 的 IDE 缓存没刷新。解决打开包工程Project Options Description里确认Design-time only勾选Requires里包含DesignIDE然后关掉 Delphi删掉%APPDATA%\Embarcadero\BDS\23.0下的ToolPalette缓存文件重启。5.2 编译时报单元找不到或版本不匹配现象Unit TMSFNCGrid was compiled with a different version。原因是你引用了 Lib 下为旧版 Delphi 编译的 DCU而当前是 12.3。解决把搜索路径里的Lib目录移除只保留Source让编译器从源码重新编译。如果源码里也有条件编译报错检查TMSFNCCompiler.inc里对应版本的定义是否包含 12.3。5.3 运行时控件显示为空白或只画一半现象Form 上放了 FNC 控件运行时一片空白。原因多半是BeginUpdate之后忘了EndUpdate或者异常路径跳过了EndUpdate。解决把BeginUpdate/EndUpdate放进try...finally确保异常时也能恢复重绘。另一个可能是Fill.Kind设成了None检查一下外观属性。5.4 数据库绑定后节点顺序错乱现象树节点父子关系对但同级顺序和 SQL 里的ORDER BY不一致。原因是 FNC 默认按插入顺序显示如果你在插入后又改了Parent顺序可能被打乱。解决在ORDER BY里把排序字段查出来插入时用Node.Index显式指定位置或者插入完成后调用FNCtree.Sort按指定列排序。5.5 多版本 Delphi 共存导致包冲突现象装了 12.3 版本后旧项目里的 TMS 控件报错。原因是旧项目引用的包路径指向了旧版本。解决每个 Delphi 版本用独立的包输出目录项目里用相对路径或环境变量引用不要写死绝对路径。升级前先备份.dproj出问题能快速回退。6. 进阶把 FNC 控件用进真实项目的几个习惯6.1 用数据模块统一管理查询别在 Form 里散落 SQL我早期图省事把 SQL 直接写在按钮事件里结果同一个查询在三个地方重复改字段时漏改一处就出 bug。后来固定成所有 FNC 控件绑定的数据都来自一个TDataModuleForm 只负责把DataSource挂到控件上。这样换数据库、加缓存、做权限过滤都只动一个地方。// DataModule 里统一暴露查询 function TDMData.GetDepartments: TFDQuery; begin Result : FDQueryDept; // 已配好 SQL 和参数 end; // Form 里只做绑定 procedure TFormMain.FormCreate(Sender: TObject); begin FNCtree.DataSource : DMData.DataSourceDept; FNCtree.LoadFromDataSource; // FNC 提供的便捷方法 end;LoadFromDataSource是 FNC 自带的批量加载入口比手写循环快但它对字段命名有约定默认找ID、ParentID、Text这类字段名。字段名不一致时用FieldMap属性做映射别去改数据库字段名迁就控件。6.2 验证控件是否真的跨框架可用判断一套 FNC 代码能不能跨框架最直接的办法是建两个空白工程一个 VCL 一个 FMX把同一个 Form 单元加进去编译。能过编译只是第一步还要跑起来看布局。我一般会重点看三处字体在 FMX 下是否被放大、圆角是否被 GPU 渲染成锯齿、滚动条样式是否一致。这三处过了基本就能放心往跨平台方向走。6.3 一个具体技巧用虚拟节点扛住万级数据TreeView 数据量上到几千条时一次性建节点会明显卡顿。FNC 的VirtualNodes模式只创建可见区域的节点滚动时动态取数。开启方式是设FNCtree.VirtualNodes : True然后在OnGetVirtualNodeData事件里按索引返回节点内容。代价是你得自己维护一个扁平化的数据列表不能再依赖Node.Parent的树形结构。这个取舍要想清楚数据量低于两千普通模式更省心上万条且要流畅滚动虚拟模式值得多写那几十行。我自己的习惯是新项目先用普通模式把功能跑通等性能测试真的卡了再切虚拟模式而不是一上来就上复杂方案。控件库再强也替代不了对数据量和交互路径的判断。希望帮到你。本文还有配套的精品资源点击获取