当前位置：网站首页 > 创业 > 正文

Axure制作：自制树状图

张子豪 2025-10-11 19:19 1

Axure RP 8自带的“树”功能简单，选项前置的图标只能为固心猿意马的图标，无法实现勾选和打消的结果，所以，本身建造一条目“树”控件很有需要……

结果如下图所示：

东西/原料

Axure RP 8

方式/步调

1
新建2个“箭头”图标，4个复选框和1个动态面板。
别离定名为：
“箭头”图标：open_1
“箭头”图标：close_1
动态面板：kuang1
4个复选框别离定名为：单行输入框、单行输入框_1、单行输入框_2、单行输入框_3
----
此中动态面板尺寸是120*80
复选框尺寸100*16
---
如下图所示：
2
此中,“图标：close_1”是“图标：open_1”扭转270度的样式。
3
按下图摆列各个控件：
1.默认把“图标：close_1”埋没，并把“图标：close_1”和“图标：open_1”重叠在一路
2.”复选框：单行输入框_1、单行输入框_2、单行输入框_3“放入"动态面板"中
3.复选框彼此距离是8
4.组合这些控件下，并定名为A01
4
复制A01组，排版如下图所示，其他两组别离定名为A02和A03
5
调整内容及各个控件的定名，如下图所示：
6
设置”组合：A01“中的各个控件动作：
7
“图标：close_1”的“鼠标单击时”
---
1.显示图标：open_1
2.埋没图标：close_1
3.设置”动态面板：kuang1“尺寸为120*80
4.别离移动”组合：A02“和“组合：A03”的相对位置（0，72）
---
8
“图标：open_1”的“鼠标单击时”
---
1.显示图标：close_1
2.埋没图标：open_1
3.设置“动态面板：kuang1”尺寸为120*0
4.别离移动“组合：A02”和“组合：A03”的相对位置（0，-72）
---
9
“复选框：单行输入框”的“鼠标单击时”
---
设置“动态面板：kuang1”为”选中“状况
---
10
“复选框：单行输入框_1、单行输入框_2、单行输入框_3”的操作都一样，当“打消选中时”
---
设置“复选框：单行输入框“打消”选中“
---
11
设置“组合：A02”中的各个控件动作：
12
“图标：close_2”的“鼠标单击时”
---
1.显示图标：open_2
2.埋没图标：close_2
3.设置”动态面板：kuang2“尺寸为120*80
4.别离移动”组合：A03“的相对位置（0，72）
---
13
“图标：open_2”的“鼠标单击时”
---
1.显示图标：close_2
2.埋没图标：open_2
3.设置“动态面板：kuang2”尺寸为120*0
4.别离移动“组合：A03”的相对位置（0，-72）
---
14
“复选框：多行输入框”的“鼠标单击时”
---
设置“动态面板：kuang2”为”选中“状况
---
15
“复选框：多行输入框_1、多行输入框_2、多行输入框_3”的操作都一样，当“打消选中时”
---
设置“复选框：多行输入框“打消”选中“
---
16
设置”组合：A03“中的各个控件动作：
17
“图标：close_3”的“鼠标单击时”
---
1.显示图标：open_3
2.埋没图标：close_3
3.设置”动态面板：kuang3“尺寸为120*80
---
18
“图标：open_3”的“鼠标单击时”
---
1.显示图标：close_3
2.埋没图标：open_3
3.设置“动态面板：kuang3”尺寸为120*0
---
19
“复选框：单选框”的“鼠标单击时”
---
设置“动态面板：kuang3”为”选中“状况
---
20
“复选框：单选框_1、单选框_2、单选框_3”的操作都一样，当“打消选中时”
---
设置“复选框：单选框“打消”选中“
---
21
这些设置好后，就可以看下结果了……
更多的树状目次，无非就是这些操作的叠加……
22
感觉不错，对你有帮忙的话，请投个票，加个赞哦~