VSCode插件开发教程（四）TreeView的实现

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()))

启动后的效果如下