【Unity UI 进阶】仿 Element UI 打造企业级 Unity UI 组件库06环境与工具说明项说明代码生成本系列组件库代码由CursorAI 编程助手辅助生成与迭代再结合工程内联调、重构落地Unity 版本2022.3.50f1c1Unity 2022.3 LTSUI 框架UGUIUnityEngine.UI示例工程EleUnityUI仿 Element UI 企业级组件库图表XChartsAssets/XCharts只调用公开 API不改插件源码建议使用Unity 2022.3 LTS同系列版本打开工程。本文实现均在2022.3.50f1c1下验证。上篇05讲完独立 Tabs本篇是后台骨架的另一块——顶部导航EleNavMenu以及与内容区 / XCharts 的联动。NavMenu 导航条13 级菜单、默认页、下拉、与内容区 / XCharts企业后台常见布局┌─────────────────────────────────────────┐ │ Logo 首页 系统管理 ▼ 流程控制 ▼ 关于 │ ← EleNavMenu 顶栏 ├─────────────────────────────────────────┤ │ ContentHost / Page_{code} │ ← 业务页示例用 XCharts 填充 │ 首页四宫格 / 用户柱状图 / … │ └─────────────────────────────────────────┘EleNavMenu仿 Element 顶栏一级横排、二级下拉、三级侧出深度由maxDepth控制。选中叶子抛OnNavSelected(code, path)由业务切换内容。Demo 里用EleNavMenuChartDemoHost只做显隐切换页面与图表在Editor Generate 时烘焙进 Prefab。本篇覆盖配置与maxDepth/ 间距一级项布局、悬停 / 选中高亮、可点击命中区父项默认页 点击展开子菜单挂根 CanvasPrefab 生成约定禁止运行时拼装兜底与 XCharts 内容区联动涉及文件能力主要文件运行时导航Runtime/NavMenu/EleNavMenu.cs配置模型Runtime/NavMenu/EleNavMenuModels.csConfig 资产Runtime/NavMenu/EleNavMenuConfigAsset.csDemo 宿主只切页Runtime/NavMenu/EleNavMenuChartDemoHost.cs图表尺寸适配Runtime/NavMenu/EleNavMenuXChartsLayout.csEditor 烘焙页面Editor/NavMenu/EleNavMenuChartPageBuilder.cs示例生成Editor/NavMenu/EleNavMenuSampleGenerator.cs颜色走设计变量顶栏HeaderBg激活 / 悬停Primary文字TextPrimary/TextRegular下拉白底 Border描边。工程约定.cursor/rules/eleunityui-conventions.mdc不改插件含 XCharts新增代码写中文注释Prefab 用 Generate 烘焙运行时禁止缺啥建啥一、整体结构1. Demo Prefab 层级EleNavMenuDemo全屏壳 ├── ContentHost ← 内容在下 │ ├── Page_home ← 首页四宫格XCharts │ ├── Page_user / Page_role / … │ ├── Page_flow_overview / Page_flow_nodes │ └── Page_about └── EleNavMenu全屏透明根最后绘制 ├── NavBar ← 仅顶栏不透明底 │ └── NavRow → Logo Nav_* 按钮 └── DropdownHost ← 备用区域实际下拉挂根 Canvas要点导航根全屏但 Image 透明给布局留高度不能用不透明HeaderBg盖住内容。只有NavBar画顶栏底色。下拉面板挂到根 CanvassortingOrder抬高避免被图表挡住。2. 数据流EleNavMenuConfig.itemschildren 嵌套 → BuildBar() 生成一级按钮间距 itemSpacing → 点击叶子 → SelectLeaf(code, path) → OnNavSelected → 点击父项 → 切默认叶子页 ToggleDropdown挂根 Canvas → DemoHost.ShowPage(code) 只 SetActive Prefab 内 Page_*业务侧最小接入nav.OnNavSelected(code,path){// code: 叶子编码如 user// path: 如 system/userhost.ShowPage(code);};二、配置模型1. 单项EleNavItemConfignewEleNavItemConfig{label系统管理,codesystem,iconEleUiIcons.Settings,// 空无图标enabledtrue,childrennewListEleNavItemConfig{/* 二级… */}}2. 整体EleNavMenuConfig字段含义height顶栏高度默认 48maxDepth1仅一级2可下拉二级3可再侧出三级itemSpacing一级项间距默认 16itemPaddingX项内左右 padding默认 14showLogo/logoText左侧品牌圆点及可选文案dropdownMinWidth下拉最小宽度items菜单树3.maxDepth对照值效果1仅一级children不展开2一级 向下二级3二级行可再侧出三级如「权限 → 菜单权限」4. 示例菜单树CreateSample一级子项有内容页首页home叶子 →Page_home系统管理system▼用户 / 角色 / 权限(三级) →Page_user等流程控制process▼流程总览 / 节点监控关于about叶子 →Page_about父项本身没有Page_system/Page_process。点父项会打开第一个叶子作为默认页系统管理 → 用户管理流程控制 → 流程总览展开子菜单可再点其它子项三、一级顶栏间距、命中、悬停与选中1. 布局NavRow使用HorizontalLayoutGroupspacing itemSpacing按钮宽度按「图标 文字 ▼ padding」估算标签宽只按文字避免图标与文字脱节父项显示明显的▼2. 为什么必须能点中UGUI 对alpha0的 Graphic 往往不参与射线检测。按钮底图使用极低透明度如0.02文字 / 图标raycastTarget false点击落到整块按钮上。3. 悬停与选中状态表现常态近透明底 TextPrimary悬停浅蓝底 Primary文字 / 图标选中更深浅蓝底 Primary含子路径选中user时system也高亮选中判断activeCode或activePath以code/为前缀。四、子菜单二级 / 三级1. 交互仅点击展开不在悬停时自动弹出避免闪关再点同一父项 → 收起点面板外 → 关闭打开后忽略 12 帧防止点开即关2. 实现要点ShowDropdown → 父节点 rootCanvas.transform不是只有 48px 高的导航条 → 白底 Outline 子 Canvas(sortingOrder≈500) → 按子项数量定高count * 40 padding → 用按钮左下角屏幕坐标转到 Canvas 本地定位三级ShowSubmenu贴在二级行右侧sortingOrder更高。3. 踩过的坑文档化现象原因处理有 ▼ 但看不到下拉导航根只有栏高DropdownHost 高度≈0导航根全屏透明下拉改挂根 Canvas内容区整页被盖住全屏根用了不透明HeaderBg根 ImageColor.clear底色只在NavBar下拉闪一下消失同帧「点外部关闭」_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全屏壳 透明导航根 ContentHostEleNavMenuChartPageBuilder.BakeAllPages烘焙全部Page_*与 XChartsFitAllChartsUnder纠正 XChartsInit强制的 580×300改回 stretch4. Spawn / Play 做什么禁止兜底创建// ✅ 只实例化 切已有 Page_*PrefabUtility.InstantiatePrefab(demoPrefab);host.CachePagesFromPrefab();host.ShowPage(home);// ❌ 运行时发现没有 ContentHost / Page 就 CreateRect、BuildChart缺 Prefab 时 Spawn弹窗提示先 Generate不在 Spawn 里临时拼整页。5. XCharts 注意Chart 与Image不能同物体都是 Graphic→ 挂在卡片下ChartRootInit在sizeDelta偏小时会写成580×300→EleNavMenuXChartsLayout.FitChartToParent改回拉伸六、与内容区 / Tabs 的职责划分组件管什么NavMenu跨模块导航大分区 下拉Tabs模块内多视图Table.showTabs同一张表的数据筛选不是全局导航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当前叶子与路径DemoHost.ShowPage(code)只切换已烘焙页DemoHost.CachePagesFromPrefab()收集Page_*八、落地检查清单Generate 后存在EleNavMenuDemo.prefab且ContentHost下有多个Page_*Spawn 后能看到首页四宫格顶栏未盖住内容一级项间距正常悬停 / 选中高亮父项有明显▼点击弹出白底子菜单Console 有打开下拉日志点「用户管理」等子项内容切换正确未改过Assets/XCharts源码改菜单配置后重新Generate不要依赖 Play 时自动拼页九、小结EleNavMenu 透明全屏根 不透明NavBar 挂根 Canvas 的下拉maxDepth/itemSpacing/ Logo配置驱动父项 默认叶子页 点击展开子菜单内容在子项Page_*Demo页面与图表 Editor 烘焙运行时只切显隐XCharts只作适配调用图表 stretch 适配分辨率系列回顾与下篇篇内容04Table 下选中、列显示、工具栏与弹窗05Tabs图标、下划线、内容面板06NavMenu13 级、默认页、下拉、XCharts Demo本文07ContextMenu 右键菜单挂载目标、ShowAt、danger / divider / 子菜单以及点外部关闭与 NavMenu 下拉的异同。若你在 UGUI 里也遇到过「全屏导航根盖住内容」或「下拉挂在 48px 高的父节点里」欢迎留言——透明根 下拉挂根 Canvas就是为此准备的。