没有合适的资源?快使用搜索试试~ 我知道了~
gaoljhy#blog#TreeView视图1
需积分: 0 0 下载量 97 浏览量
2022-07-25
14:34:29
上传
评论
收藏 6KB MD 举报
温馨提示
试读
1. 第一个是这个 TreeView 的名字 2. 第二个则是这个 TreeView 的数据来源 Data Provider 1. 第一种,就是提供 label
资源推荐
资源详情
资源评论
# 视图 TreeView
第三类 `API` 则是跟视图有关。
这一套 `API` 的最初需求是来自于 `Visual Studio` 用户,在 `Visual Studio` 中,可以在视图中看到**项目**、**测试**、**云管理**等
但是 VS Code 当时并没有 `API` 可以实现这种定制。
于是 `TreeView API` 应运而生,通过实现这套 `API`,任何插件都可以实现类似于资源管理器的树形结构。
`TreeView` API 虽然是用于创建视图中树形结构的,但是它跟 `VS Code` 的其他 API 非常类似,都是给 `VS Code` 提供数据,然后 `VS Code` 来进行渲染。
## 创建 TreeView 的 API 也非常简单:
```js
export namespace window {
export function registerTreeDataProvider(viewId: string, treeDataProvider: TreeDataProvider): Disposable;
}
```
`registerTreeDataProvider` 一共有两个参数
1. 第一个是这个 `TreeView` 的名字
2. 第二个则是这个 `TreeView` 的数据来源 `Data Provider`。
### Data Provider 长什么样呢?
```js
export interface TreeDataProvider {
onDidChangeTreeData?: Event;
getTreeItem(element: T): TreeItem | Thenable;
getChildren(element?: T): ProviderResult;
getParent?(element: T): ProviderResult;
}
```
这个 `Data Provider` 上,只有两个属性是必须的。
1. 第一个是 `getTreeItem`,通过这个函数,`VS Code` 就知道该怎么渲染某个树节点了。
2. 第二个就是 `getChildren`,这个也很好理解,就是返回一个树节点的所有子节点的数据。
### `TreeItem`,也就是每个树节点的数据结构:
```js
export class TreeItem {
label?: string;
id?: string;
iconPath?: string | Uri | { light: string | Uri; dark: string | Uri } | ThemeIcon;
resourceUri?: Uri;
tooltip?: string | undefined;
/**
* The comma
点击阅读更多
资源评论
一曲歌长安
- 粉丝: 52
- 资源: 302
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功