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