在 Axure 设计中，树组件是展示层级结构数据的关键 UI 组件，广泛应用于文件管理、导航菜单和数据分类等场景。本篇文章将详细解析如何在 Axure 中构建一个实用的无限级导航菜单，帮助你高效管理和浏览多级数据，让交互更直观、操作更便捷。

树组件是一种用于展示层级结构数据的UI组件，通过父子节点的嵌套关系直观呈现数据层次（如文件目录、组织架构等）。它支持节点的展开/折叠、选择、编辑等交互操作，通常具有清晰的视觉连接线和状态标识，能够高效管理和浏览多级数据，广泛应用于文件管理、导航菜单、数据分类等场景，是处理复杂结构化数据的理想界面解决方案。

那么，现在我来教你在Axure里做一个实用的树组件。

演示地址：

https://dtcagw.axshare.com/#id=zqplmg&g=1

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

教程

首先先来看一下元件结构：

是不是非常简洁？

元件说明：

矩形bg：为了实现鼠标悬停，选中等效果，样式自己加。

动态面板check：图标换成自己的。

• （组合）：方便控制层级缩进
• （动态面板）：“触发内部元件鼠标交互样式”打勾

中继器数据如下(因特殊原因，woshipm只能上传图片)：

字段说明：

• id：唯一标识符
• text：显示文本
• path：路径层级信息（斜杠分隔）
• level：层级
• order：排序序号
• expand：是否展开（t-是，f-否）
• check：选中状态（i-部分选中，c-选中，u-未选中）
• leaf：是否为叶子节点（t-是，f-否）
• hide：是否隐藏（t-是，f-否）

字段解释：

• 虽然通过path可以直接算出level，为了方便折叠和展开，把level独立为一列。
• 排序order字段可以写小数，比如想在3和4之间加一行，那order可以写3.14。
• path使用斜杠分隔，在扩展时无需新增额外列，还可以更好地判断层级关系。

中继器交互如下：

动态面板check的交互如下：

此时，一个可以展开折叠的多级菜单就完成了。

为了操作友好，还可以在动态面板上加交互：

结语

一个无限层级的树结构非常容易实现， 适用于 任何具有层级关系的数据，能够有效提升信息的组织性和可操作性。无论是文件管理、导航菜单、组织结构，还是分类目录，树形结构都能提供直观、高效的交互方式。