1. 为什么需要动态可折叠的层级式UI列表在游戏开发中我们经常会遇到需要展示复杂层级结构的场景。比如技能树系统一个角色可能有多个技能分支每个分支下又有多个子技能再比如背包系统物品可以按照武器、防具、消耗品等大类分类每个大类下又有更细分的子类。传统的平面列表很难清晰展示这种层级关系。我最近在开发一个RPG游戏时就遇到了这个问题。最初尝试用普通列表展示任务系统结果玩家反馈根本找不到自己想要的任务。后来改用了可折叠的层级式UI任务按照地区、类型自动分组玩家可以自由展开或收起不同分类体验立刻提升了好几个档次。这种UI的核心优势在于空间利用率高折叠状态下只显示父级项节省屏幕空间信息层级清晰通过缩进直观展示父子关系交互自然用户可以按需展开特定分支避免信息过载扩展性强理论上支持无限级嵌套适应各种复杂场景2. 核心组件与工作原理2.1 三大UGUI组件的黄金组合实现这种效果主要依赖三个UGUI组件ScrollRect提供滚动视图容器VerticalLayoutGroup自动垂直排列子物体ContentSizeFitter动态调整内容区域大小我第一次尝试时只用了ScrollRect和VerticalLayoutGroup结果发现展开子项时内容区域不会自动扩展导致子项显示不全。后来加上ContentSizeFitter才解决了这个问题。2.2 动态高度计算的关键最棘手的部分是处理展开/折叠时的高度变化。每个父项需要记录自身原始高度所有子项的总高度包括孙子项等后代当前展开状态当点击展开按钮时需要计算要显示/隐藏的高度差调整父项自身的高度通知所有上级父项更新它们的总高度刷新布局确保所有元素正确对齐3. 从零开始实现3.1 基础场景搭建首先创建一个标准的ScrollView新建Canvas添加ScrollRect组件删除水平滚动条只保留垂直滚动给Content物体添加VerticalLayoutGroup设置合适的Padding和SpacingContentSizeFitterVerticalFit设为PreferredSize这里有个小技巧VerticalLayoutGroup的Child Force Expand最好关闭Width这样子项不会强制拉伸宽度更适合层级式布局。3.2 创建可复用的层级项预制体每个层级项需要包含背景Image用于点击反馈文本Label显示项名称展开/折叠图标通常使用箭头符号子项容器空的GameObject用于存放子项关键设置子项容器需要添加ContentSizeFitter和VerticalLayoutGroup使用Anchor Presets确保元素正确对齐给折叠按钮添加Toggle组件方便状态管理我建议使用一个Prefab适配所有层级通过代码控制缩进量而不是为每个层级创建不同Prefab。4. 核心逻辑实现4.1 数据结构设计首先定义层级枚举public enum ItemLevel { Root 0, First 1, Second 2, Third 3, // 可以继续扩展 }然后创建层级项类public class HierarchyItem : MonoBehaviour { public Text titleText; public RectTransform rectTransform; public ContentSizeFitter childContainer; public Button toggleButton; [HideInInspector] public ItemLevel level; [HideInInspector] public HierarchyItem parent; [HideInInspector] public ListHierarchyItem children new ListHierarchyItem(); [HideInInspector] public float baseHeight; [HideInInspector] public float totalChildrenHeight; [HideInInspector] public bool isExpanded; }4.2 动态生成层级结构读取数据并生成UI项的典型流程解析原始数据可以是JSON、ScriptableObject等递归遍历数据树为每个节点实例化Prefab设置层级关系和基本属性初始状态设为折叠void GenerateUIItems(Transform parent, DataNode dataNode, ItemLevel currentLevel) { var newItem Instantiate(itemPrefab, parent); var itemComp newItem.GetComponentHierarchyItem(); itemComp.level currentLevel; itemComp.titleText.text dataNode.name; itemComp.baseHeight itemComp.rectTransform.rect.height; // 递归处理子项 foreach(var child in dataNode.children) { GenerateUIItems(itemComp.childContainer.transform, child, currentLevel 1); } }4.3 展开/折叠的实现这是最复杂的部分需要处理自身高度变化子项显隐状态父项高度更新布局刷新public void ToggleExpand() { isExpanded !isExpanded; // 处理子项显隐 childContainer.gameObject.SetActive(isExpanded); // 计算高度变化 float heightChange isExpanded ? totalChildrenHeight : -totalChildrenHeight; // 更新自身高度 rectTransform.sizeDelta new Vector2( rectTransform.sizeDelta.x, baseHeight (isExpanded ? totalChildrenHeight : 0) ); // 通知父项更新 if(parent ! null) { parent.UpdateChildrenHeight(heightChange); } // 强制刷新布局 StartCoroutine(ForceLayoutUpdate()); } IEnumerator ForceLayoutUpdate() { // 这个技巧可以解决ContentSizeFitter的刷新问题 childContainer.enabled false; yield return null; childContainer.enabled true; }5. 高级优化技巧5.1 性能优化方案当层级很深或项很多时可能会遇到性能问题。我总结了几种优化方法对象池技术回收不可见的项减少实例化开销虚拟化列表只渲染可见区域内的项异步加载大数据集分帧处理动画优化使用CanvasGroup代替SetActive5.2 视觉增强技巧让UI更专业的几个细节添加平滑的展开/折叠动画不同层级使用不同缩进和颜色当前选中项高亮显示添加搜索过滤功能记住用户的展开状态5.3 无限级扩展的实现要让系统支持无限级嵌套关键点是使用递归算法处理层级关系动态计算每个项的缩进量确保高度计算包含所有后代为深层级项添加视觉区分我在一个企业级项目管理工具中实现了10级嵌套通过渐变色和图标差异帮助用户区分层级效果相当不错。6. 常见问题与解决方案6.1 ContentSizeFitter刷新问题最让人头疼的就是ContentSizeFitter的延迟刷新问题。经过多次尝试我发现最可靠的解决方案是IEnumerator FixLayoutRefresh(RectTransform target) { LayoutRebuilder.ForceRebuildLayoutImmediate(target); yield return null; LayoutRebuilder.ForceRebuildLayoutImmediate(target); }6.2 滚动位置错乱展开深层级项时有时会导致滚动位置跳动。解决方法在修改布局前记录当前滚动位置完成修改后恢复滚动位置使用ScrollRect的normalizedPosition精确控制6.3 点击事件冲突当项内部有多个可点击元素时容易出现事件冲突。我的处理方案使用Unity的EventSystem管理点击优先级为不同元素设置不同的Raycast Target添加点击延迟判断防止误触7. 实际应用案例7.1 游戏技能树系统在一个卡牌游戏中我使用这个技术实现了技能树每个英雄有3个技能分支每个分支下有5层技能技能之间有前置依赖关系玩家可以自由浏览不同分支通过可折叠设计玩家可以专注于当前感兴趣的技能路线不会被其他分支干扰。7.2 商城分类系统另一个案例是手游商城商品按类型、稀有度、价格等多维度分类支持多级嵌套筛选记住用户上次的展开状态搜索时自动展开匹配项这个实现使商城浏览效率提升了60%用户反馈非常好。7.3 设置菜单优化传统的平面设置菜单往往很长我将其改造为设置项按功能分组常用设置默认展开高级设置默认折叠支持快速搜索改造后90%的常用设置可以在首屏找到大大提升了用户体验。