原型设计工具Axure RP入门教程（八）：在下一页教程中设置动态面板状态

---

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP

---

在本教程中，您将学习如何使用全局变量基于原型上一页的选择来设置动态面板的状态。

小部件和页面设置

第1页–选择表格

• 画一个新的RP文件，然后在画布上打开Page 1。
• 将一个下拉列表小部件和一个按钮小部件从库窗格拖到画布上。
• 将按钮的文本设置为下一页。
• 双击下拉列表以编辑其选项。
• 在出现的对话框中，单击添加三次以创建三个新选项。 成为一个红色，一个黄色和一个蓝色。

第2页–动态面板

• 在项目中添加一个新页面，并在画布上打开它。
• 将三个矩形小部件拖到画布上。给一个红色填充颜色，给一个黄色填充颜色，给一个蓝色填充颜色。
• 右键单击红色矩形，然后在上下文菜单中选择创建动态面板。
• 在大纲窗格中，将动态面板的第一个状态重命名为红色。

注意：动态面板状态名称必须与第1页上的下拉列表小部件中的选项匹配。

• 给动态面板两个新状态。一个命名黄色，另一个命名为蓝色。
• 在大纲窗格中，将黄色矩形小部件拖动到黄色面板状态。然后，将其移动到画布上的（0,0）。对蓝色矩形小部件重复此操作。

创建一个全局变量来存储用户的选择

• 在顶部菜单中，转到项目→全局变量。
• 在全局变量对话框中，单击添加以添加新变量，将其命名为ColorVar。
• 单击确定关闭对话框。

捕获用户的输入并转到下一页

将变量的值设置为下拉列表的选择

• 在画布上打开第1页，然后选择下拉列表小部件。
• 在交互窗格中单击新建交互。
• 在出现的列表中选择选择更改事件，然后选择设置变量值操作。
• 在目标下拉列表中选择ColorVar变量。
• 在设置为下拉列表中，选择的选定选项。
• 在小部件下拉列表中将此保持选中状态，然后单击确定以保存操作。

打开链接到第2页

• 选择按钮小部件，然后在交互窗格中单击Click or Tap→Open Link。
• 在链接到下拉列表中选择第2页，然后单击确定以保存操作。

将动态面板的状态设置为变量的值

• 打开Page 2，然后单击画布上的空白处以选择页面本身。 然后在交互窗格中单击新建交互。
• 在出现的列表中选择页面加载事件，然后选择设置面板状态操作。
• 在目标下拉菜单中选择动态面板。
• 在状态下拉列表中，选择值。然后单击出现的字段旁边的fx图标以打开编辑值对话框。
• 删除对话框上方字段中的文本，然后单击插入变量或函数。
• 在出现的下拉菜单中，选择全局变量标题下的ColorVar。对话框顶部的字段现在应显示为：[[ColorVar]]。（此括号括起来的表达式将在网络浏览器中替换为变量的值。）

注意：我们能够将动态面板的状态设置为下拉列表的选定选项（存储在变量中），因为面板的状态与下拉列表的选项具有相同的名称。

• 单击确定关闭编辑值对话框，然后单击确定保存设置面板状态操作。

预览互动

• 预览页面1并在下拉菜单中选择一种颜色。
• 单击下一页按钮导航到第2页。动态面板应显示您在下拉列表中选择的颜色。

     

---

想要获得Axure RP更多资源、正版授权的伙伴，请咨询了解

关注慧聚IT微信公众号???，了解产品的最新动态及最新资讯。