跳到主要内容

树视图

树视图把内容画成侧栏里的树，样式和资源管理器、源代码管理一致。数据由扩展的 TreeDataProvider 提供，VS Code 负责展开、滚动和键盘操作。

清单​

先贡献视图容器（活动栏或面板上的一栏），再在容器里贡献视图：

{
  "contributes": {
    "viewsContainers": {
      "activitybar": [
        { "id": "demo", "title": "Demo", "icon": "media/icon.svg" }
      ]
    },
    "views": {
      "demo": [
        { "id": "demo.tree", "name": "Items" }
      ]
    }
  }
}

视图被打开时会激活扩展。1.74 起，自己贡献的视图可以不手写 onView。when 控制视图是否可见。拖到活动栏、标题显示不下时用 icon。离开默认容器后，contextualTitle 用来补上上下文。

提供数据​

vscode.window.registerTreeDataProvider('demo.tree', provider);
// 需要 reveal、选中、复选框时改用 createTreeView，它返回 TreeView
const view = vscode.window.createTreeView('demo.tree', { treeDataProvider: provider });

TreeDataProvider 至少实现：

  • getChildren(element?)：不传元素时返回根；传入时返回它的子节点。
  • getTreeItem(element)：把你的节点对象转成 TreeItem（标签、图标、能否展开、关联的命令）。

可选 getParent，有它才能 reveal 到某个节点。

数据变了就触发 onDidChangeTreeData。参数省略表示整棵树重绘；传入一个元素表示只刷新那一枝。getChildren 由 VS Code 在需要时调用，里面不要做长时间的同步 IO，否则会卡住扩展宿主。

和网页视图怎么选​

树适合「一层层的列表、和内置侧栏长得一样」。自由布局、图表、复杂表单用 Webview。树更轻，也自动跟着主题。

参考​