【Unity UI 进阶】仿 Element UI 打造企业级 Unity UI 组件库09环境与工具说明项说明代码生成本系列组件库代码由CursorAI 编程助手辅助生成与迭代再结合工程内联调、重构落地Unity 版本2022.3.50f1c1Unity 2022.3 LTSUI 框架UGUIUnityEngine.UI示例工程EleUnityUI仿 Element UI 企业级组件库建议使用Unity 2022.3 LTS同系列版本打开工程。本文实现均在2022.3.50f1c1下验证。上篇08讲完EleTree本篇是纵向分区常见的EleAccordion手风琴以及它和EleTabs的选用边界。Accordion 手风琴accordionMode互斥展开、Panel_{code}内容区、与 Tabs 选用边界后台表单、设置页、详情侧栏经常要「一块标题点开才露出内容」。Element 的 Collapse / Accordion 心智是纵向叠放多项上下排列不占横向标签栏可折叠标题栏始终可见内容按需展开手风琴模式accordion为 true 时同时只展开一项互斥内容可挂载每项有独立面板业务往里面塞表单 / 表格 / 说明EleAccordion按同一模型实现配置驱动生成Item_{code}内容固定落在Panel_{code}accordionMode控制互斥。本篇覆盖accordionMode互斥展开开 / 关行为差异Panel_{code}内容区与GetPanel和 Tabs 的选用边界何时用手风琴、何时用标签页Prefab Generate 约定涉及文件能力主要文件运行时Runtime/Accordion/EleAccordion.cs配置模型Runtime/Accordion/EleAccordionModels.csConfig 资产Runtime/Accordion/EleAccordionConfigAsset.cs示例生成Editor/Accordion/EleAccordionSampleGenerator.cs对比组件Runtime/Tabs/EleTabs.cs见博文 05颜色走设计变量面板PanelBg标题栏HeaderBg/ 展开态Fill悬停RowHover分割线BorderLighter文字TextPrimary/TextSecondary。工程约定不改第三方插件新增 C# 写中文注释Generate 烘焙AccordionRoot壳运行时缺壳只打日志不「缺啥建啥」。一、整体结构1. Prefab 层级EleAccordionSample └── AccordionRoot ← 竖排容器Generate 烘焙 ├── Item_basic │ ├── Header ← 标题栏Button Title ▸/▾ │ ├── BodyHost ← 展开时显示 │ │ └── Panel_basic ← ★ 业务内容挂这里 │ └── Hairline ├── Item_advanced │ └── … / Panel_advanced └── Item_perm └── … / Panel_perm2. 数据流EleAccordionConfig.items → Rebuild → Item_{code} Panel_{code} → 点 Header → TogglePanel(code) → accordionMode 即将展开 CollapseOthers → SetPanelExpanded → BodyHost 显隐 箭头 OnPanelToggled业务最小接入acc.OnPanelToggled(code,expanded){Debug.Log(${code}{(expanded?展开:折叠)});};// 往内容区挂控件varpanelacc.GetPanel(basic);// panel 下自行 Create / Instantiate 表单 …二、配置模型1. 单项EleAccordionItemConfig字段含义title标题栏文案code唯一编码 →Item_{code}/Panel_{code}contentHintGenerate 时 Placeholder 提示可删expanded初始是否展开2. 整体EleAccordionConfig字段默认含义accordionModetrue手风琴同时只展开一项headerHeight40标题栏高度contentMinHeight96示例内容区最小高度themeElementLight主题items—折叠项列表示例预设CreateSample()titlecode初态基本信息basic展开高级设置advanced折叠权限配置perm折叠3. 资源路径资源路径ConfigResources/Accordion/EleAccordionSampleConfig.assetPrefabPrefabs/Accordion/EleAccordionSample.prefab三、accordionMode互斥展开1. 行为对照accordionMode点开一项时适用场景true手风琴自动收起其它已展开项设置分组、侧栏区块、节省纵向空间false其它项保持原样可多开对照阅读、需要同时看两块内容2. 实现要点publicvoidTogglePanel(stringcode,boolnotifytrue){boolnext!currentExpanded;if(config.accordionModenext)CollapseOthers(code);// 先关其它SetPanelExpanded(code,next,notify);}publicvoidExpandPanel(stringcode,boolnotifytrue){if(config.accordionMode)CollapseOthers(code);SetPanelExpanded(code,true,notify);}Rebuild()结束时若开启手风琴会EnforceSingleExpanded配置里若误标多项expandedtrue只保留第一项展开。3. 运行时切换模式acc.SetAccordionMode(true,enforceNow:true);// 开互斥并立刻收起多余项acc.SetAccordionMode(false,enforceNow:false);// 允许多开Inspector 快捷按钮手风琴开 / 关。四、Panel_{code}内容区1. 命名约定Item_{code} └── BodyHost ← 只负责显隐折叠时 SetActive false └── Panel_{code} ← 内容根GetPanel(code) 返回它不要把业务控件直接挂在BodyHost外、或改名Panel_*否则GetPanel/ 重建重绑会对不上。Generate 会在面板上放一个PlaceholderTMP布置真实 UI 时可删掉。2. 重建时保留子内容Rebuild/RebindItem若发现已有Panel_{code}只 Stretch 与重绑 Header不销毁子物体——和 Tabs 的Panel_{tabCode}策略一致。你可以在 Prefab 里先摆好表单再改 Config 标题重建后内容还在。3. APIvarpanelacc.GetPanel(advanced);acc.ExpandPanel(advanced);acc.CollapsePanel(basic);acc.CollapseAll();boolopenacc.IsExpanded(perm);五、和 Tabs 的选用边界两者都是「多块内容一次看一块或几块」但交互轴向不同。维度EleAccordionEleTabs布局纵向叠放标题内容横向标签栏 下方整页内容同时可见手风琴下通常 1 块可关互斥后多块始终只有 1 个Panel_*显示标题是否常显所有标题栏一直在视口里可扫只有当前 Tab 名内容区典型场景长表单分组、设置分类、FAQ、侧栏属性页面级分区、同级功能模块切换内容面板Item_*/BodyHost/Panel_{code}ContentHost/Panel_{tabCode}状态隐喻「折叠 / 展开」「当前页」怎么选经验法则内容是「同一页里的分组希望扫标题再深入」 → Accordion可再开 accordionMode 省高度 内容是「同级页面 / 模块互斥且整区切换」 → Tabs 还要和 Table 顶部筛选页签区分那是表内过滤不是独立 EleTabs → 见博文 05反例把三个完全无关的大页面塞进 Accordion用户要滚很远才能点到第三个标题 → 更适合 Tabs。反例把「基本信息 / 高级 / 权限」做成 Tabs用户无法一眼看到还有哪些分组 → 更适合 Accordion。六、Prefab 生成与菜单1. 菜单EleUnityUI → Samples → Accordion → Generate EleAccordion Sample EleUnityUI → Samples → Accordion → Spawn EleAccordion Preview In Scene EleUnityUI → Samples → Accordion → Reset EleAccordion Config To Preset GameObject → EleUnityUI → Accordion → SampleSpawn不会在缺 Prefab 时自动 Generate只提示先 Generate与 Tree 约定一致。2. Generate 烘焙什么根ImagePanelBg 圆角描边AccordionRoot竖排壳序列化到组件按 ConfigRebuild出Item_*/Header/BodyHost/Panel_*3. 运行时约定// ✅ 壳已烘焙Rebuild 重绑或补 Item保留已有 Panel 子内容acc.Rebuild();// ❌ 发现没有 AccordionRoot 就 CreateRect 整棵拼装缺壳Debug.LogError([EleAccordion] 缺少 AccordionRoot请重新 Generate Prefab)并 return。七、API 一览API / 事件说明SetConfig(config, rebuild)换配置并重建Rebuild()/EditorRebuild()重建项 UISetAccordionMode(enabled, enforceNow)切换互斥模式TogglePanel(code)翻转展开互斥时关其它ExpandPanel/CollapsePanel/CollapseAll显式展开/折叠SetPanelExpanded(code, expanded)设单态不自动互斥GetPanel(code)取Panel_{code}IsExpanded(code)是否展开OnPanelToggled(code, expanded)AccordionMode当前是否互斥八、落地检查清单Generate 后有EleAccordionSample.prefab层级含AccordionRoot与Panel_basic等Spawn 后「基本信息」默认展开另两项折叠accordionModetrue点开「高级设置」时「基本信息」自动收起Inspector「手风琴关」后可同时展开多项GetPanel(basic)非空在 Panel 下加子物体后 Rebuild子物体仍在缺 Prefab 时 Spawn 只提示不自动拼装九、小结EleAccordion 烘焙AccordionRoot Config 驱动折叠项accordionMode决定互斥还是多开ExpandPanel/TogglePanel入口统一处理内容只认Panel_{code}用GetPanel接入业务 UI重建不拆子树vs Tabs纵向可扫分组用 Accordion横向整页切换用 Tabs系列回顾与下篇篇内容05Tabs图标、下划线、Panel_{tabCode}07ContextMenu挂载、ShowAt、danger / divider08Tree缩进、展开线、选中、节点右键09Accordion手风琴、Panel_{code}、与 Tabs 边界本文10Dialog 对话框模态遮罩、表单字段、确认/取消与 Table 行编辑弹窗的复用关系。若你也在 UGUI 里纠结「设置页要用折叠还是标签」先问一句用户要不要同时看见所有分组标题要 → Accordion只要当前模块整页 → Tabs。