原型设计工具Axure RP入门教程（四）：动态设置Droplist选项教程

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

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

在本教程中，您将学习如何根据第一个下拉列表中的选择显示第二个下拉列表中的不同选项。

注意：无法在单个Droplist窗口小部件中动态更改选项，因此此技术涉及创建第二个Droplist的多个版本，并使用多状态动态面板在它们之间进行切换。

小部件设置

创建三个Droplist小部件

• 打开一个新的RP文件，然后在画布上打开Page 1。
• 将三个下拉列表小部件拖到画布上。命名一个下拉列表 Food Select，一个Hamburger，然后命名一个Hotdog。

主要Droplist的选项

• 双击Food Select 下拉列表以编辑其选项。
• 在出现的对话框中，单击两次Add以创建两个新选项。做第一个Hamburger和第二个Hotdog。
• 单击OK关闭对话框。

次要下拉列表的选项

• 给Hamburger下拉列表两个选项：Cheese 和 No Cheese。
• 给Hotdog下拉列表两个选项：Ketchup 和 Mustard， 和 Horseradish 和 Sauerkraut.。

将辅助下拉列表放置在两个状态的动态面板中

• 右键单击Hamburger下拉列表，然后在上下文菜单中选择Create Dynamic Panel（创建动态面板）。
• 在Outline（大纲）窗格中，将新动态面板的第一个状态命名为Hamburger。
• 仍在Outline（大纲）窗格中，将光标悬停在动态面板小部件上，然后单击右侧的Add State（添加状态）图标。 将此新状态命名为Hotdog。
• 仍在Outline（大纲）窗格中，选择Hotdog下拉列表并将其拖动到右侧以使其在Hotdog动态面板状态下缩进。这会将其添加到该状态并在画布上打开该状态。
• 将Hotdog下拉列表移到画布上的（0,0）。
• 单击画布右上方的关闭，或按ESC退出状态编辑模式。

当主下拉列表的选择更改时，更改动态面板的状态

• 选择Food Select下拉列表小部件，然后在交互窗格中单击New Interaction（新建交互）。
• 在出现的列表中选择Selected Changed事件，然后选择Set Panel State操作。
• 在目标下拉菜单中选择动态面板。
• 在状态下拉列表中，选择值。 然后单击出现的字段旁边的fx图标以打开Edit Value （编辑值）对话框。
• 删除对话框上方字段中的文本，然后单击Insert Variable or Function（插入变量或函数）。
• 在出现的下拉列表中，在小部件标题下选择文本。 对话框的上方字段现在应显示为[[This.text]]，它代表下拉列表当前显示的选择。

注意：可以将动态面板的状态设置为Food Select下拉列表的选定选项，因为面板的状态与下拉列表的选项名称相同。

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

• 预览页面。 默认情况下，在第一个下拉列表中选择Hamburger，第二个下拉列表显示相关的浇头。
• 单击第一个下拉列表，然后选择Hotdog，第二个下拉列表中的选项应更改。

附加信息和提示

添加更多选项

使用此技术，您可以根据需要向主下拉列表添加尽可能多的选项。只需在动态面板中添加更多状态，然后为每个状态添加一个包含所需选项的下拉列表即可。确保将新的动态面板状态命名为与主下拉列表中的新选项相同。

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