Ant Design 树形控件分析

https://ant.design/components/tree-cn/

树形控件功能分析

层级设置

• 常规展示

• 层级1-5个

• 每层子项1-8个

• 是否带有左侧线条

子项功能

• 常规子项

• 可选子项

• 图标子项

• 可拖动子项

• 以上状态的选中状态

• 以上状态的禁用状态

Figma 组件构建思路

从子层级至顶层，从基础至复合

基础搭建

• 不同层级的文字颜色与字号

• 使用的图标：包含方向，拖拽，文件，文件夹等

• 选择状态的颜色与排布

复合搭建

• 选择框组件的不同状态（ ☑️ 选中状态使用了未正式发布的绝对定位功能）

• 父子层级的关系与缩进（顺序从最小层级 LV5 开始至最高层级 LV1）

• 父层级的线设置

• 最小项的状态设置

层级搭建逻辑

• 每一层级都包含两种：左侧带线与不带线。
  这两种都各自包含：

• 未展开的常态

• 展开1-8个子项

• 相对应的选中态

• 相对应的带有文件图标的状态（父级不带图标和父级带图标）

• 相对应的带有选择框状态

• 相对应的禁用状态

组件构建重点

最小层级 level 5

先构建基础文字字号 / 颜色 / 状态，设置为组件并在主组件添加 Autolayout。

创建分割线，使用了宽度为0.001的特殊技巧，让线在最小层级的组件下方固定位置存在，高度则会随着副层级的frame 剪切决定。（2022/05/12因figma更新绝对定位功能所以可以不用此方法也能实现了）

层级嵌套

从LV4开始，每一层级的子层级都由+1层级的组件替换。

从1-5逐渐替换出所有层级的组件

最终组合组件

将 LV1 组合成最终使用的组件

分为以下几个纬度

• 数量1-8

• 是否带有左侧线

• 是否选择框

• 是否有图标

全部制作完毕后，整个组件就绘制完毕了，可以调用使用。

其中每一层级都可以选择数量1-8，一共4个层级

每个层级的状态都可以单独编辑

更多可能

这个树形控件其实还有可扩展的空间。比如

• 定义不同的大小尺寸

• 拖动组件（使用新版 figma 组件的布尔显示功能）

• 动态加载状态

• 编辑名称图标与编辑状态

• 。。。

文件分享

本文中配图用的 Figma 文件链接（仅供参考）

https://www.figma.com/file/yWFiW7Vh8PCwuG4y76to0E/2022-05-09_Design-System-(share)?node-id=0%3A1

参考资料

此处为语雀内容卡片，点击链接查看：https://www.yuque.com/elevenyang/tvy47l/gn6z1t#PvyPr

https://blog.ngkaho.info/ux-design/filetree/

https://zhuanlan.zhihu.com/p/59354929

https://zhuanlan.zhihu.com/p/27055366

https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/outline-views/