【Unity UI 進(jìn)階】仿 Element UI 打造企業(yè)級(jí) Unity UI 組件庫(kù)06環(huán)境與工具說明項(xiàng)說明代碼生成本系列組件庫(kù)代碼由CursorAI 編程助手輔助生成與迭代再結(jié)合工程內(nèi)聯(lián)調(diào)、重構(gòu)落地Unity 版本2022.3.50f1c1Unity 2022.3 LTSUI 框架UGUIUnityEngine.UI示例工程EleUnityUI仿 Element UI 企業(yè)級(jí)組件庫(kù)圖表XChartsAssets/XCharts只調(diào)用公開 API不改插件源碼建議使用Unity 2022.3 LTS同系列版本打開工程。本文實(shí)現(xiàn)均在2022.3.50f1c1下驗(yàn)證。上篇05講完獨(dú)立 Tabs本篇是后臺(tái)骨架的另一塊——頂部導(dǎo)航EleNavMenu以及與內(nèi)容區(qū) / XCharts 的聯(lián)動(dòng)。NavMenu 導(dǎo)航條13 級(jí)菜單、默認(rèn)頁(yè)、下拉、與內(nèi)容區(qū) / XCharts企業(yè)后臺(tái)常見布局┌─────────────────────────────────────────┐ │ Logo 首頁(yè) 系統(tǒng)管理 ▼ 流程控制 ▼ 關(guān)于 │ ← EleNavMenu 頂欄 ├─────────────────────────────────────────┤ │ ContentHost / Page_{code} │ ← 業(yè)務(wù)頁(yè)示例用 XCharts 填充 │ 首頁(yè)四宮格 / 用戶柱狀圖 / … │ └─────────────────────────────────────────┘EleNavMenu仿 Element 頂欄一級(jí)橫排、二級(jí)下拉、三級(jí)側(cè)出深度由maxDepth控制。選中葉子拋OnNavSelected(code, path)由業(yè)務(wù)切換內(nèi)容。Demo 里用EleNavMenuChartDemoHost只做顯隱切換頁(yè)面與圖表在Editor Generate 時(shí)烘焙進(jìn) Prefab。本篇覆蓋配置與maxDepth/ 間距一級(jí)項(xiàng)布局、懸停 / 選中高亮、可點(diǎn)擊命中區(qū)父項(xiàng)默認(rèn)頁(yè) 點(diǎn)擊展開子菜單掛根 CanvasPrefab 生成約定禁止運(yùn)行時(shí)拼裝兜底與 XCharts 內(nèi)容區(qū)聯(lián)動(dòng)涉及文件能力主要文件運(yùn)行時(shí)導(dǎo)航Runtime/NavMenu/EleNavMenu.cs配置模型Runtime/NavMenu/EleNavMenuModels.csConfig 資產(chǎn)Runtime/NavMenu/EleNavMenuConfigAsset.csDemo 宿主只切頁(yè)Runtime/NavMenu/EleNavMenuChartDemoHost.cs圖表尺寸適配Runtime/NavMenu/EleNavMenuXChartsLayout.csEditor 烘焙頁(yè)面Editor/NavMenu/EleNavMenuChartPageBuilder.cs示例生成Editor/NavMenu/EleNavMenuSampleGenerator.cs顏色走設(shè)計(jì)變量頂欄HeaderBg激活 / 懸停Primary文字TextPrimary/TextRegular下拉白底 Border描邊。工程約定.cursor/rules/eleunityui-conventions.mdc不改插件含 XCharts新增代碼寫中文注釋Prefab 用 Generate 烘焙運(yùn)行時(shí)禁止缺啥建啥一、整體結(jié)構(gòu)1. Demo Prefab 層級(jí)EleNavMenuDemo全屏殼 ├── ContentHost ← 內(nèi)容在下 │ ├── Page_home ← 首頁(yè)四宮格XCharts │ ├── Page_user / Page_role / … │ ├── Page_flow_overview / Page_flow_nodes │ └── Page_about └── EleNavMenu全屏透明根最后繪制 ├── NavBar ← 僅頂欄不透明底 │ └── NavRow → Logo Nav_* 按鈕 └── DropdownHost ← 備用區(qū)域?qū)嶋H下拉掛根 Canvas要點(diǎn)導(dǎo)航根全屏但 Image 透明給布局留高度不能用不透明HeaderBg蓋住內(nèi)容。只有NavBar畫頂欄底色。下拉面板掛到根 CanvassortingOrder抬高避免被圖表?yè)踝　?. 數(shù)據(jù)流EleNavMenuConfig.itemschildren 嵌套 → BuildBar() 生成一級(jí)按鈕間距 itemSpacing → 點(diǎn)擊葉子 → SelectLeaf(code, path) → OnNavSelected → 點(diǎn)擊父項(xiàng) → 切默認(rèn)葉子頁(yè) ToggleDropdown掛根 Canvas → DemoHost.ShowPage(code) 只 SetActive Prefab 內(nèi) Page_*業(yè)務(wù)側(cè)最小接入nav.OnNavSelected(code,path){// code: 葉子編碼如 user// path: 如 system/userhost.ShowPage(code);};二、配置模型1. 單項(xiàng)EleNavItemConfignewEleNavItemConfig{label系統(tǒng)管理,codesystem,iconEleUiIcons.Settings,// 空無(wú)圖標(biāo)enabledtrue,childrennewListEleNavItemConfig{/* 二級(jí)… */}}2. 整體EleNavMenuConfig字段含義height頂欄高度默認(rèn) 48maxDepth1僅一級(jí)2可下拉二級(jí)3可再側(cè)出三級(jí)itemSpacing一級(jí)項(xiàng)間距默認(rèn) 16itemPaddingX項(xiàng)內(nèi)左右 padding默認(rèn) 14showLogo/logoText左側(cè)品牌圓點(diǎn)及可選文案dropdownMinWidth下拉最小寬度items菜單樹3.maxDepth對(duì)照值效果1僅一級(jí)children不展開2一級(jí) 向下二級(jí)3二級(jí)行可再側(cè)出三級(jí)如「權(quán)限 → 菜單權(quán)限」4. 示例菜單樹CreateSample一級(jí)子項(xiàng)有內(nèi)容頁(yè)首頁(yè)home葉子 →Page_home系統(tǒng)管理system▼用戶 / 角色 / 權(quán)限(三級(jí)) →Page_user等流程控制process▼流程總覽 / 節(jié)點(diǎn)監(jiān)控關(guān)于about葉子 →Page_about父項(xiàng)本身沒有Page_system/Page_process。點(diǎn)父項(xiàng)會(huì)打開第一個(gè)葉子作為默認(rèn)頁(yè)系統(tǒng)管理 → 用戶管理流程控制 → 流程總覽展開子菜單可再點(diǎn)其它子項(xiàng)三、一級(jí)頂欄間距、命中、懸停與選中1. 布局NavRow使用HorizontalLayoutGroupspacing itemSpacing按鈕寬度按「圖標(biāo) 文字 ▼ padding」估算標(biāo)簽寬只按文字避免圖標(biāo)與文字脫節(jié)父項(xiàng)顯示明顯的▼2. 為什么必須能點(diǎn)中UGUI 對(duì)alpha0的 Graphic 往往不參與射線檢測(cè)。按鈕底圖使用極低透明度如0.02文字 / 圖標(biāo)raycastTarget false點(diǎn)擊落到整塊按鈕上。3. 懸停與選中狀態(tài)表現(xiàn)常態(tài)近透明底 TextPrimary懸停淺藍(lán)底 Primary文字 / 圖標(biāo)選中更深淺藍(lán)底 Primary含子路徑選中user時(shí)system也高亮選中判斷activeCode或activePath以code/為前綴。四、子菜單二級(jí) / 三級(jí)1. 交互僅點(diǎn)擊展開不在懸停時(shí)自動(dòng)彈出避免閃關(guān)再點(diǎn)同一父項(xiàng) → 收起點(diǎn)面板外 → 關(guān)閉打開后忽略 12 幀防止點(diǎn)開即關(guān)2. 實(shí)現(xiàn)要點(diǎn)ShowDropdown → 父節(jié)點(diǎn) rootCanvas.transform不是只有 48px 高的導(dǎo)航條 → 白底 Outline 子 Canvas(sortingOrder≈500) → 按子項(xiàng)數(shù)量定高count * 40 padding → 用按鈕左下角屏幕坐標(biāo)轉(zhuǎn)到 Canvas 本地定位三級(jí)ShowSubmenu貼在二級(jí)行右側(cè)sortingOrder更高。3. 踩過的坑文檔化現(xiàn)象原因處理有 ▼ 但看不到下拉導(dǎo)航根只有欄高DropdownHost 高度≈0導(dǎo)航根全屏透明下拉改掛根 Canvas內(nèi)容區(qū)整頁(yè)被蓋住全屏根用了不透明HeaderBg根 ImageColor.clear底色只在NavBar下拉閃一下消失同幀「點(diǎn)外部關(guān)閉」_ignoreOutsideClickUntilFrame圖表蓋住下拉排序不夠下拉獨(dú)立 Canvas 高sortingOrder五、Prefab 生成與運(yùn)行時(shí)約定1. 資源路徑資源路徑ConfigResources/NavMenu/EleNavMenuSampleConfig.asset僅頂欄 PrefabPrefabs/NavMenu/EleNavMenuSample.prefab整頁(yè) Demo PrefabPrefabs/NavMenu/EleNavMenuDemo.prefab2. 菜單EleUnityUI → Samples → NavMenu → Generate EleNavMenu Sample # 烘焙 Config Prefab EleUnityUI → Samples → NavMenu → Spawn EleNavMenu Preview In Scene # 只實(shí)例化 EleUnityUI → Samples → NavMenu → Reset EleNavMenu Config To Preset3. Generate 做什么Editor寫 / 更新 ConfigGenerateNavBarPrefab頂欄樣例GenerateDemoPrefab全屏殼 透明導(dǎo)航根 ContentHostEleNavMenuChartPageBuilder.BakeAllPages烘焙全部Page_*與 XChartsFitAllChartsUnder糾正 XChartsInit強(qiáng)制的 580×300改回 stretch4. Spawn / Play 做什么禁止兜底創(chuàng)建// ? 只實(shí)例化 切已有 Page_*PrefabUtility.InstantiatePrefab(demoPrefab);host.CachePagesFromPrefab();host.ShowPage(home);// ? 運(yùn)行時(shí)發(fā)現(xiàn)沒有 ContentHost / Page 就 CreateRect、BuildChart缺 Prefab 時(shí) Spawn彈窗提示先 Generate不在 Spawn 里臨時(shí)拼整頁(yè)。5. XCharts 注意Chart 與Image不能同物體都是 Graphic→ 掛在卡片下ChartRootInit在sizeDelta偏小時(shí)會(huì)寫成580×300→EleNavMenuXChartsLayout.FitChartToParent改回拉伸六、與內(nèi)容區(qū) / Tabs 的職責(zé)劃分組件管什么NavMenu跨模塊導(dǎo)航大分區(qū) 下拉Tabs模塊內(nèi)多視圖Table.showTabs同一張表的數(shù)據(jù)篩選不是全局導(dǎo)航DemoHost按code顯隱Page_*可換成你自己的路由典型組合頂欄 Nav → 某Page_*里再放 Tabs / Table。七、API 一覽API / 事件說明SetConfig(config, rebuild)換配置并重建頂欄Rebuild()/EditorRebuild()Editor「按 Config 重建」SelectNav(code, path, notify)代碼選中OnNavSelected(code, path)ActiveCode/ActivePath當(dāng)前葉子與路徑DemoHost.ShowPage(code)只切換已烘焙頁(yè)DemoHost.CachePagesFromPrefab()收集Page_*八、落地檢查清單Generate 后存在EleNavMenuDemo.prefab且ContentHost下有多個(gè)Page_*Spawn 后能看到首頁(yè)四宮格頂欄未蓋住內(nèi)容一級(jí)項(xiàng)間距正常懸停 / 選中高亮父項(xiàng)有明顯▼點(diǎn)擊彈出白底子菜單Console 有打開下拉日志點(diǎn)「用戶管理」等子項(xiàng)內(nèi)容切換正確未改過Assets/XCharts源碼改菜單配置后重新Generate不要依賴 Play 時(shí)自動(dòng)拼頁(yè)九、小結(jié)EleNavMenu 透明全屏根 不透明NavBar 掛根 Canvas 的下拉maxDepth/itemSpacing/ Logo配置驅(qū)動(dòng)父項(xiàng) 默認(rèn)葉子頁(yè) 點(diǎn)擊展開子菜單內(nèi)容在子項(xiàng)Page_*Demo頁(yè)面與圖表 Editor 烘焙運(yùn)行時(shí)只切顯隱XCharts只作適配調(diào)用圖表 stretch 適配分辨率系列回顧與下篇篇內(nèi)容04Table 下選中、列顯示、工具欄與彈窗05Tabs圖標(biāo)、下劃線、內(nèi)容面板06NavMenu13 級(jí)、默認(rèn)頁(yè)、下拉、XCharts Demo本文07ContextMenu 右鍵菜單掛載目標(biāo)、ShowAt、danger / divider / 子菜單以及點(diǎn)外部關(guān)閉與 NavMenu 下拉的異同。若你在 UGUI 里也遇到過「全屏導(dǎo)航根蓋住內(nèi)容」或「下拉掛在 48px 高的父節(jié)點(diǎn)里」歡迎留言——透明根 下拉掛根 Canvas就是為此準(zhǔn)備的。