Question

我正在使用TreeDataProvider API构建vscode扩展。我有一个显示的事项列表，每个TreeItem一个组合的标签字符串，一切正常。

我缺少的是一种对任何项目上的点击事件作出反应的方法。当你点击它时，VSCode会选择该项目，但是我想听听那个事件，得到有问题的项目...... 从文档中我并不明白。

通常，定制TreeItem非常缺乏，例如能够着色标签或传递更灵活的UI组件而不仅仅是一个字符串...也许我错过了什么？

Answer 1

当你点击它时，VSCode会选择该项目，但是我想听听那个事件，得到有问题的项目......

选择树项时，可以使用TreeItem.command运行某些命令，然后为该命令注册回调。这是一个简单的示例，它将树项的标签跟踪到控制台：

'use strict';
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    vscode.window.registerTreeDataProvider("exampleTreeView", new ExampleTreeProvider());
    vscode.commands.registerCommand("exampleTreeView.selectNode", (item:vscode.TreeItem) => {
        console.log(item.label);
    });
}

export class ExampleTreeProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
    getTreeItem(element: vscode.TreeItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
        return element;
    }

    getChildren(element?: vscode.TreeItem): vscode.ProviderResult<vscode.TreeItem[]> {
        if (element == null) {
            var item = new vscode.TreeItem("Foo");
            item.command = {
                command: "exampleTreeView.selectNode",
                title: "Select Node",
                arguments: [item]
            };
            return [item];
        }
        return null;
    }
}

"contributes": {
    "views": {
        "explorer": [
            {
                "id": "exampleTreeView",
                "name": "Example Tree View"
            }
        ]
    }
},

command可以是任意字符串，但我喜欢通过在视图ID前添加“范围”它。如果要访问回调中的任何属性，请通过arguments传递项目本身很重要。

通常，定制TreeItem非常缺乏，例如能够着色标签或传递更灵活的UI组件，而不仅仅是一个字符串......

这听起来像是一个准确的评估，API在某些方面有点限制。如果您需要更多自由，最近推出的Webview API可能是一个不错的选择。请注意，这意味着使用HTML / CSS / JS从头开始实现您自己的树视图。

如何在vscode的TreeDataProvider中监听事件？

1 个答案: