TreeView视图的界面表现形式是内置的固定了,用户只需要提供数据来源就可以。TreeView的数据来源是通过TreeDataProvider来提供的,所以第一步就是实现自己的TreeDataProvider
import { CancellationToken, Event, ProviderResult, TreeDataProvider, TreeItem, TreeItemCollapsibleState } from "vscode";
export class MyTreeDataProvider implements TreeDataProvider<TreeItem> {
onDidChangeTreeData?: Event<void | TreeItem | TreeItem[] | null | undefined> | undefined;
getTreeItem(element: TreeItem): TreeItem | Thenable<TreeItem> {
return element;
}
getChildren(element?: TreeItem | undefined): ProviderResult<TreeItem[]> {
let arr: TreeItem[] = new Array();
if (element == undefined) {
let item1: TreeItem = new TreeItem("Father", TreeItemCollapsibleState.Collapsed);
item1.description = "age 28";
arr.push(item1);
let item2: TreeItem = new TreeItem("Uncle", TreeItemCollapsibleState.None);
item2.description = "age 26";
arr.push(item2);
return arr;
} else {
if (element.label == 'Father') {
let item1: TreeItem = new TreeItem("Son", TreeItemCollapsibleState.None);
item1.description = "age 3";
arr.push(item1);
return arr;
} else {
return null;
}
}
}
getParent?(element: TreeItem): ProviderResult<TreeItem> {
throw new Error("Method not implemented.");
}
resolveTreeItem?(item: TreeItem, element: TreeItem, token: CancellationToken): ProviderResult<TreeItem> {
throw new Error("Method not implemented.");
}
}
方法说明:
// 这个方法的入参就是TreeItem(是implements TreeDataProvider<TreeItem>这里的泛型类型,也可以是其它类型),出参是TreeItem,这个方法让用户根据元素的内容,返回对应的TreeItem,因为这里的例子,泛型类型就是TreeItem,所以返回本身就可以
getTreeItem(element: TreeItem): TreeItem | Thenable<TreeItem> {
return element;
}
getChildren方法是最重要的方法,入参是element或undefined。返回值是TreeItem数组,代表这一层级的所有的元素集合。当入参是undefined的时候,说明是根结点,如果不是undefined,那element就是父结点,我们根据父结点的内容返回对应的子结点。如果没有子结点就返回null。
当实现完自己的TreeDataProvider后,就在extension.ts里为对应的view注册这个DataProvider
context.subscriptions.push(vscode.window.registerTreeDataProvider("hello.view1", new MyTreeDataProvider()))
启动后的效果如下