【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。
企业数字化 ERP 产品动态
相关推荐
AgentScope实战：Java后端多Agent编排与RAG服务化落地指南 搞Java后端的这几年，我一直在等一个能真正拿进生产环境的多Agent编排框架。市面上大多数AI Agent方案要么绑定特定云厂商，要么是Python独享，要么编排能力弱到只能做单轮问答。直到我上手了AgentScope，才觉得这条路终于通了——它把… · 2026/9/26 19:23:18
用Cloudflare Worker实现验证码邮件发送 上一期我们聊了热土引擎邮件代发的优缺点——省去自建 SMTP 转发的麻烦，但模板一旦创建就不能在运行时修改内容，只能靠占位符做变量替换。今天我们从 Cloudflare Worker 开发者的视角，把“发送一封验证码邮件”这件事从头到尾跑通。
第一步&… · 2026/9/26 19:23:12
FreeRTOS Queue 深度解析：看懂“数据中转站”背后的内存、阻塞与调度机制 在 FreeRTOS 中，Queue（队列）是最常用的任务间通信机制之一。
很多工程师知道它可以用来“传数据”，也会使用 xQueueSend()、xQueueReceive()，但如果进一步追问：
队列到底存在哪里？发送数据时究竟发生了什么？为什么发送方修改原变量后，队列里的数据不会变化？队列满了… · 2026/9/26 19:23:03
Burp Suite内置浏览器启动失败排查与修复指南 1. 问题现象与背景拆解1.1 这个报错到底长什么样Burp Suite 从 2023 版本开始把内置浏览器（Embedded Browser）作为默认的抓包入口，到了 2026.8 这个版本，内置浏览器底层用的是 Chromium 内核。很多人升级完之后，点那个… · 2026/9/26 20:01:29
多模态AI技术原理与工程落地实践 我无法基于当前输入生成符合要求的博文内容。原因如下：输入中缺失关键信息：项目标题虽已提供，但【项目正文】、【关键词】、【摘要描述】三项均为完全空白（仅显示空行或占位符），而根据任务定义，… · 2026/9/26 20:01:22
Burp Suite 2026.8 内置浏览器启动失败排查与修复指南 1. 问题现象与背景拆解1.1 这个报错到底长什么样Burp Suite 从 2023 版本开始，官方逐步把内置浏览器（Embedded Browser）作为默认的抓包入口，取代了早年"手动配置代理 外部浏览器"的老路子。到了 2026.8 这个版本&#… · 2026/9/26 20:01:22
轻量级Transformer单轮对话机器人实战指南 简介：这是一份面向人工智能初学者与课程设计者的Transformer单轮对话机器人实战项目，涵盖从模型训练到推理部署的完整技术链路，适用于本科毕设、课设及NLP入门实践。资源包含22个文件，以5个核心Python脚本（如chat.py、… · 2026/9/26 20:01:16
Python：生成器表达式 生成器表达式是编程语言里提供的一种简洁语法, 这种语法的作用是用来按需生成数据。它可以把遍历操作、条件筛选操作以及元素转换操作全部都写在一个表达式里面。但是, 它不会立即创建全部结果并把这些结果保存到内存里去。相反, 它是在进行迭代的过程当中一个一个地产生这些元… · 2026/9/26 20:01:09
数据库课后习题答案别硬背：当测试用例集刷，效率翻倍 简介：万常选版《数据库原理与设计》课后习题答案资源，覆盖第2至6章及第9章，适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件，含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21
OpenClaw 替代品？Hermes Agent 踩坑实录：macOS 飞书接入 TaoToken 配置 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40
向下兼容与向上兼容：接口设计中的兼容性策略与工程实践 一次版本升级事故，是很多团队绕不过去的坎。线上环境里，服务端明明已经上线了新版接口，老的移动端还在照着旧文档传参数。请求一到网关，校验直接拒绝，用户操作失败，客服群炸了锅，开发群里开始互… · 2026/9/26 0:00:46
