[教程]QDAC FMX VirtualTreeView 入门教程

• C++ Builder、Delphi • 评论关闭 • •浏览 3,552 次

实际上，本不想造车，可官方的车太破，而 Jam software （原Softgem）的 VirtualTreeView（后面称老VT吧） 又不知道 FMX 版要等到什么时候，本着求人不如求己的基本原则，编写了这个组件。不过，感谢的话是必需说的，这个组件的核心思想实际上与老VT的基本一致。不过我没有照扒别人东西的习惯，虽然它的设计已经很好用，但我还是想按照自己的想法设计这个 TQVirtualTreeView（下面称新VT吧）。

首先，这个组件分成了三个级别，然后定义好接口并分别实现它：

  • 数据管理
  • 内容呈现
  • 内容编辑

这么分层以后，接下来就是完成各自的组成部分。

一、数据管理这方面

每个结点对应的是一个 TQVTNode 对象，老VT是用的结构体，我用的是对象，而且是基于接口设计的，这样子释放和引用的事也省心一些，虽然理论上对象存在占用空间更大一占，创建速度秒慢一点的问题，但通过算法的优化，这些实际上都不算什么核心的问题。

使用老VT的时候，我们知道要设置 NodeDataSize，以便老 VT 分配 PVirtualNode 所占用的内存时，将附加数据内容考虑进去，保存起来。新 VT 换种设计思路，提供了一个扩展属性 Exts 来管理扩展列表，让你可以扩展任何基于接口的数据内容，而使用接口的原因就是内存的自动管理，我们不需要去关心内存释放的问题。当然，如果你扩展数据是记录或者普通对象怎么办？新 VT 给你提供了一个 TQSimpleInterface 模板类来做一个简单的封装。

我们回到 Exts 这个属性，它实际是 TList<IInterface> 类型，所以增删啥的我就不说了，新 VT 提供了额外的方法方便你检索扩展成员：

function ExtByType(const IID: TGuid; var AValue): Boolean; overload;
function ExtByType(const AClass: TClass): TObject; overload;
function ExtByType(const AClass: TClass; var AValue): Boolean; overload;
function ExtByName(const AName: String): IInterface;

这几个接口，都会返回找到的第一个。注意第四个接口 ExtByName 要求你添加的扩展数据支持 IQVTNamedExt 接口，以但能够让函数得到扩展数据的名称。第三个可以认为是第二个的重载，第一个是根据接口 ID 直接去找对应的接口。告诉你一个小秘密，由于 TQVTNode 重载了 QueryInterface 接口，所以实际上，如果你懒的可以，你可以直接使用 Delphi 自身的一些对接口的支持来访问扩展数据，比如我们的扩展数据有一个类型是 IPropertyData：

procedure TForm1.vtPropsFocusChanged(Sender: TQVirtualTreeView;
  ANode: TQVTNode; ACol: Integer);
var
   AData:IPropertyData;
begin
AData:=ANode as IPropertyData;
if Assigned(AData) then
   ...
end

和

procedure TForm1.vtPropsFocusChanged(Sender: TQVirtualTreeView;
  ANode: TQVTNode; ACol: Integer);
var
   AData:IPropertyData;
begin
if ANode.ExtByType(IPropertyData,AData) then
   ...
end

两种用法都是可以的。通过扩展数据的方式，而不是像老 VT 绑定死到 PVirtualNode 结构上，带来的优势是更灵活方便，缺点是需要额外分配更多的内存（列表对象和每个数据成员）和性能的略微下降，但我确定除非你写的很烂，否则你不会感觉到也们的速度区别。

二、内容呈现

内容的绘制这块实际上就是解决怎么将这个树画出来的问题。老VT提供了一个 TVirtualDrawTree 和一个 TVirtualStringTree，新 VT 在这方面的做法是为每个单元格的绘制请求一个 IQVTDrawer 接口，每个单元格怎么绘制的问题交给 IQVTDrawer 的实现去解决。所以在新 VT 中，绘制这个树的正常过程变成了：

  1. 确定要绘制的结点列表，不可见的结点就不需要画了嘛。
  2. 绘制控件的大外框；
  3. 绘制每个结点，包括他们的边框
  4. 绘制标题

好吧，有人可能说太麻烦了，我还得自己实现 IQVTDrawer 去画呀？当然不能这样，自己画当然是要毫不犹豫的支持的，但大部分情况下，我们不能让你自己去做这个费劲的事。所以新 VT 默认了很多类型的绘制器，你直接设置 TQVTNode 的 DrawerType 属性就好了。当然了，如果默认的绘制器无法满足你 BT 的需求，你有两种方式可以自绘：

  1. 直接自己实现 IQVTDrawer 接口，然后在新 VT 的 OnGetCellDrawer 事件中，返回这个接口的实例；
  2. 在窗体上放置一个 TQVTCustomDrawer 组件，然后响应 OnDraw 事件完成绘制。

这里牵涉到的许多绘制的各种参数，比如颜色/样式啥的怎么知道呢？这就需要通过另一个接口 IQVTCellData 来获取。这个接口是同样有两种方式来处理：

  1. 直接自己实现 IQVTCellData 接口，然后在新 VT 的 OnGetCellData 事件中，返回这个接口的实例；
  2. 在窗体上放置 TQVTCustomCell 子类的组件，然后响应对应的事件来返回需要的数据，比如 TQVTCustomTextCell 就要求你实现 OnGetText 事件以便用于支持 IQVTTextCellData 接口。系统默认提供的类型满足一般的需求应该没有多大问题。

三、内容编辑

一颗只能显示不能修改的树是不完美的，内容编辑控件要求实现的接口是 IQVTInplaceEditor，你可以在 OnGetCellEditor 事件中返回自定义的编辑器实现，当然默认的实现也为你准备好了，你可以将组件放置到窗体上，然后为每列的 Editor 来绑定对应的编辑器。

到这一步还差一点，你的内容就可以编辑了，你还需要设置新 VT 的 Options ，将 toEditable 选项启用。下面说下新 VT 内容编辑内部的实际流程：

  1. 当前如果处于编辑中，调用 EndEdit 结束上一个的编辑；
  2. 如果当前单元格处理可以编辑状态，触发 BeforeEdit 事件通知；
  3. 获取单元格对应的 IQVTInplaceEditor 实现（默认赋列的 Editor 属性，然后调用 OnGetCellEditor  事件给用户调整的机会；
  4. 调用 IQVTInplaceEditor.BeginEdit 来尝试进入编辑状态，如果返回 False，则退出编辑状态；
  5. 调用 IQVTInpalceEditor.SetBounds 调整编辑控件的位置，然后调用 IQVTInpalceEditor.Show 显示编辑控件供用户编辑；
  6. 完成后，调用 EndEdit 结束编辑或者调用 CancelEdit 取消编辑。调用 EndEdit 如果成功，会触发 AfterEdit 事件，CancelEdit 目前没有触发事件。

好了，既然牵涉到编辑，那么要编辑的内容从何而来，到何而去是要解决的另一个问题，同样它和内容呈现一样，是通过 IQVTCellData 的子接口来实现的，不同的编辑器类型要求实现不同的接口，具体控件就不在这里一一说明了。

综上所述，那么我们一般使用 TQVirtualTreeView 需要的步骤就很清楚了：

  1. 放一个 TQVirtualTreeView 控件，并添加各列需要的 IQVTCellData 和 IQInplaceEditor 组件；
  2. 修改 TQVirtualTreeView.Header.Columns，然后添加列并设置相应的 CellData/Editor 以及 DrawerType  属性（注意默认不显示标题，要显示标题，设置 Header.Options 包含 hoVisible ）；
  3. 实现各个 CellData 对应的事件，以返回相应的数据。在设计时，可以设置 CellData 的 DefaultText 属性，并设置 TQVirtualTreeView.RootNodeCount 属性来预览效果。
  4. 一般情况下，还需实现 TQVirtualTreeView.OnInit 方法以便建立结点与你内部数据之间的关联，当然有些场景下是不需要的。

好了，本篇教程只是一个入门的简单介绍，以方便你查看相应示例。具体的代码还是需要你自己去深入研究的，毕竟师傅领进门，修行在个人，这个控件不会有太多教程（主要是没时间），有需要的朋友自己研究下，有问题可以帮忙修改下反馈给我。

给大家提供了两个 Demo，位于 Demos\Delphi\FMX\VirtualTreeView 目录下。

分享到：