VSCode API TreeView 没有获取元素的子元素

Question

在给VSCode提供一个treeview时，好像获取到了所有的父元素，但是获取不到这些父元素的子元素，我在里面加了一个调试点，看到只有曾经用 undefined 调用过，我的实现有什么不妥之处吗？

export class GalleryTreeItem extends vscode.TreeItem {
  constructor(
    private extensionUri: vscode.Uri,
    public collapsibleState: vscode.TreeItemCollapsibleState,
    public readonly name: string,
    public readonly project?: Project
  ) {
    super(name, collapsibleState);
    if (this.project) {
      this.contextValue = "gallery";
      this.description = `v${this.project.config.userContentVersion}`;
      this.tooltip = this.project.config.repositoryUrl;
      this.command = {
        title: "Plywood Gallery: Open a gallery webview.",
        command: "plywood-gallery.Open",
        arguments: [this.label],
      };
      this.iconPath = vscode.Uri.joinPath(
        this.extensionUri,
        "assets/photo-gallery.png"
      );
    } else {
      this.contextValue = "chapter";
    }
  }

  getChapters() {
    if (this.project) {
      return Object.keys(this.project.parameters).map(
        (name) =>
          new GalleryTreeItem(
            this.extensionUri,
            vscode.TreeItemCollapsibleState.Collapsed,
            name
          )
      );
    } else {
      return [];
    }
  }
}

export class InstalledGalleriesExplorerProvider
  implements vscode.TreeDataProvider<GalleryTreeItem>
{
  constructor(private extensionUri: vscode.Uri) {}

  private _onDidChangeTreeData: vscode.EventEmitter<
    GalleryTreeItem | undefined | void
  > = new vscode.EventEmitter<GalleryTreeItem | undefined | void>();
  readonly onDidChangeTreeData: vscode.Event<
    GalleryTreeItem | undefined | void
  > = this._onDidChangeTreeData.event;

  getTreeItem(element: GalleryTreeItem): vscode.TreeItem {
    return element;
  }

  refresh(): void {
    this._onDidChangeTreeData.fire();
  }

  async getChildren(element?: GalleryTreeItem): Promise<GalleryTreeItem[]> {
    if (element) {
      return Promise.resolve(element.getChapters());
    } else {
      return getLocalProjects(this.extensionUri).then((projects) =>
        projects.map(
          (prj) =>
            new GalleryTreeItem(
              this.extensionUri,
              vscode.TreeItemCollapsibleState.None,
              prj.config.projectName,
              prj
            )
        )
      );
    }
  }
}

Answer 1

“如果我没看错，你正在创建 GalleryTreeItems，它们是你的父节点，但它们有 vscode.TreeItemCollapsibleState.None，这意味着它们就像叶节点一样。”

将其更改为 vscode.TreeItemCollapsibleState.Collapsed 即可修复。

Answer 2

我在这里找到了感兴趣的确切段落：TreeView guide: Tree Data Provider 对于任何构建 TeeViews 的人来说，这是一个很好的资源。

Leaving the collapsibleState as its default of TreeItemCollapsibleState.None indicates that the tree item has no children. getChildren will not be called for tree items with a collapsibleState of TreeItemCollapsibleState.None.

已添加重点，默认值为 TreeItemCollapsibleState.None 因此，如果您未明确将状态设置为其他内容，则永远不会检索这些节点的子节点。

正如我在评论中提到的，您为父节点提供了 vscode.TreeItemCollapsibleState.None 属性。显然，vscode 足够聪明，不会去寻找这些节点的子节点——因为它们无论如何都无法打开。

解决方案就是选择另一个 collapsibleState，例如 TreeItemCollapsibleState.Collapsed 或 TreeItemCollapsibleState.Expanded。

VSCode API TreeView 没有获取元素的子元素

VSCode API TreeView not getting children of elements

treeview

visual-studio-code

vscode-extensions