跳到主要内容

树控件（TreeWidget）

TreeWidget类提供了一个树形视图控件。

  • 可以通过 clear() 方法清空树控件的内容。
  • 树控件有一个不可见的根节点，可以通过 root 属性获取。

树节点（TreeNode）​

TreeNode 类表示树控件中的一个节点。

  • 可以通过 add() 或 insert() 方法添加子节点。
  • 可以通过 clear() 方法清空所有子节点，也可以通过 remove() 方法删除指定的节点。

事件​

TreeWidget支持以下事件：

项目点击事件（itemClicked）​

当鼠标点击控件中的某个项目时，触发itemClicked事件，并传递被点击的项目。

项目双击事件（itemDoubleClicked）​

当鼠标双击控件中的某个项目时，触发itemDoubleClicked事件，并传递被双击的项目。

项目右键菜单事件（itemContextMenu）​

当鼠标右键点击控件中的某个项目时，触发itemContextMenu事件，并传递被右键点击的项目。

选择变化事件（selectionChanged）​

当控件的选中项发生变化时，触发selectionChanged事件。

项目展开事件（itemExpanded）​

当某个节点被展开以显示其所有子节点时触发itemExpanded事件，并传递被展开的节点。

项目折叠事件（itemCollapsed）​

当某个节点被折叠以隐藏其所有子节点时触发itemCollapsed事件，并传递被折叠的节点。

// 监听项目点击事件
treeWidget.bind('itemClicked', (event: ItemClickEvent): void => {
    event.item as TreeNode; // 点击的节点
    event.point; // 鼠标位置
});
// 监听项目双击事件
treeWidget.bind('itemDoubleClicked', (event: ItemDoubleClickEvent): void => {
    event.item as TreeNode; // 双击的节点
    event.point; // 鼠标位置
});
// 监听项目右键菜单事件
treeWidget.bind('itemContextMenu', (event: ItemContextMenuEvent): void => {
    event.item as TreeNode; // 右键点击的节点
    event.point; // 鼠标位置
});
// 监听选择变化事件
treeWidget.bind('selectionChanged', (): void => {
    // 选中内容发生变化
});
// 监听项目展开事件
treeWidget.bind('itemExpanded', (event: ItemExpansionEvent): void => {
    event.item as TreeNode; // 节点被展开
});
// 监听项目折叠事件
treeWidget.bind('itemCollapsed', (event: ItemCollapseEvent): void => {
    event.item as TreeNode; // 节点被折叠
});

示例代码​

以下代码展示了如何创建一个树控件并向其中添加节点：

const desktop = Desktop.instance(); // 获取桌面实例
const treeWidget = new TreeWidget(desktop); // 创建树控件并添加到桌面
treeWidget.size = new Size(240, 320); // 设置控件大小
// 获取根节点
const root = treeWidget.root;
// 添加节点
const material = new TreeNode(root, 'Material', 'colorBlock_32.png'); // 创建一个带图标的节点
new TreeNode(material, 'Water(Fulid)'); // 在 "Material" 节点下添加子节点
const somehow = new TreeNode(root, 'Somehow'); // 创建一个普通节点
somehow.expanded = true; // 默认展开该节点
const result = new TreeNode(somehow, 'Results', 'appearence_32.png'); // 在 "Somehow" 节点下添加一个带图标的子节点
result.expanded = true; // 默认展开该节点
result.checkable = true; // 设置为可选中
result.checked = true; // 默认选中该节点
result.addNode('Fringe');// 在 "Results" 节点下添加子节点
new TreeNode(result, 'CutPlane'); // 在 "Results" 节点下添加另一个子节点