樹(shù)形控件學(xué)習(xí)與分析-設(shè)計(jì)系統(tǒng)01
Ant Design 樹(shù)形控件分析
https://ant.design/components/tree-cn/
樹(shù)形控件功能分析
層級(jí)設(shè)置
常規(guī)展示
層級(jí)1-5個(gè)
每層子項(xiàng)1-8個(gè)
是否帶有左側(cè)線條
子項(xiàng)功能
常規(guī)子項(xiàng)
可選子項(xiàng)
圖標(biāo)子項(xiàng)
可拖動(dòng)子項(xiàng)
以上狀態(tài)的選中狀態(tài)
以上狀態(tài)的禁用狀態(tài)
Figma 組件構(gòu)建思路
從子層級(jí)至頂層，從基礎(chǔ)至復(fù)合
基礎(chǔ)搭建
不同層級(jí)的文字顏色與字號(hào)
使用的圖標(biāo)：包含方向，拖拽，文件，文件夾等
選擇狀態(tài)的顏色與排布
復(fù)合搭建
選擇框組件的不同狀態(tài)（ ?? 選中狀態(tài)使用了未正式發(fā)布的絕對(duì)定位功能）
父子層級(jí)的關(guān)系與縮進(jìn)（順序從最小層級(jí) LV5 開(kāi)始至最高層級(jí) LV1）
父層級(jí)的線設(shè)置
最小項(xiàng)的狀態(tài)設(shè)置
層級(jí)搭建邏輯
每一層級(jí)都包含兩種：左側(cè)帶線與不帶線。
這兩種都各自包含：
未展開(kāi)的常態(tài)
展開(kāi)1-8個(gè)子項(xiàng)
相對(duì)應(yīng)的選中態(tài)
相對(duì)應(yīng)的帶有文件圖標(biāo)的狀態(tài)（父級(jí)不帶圖標(biāo)和父級(jí)帶圖標(biāo)）
相對(duì)應(yīng)的帶有選擇框狀態(tài)
相對(duì)應(yīng)的禁用狀態(tài)
組件構(gòu)建重點(diǎn)
最小層級(jí) level 5
先構(gòu)建基礎(chǔ)文字字號(hào) / 顏色 / 狀態(tài)，設(shè)置為組件并在主組件添加 Autolayout。
創(chuàng)建分割線，使用了寬度為0.001的特殊技巧，讓線在最小層級(jí)的組件下方固定位置存在，高度則會(huì)隨著副層級(jí)的frame 剪切決定。（2022/05/12因figma更新絕對(duì)定位功能所以可以不用此方法也能實(shí)現(xiàn)了）
層級(jí)嵌套
從LV4開(kāi)始，每一層級(jí)的子層級(jí)都由+1層級(jí)的組件替換。
從1-5逐漸替換出所有層級(jí)的組件
最終組合組件
將 LV1 組合成最終使用的組件
分為以下幾個(gè)緯度
數(shù)量1-8
是否帶有左側(cè)線
是否選擇框
是否有圖標(biāo)
全部制作完畢后，整個(gè)組件就繪制完畢了，可以調(diào)用使用。
其中每一層級(jí)都可以選擇數(shù)量1-8，一共4個(gè)層級(jí)
每個(gè)層級(jí)的狀態(tài)都可以單獨(dú)編輯
更多可能
這個(gè)樹(shù)形控件其實(shí)還有可擴(kuò)展的空間。比如
定義不同的大小尺寸
拖動(dòng)組件（使用新版 figma 組件的布爾顯示功能）
動(dòng)態(tài)加載狀態(tài)
編輯名稱(chēng)圖標(biāo)與編輯狀態(tài)
。。。
文件分享
本文中配圖用的 Figma 文件鏈接（僅供參考）
https://www.figma.com/file/yWFiW7Vh8PCwuG4y76to0E/2022-05-09_Design-System-(share)?node-id=0%3A1
參考資料
此處為語(yǔ)雀內(nèi)容卡片，點(diǎn)擊鏈接查看：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/
