Tree view 树形控件
/TREE vyoo/ · noun · 数据类模式 · #123
像文件夹一样能层层打开的列表：有子项的条目前有一个箭头（▸），点开后在下面缩进一级显示里面的内容，再点一次收起（▾）。文件管理器左侧的文件夹栏、代码编辑器的文件列表、邮件 App 的邮箱列表都用它来显示层级，又不用一次全部摊开。
别名：树形菜单、目录树、文件树。
你可能会这样叫它
- “带小箭头的文件夹列表”
- “侧边栏里能展开的文件列表”
- “可以层层展开的列表”
- “代码编辑器左边的文件树”
- “资源管理器左侧的文件夹”
……它的名字是 树形控件（Tree view）。
常见问题
目录树是什么意思？
目录树就是按层级显示文件夹和文件的树形控件（tree view）：有子项的条目前有一个小箭头，点开后在下面缩进显示里面的内容，再点一次收起。Windows 资源管理器左侧的文件夹栏、代码编辑器里的文件列表都是目录树。
代码里叫什么
| Web (ARIA) | role="tree" role="treeitem" role="group" aria-expanded |
|---|---|
| Windows (WinUI) | TreeView TreeViewNode |
| macOS (AppKit) | NSOutlineView |
| SwiftUI | OutlineGroup List(_:children:) |
| UIKit | NSDiffableDataSourceSectionSnapshot UICellAccessory.outlineDisclosure |
| React (MUI X) | SimpleTreeView RichTreeView TreeItem |
| Android / Compose | 没有树形组件：在 LazyColumn 里按层级缩进各行，点击时显示或隐藏子项 |
复制给 AI 编程工具
把这些文件夹做成树形控件：有子项的行带一个箭头，每行有图标和名称，每深一级缩进一格。点箭头或按左右方向键展开、收起；上下方向键在可见的行之间移动，Home 和 End 跳到第一行和最后一行，输入字母跳到下一个匹配项。记住哪些分支是展开的；很大的分支等展开时再加载，加载中显示一行提示；网页上用 role="tree" 和 role="treeitem"，有子项的行加 aria-expanded，每组子项包在 role="group" 里。