跨页设置动态面板状态 | Set Dynamic State on Next Page

在本教程中，你将学习如何使用全局变量，通过上一页面所做的选择来改变当前页面动态面板的状态。【原型预览】

1、元件和页面设置

Page 1-选择框

1. 打开一个新的RP文件，并在画布中打开Page 1。
2. 从元件面板中拖拽一个下拉列表元件到画布中。
3. 设置按钮名称为“下一页”。
4. 双击下拉列表元件来编辑它的选项。
5. 在弹出的对话框中，点击三次添加来给下拉列表添加三个选项，分别为“红”、“黄”、“蓝”。

Page 2-动态面板

1. 添加一个新页面到项目中，并将其在画布中打开。
2. 拖拽三个矩形元件到画布中，分别用红色、黄色、蓝色进行填充。
3. 在红色的矩形框上点击鼠标右键，选择转换为动态面板。
4. 在概要面板中，将动态面板的第一个状态命名为“红”。

注意：动态面板的状态名称必须和Page 1中下拉列表的选项名称一致。

1. 给动态面板添加两个新的状态，分别命名为“黄”和“蓝”。
2. 在概要面板中，将黄色矩形元件拖放到动态面板的黄状态下，并设置它的坐标为(0,0)，同样的对蓝色矩形元件重复以上操作。

2、创建一个全局变量来存储用户的选项

1. 在顶部菜单中，打开项目>全局变量设置。
2. 在全局变量对话框中，点击添加新增一个全局变量，命名为“ColorVar”。
3. 点击确定按钮关闭对话框。

3、捕捉用户的输入并跳转到下一页面

将下拉列表的选项赋值给全局变量

1. 在画布中打开Page 1，选择下拉列表元件。
2. 点击交互面板中的新建交互。
3. 在弹出的列表中选择选项改变时事件，然后选择设置变量值。
4. 在目标下拉列表中选择ColorVar。
5. 在设置为下拉列表中选择被选项。
6. 保留元件下拉列表的当前选项，点击确定按钮保存操作。

链接到Page 2

1. 选中按钮元件，点击交互面板中的单击时，打开链接。
2. 在链接到下拉列表中选择Page 2，然后点击确定按钮保存操作。

4、根据变量值设置动态面板状态

1. 打开Page 2，在画布中点击空白处以选中页面本身，然后点击交互面板中的新建交互。
2. 在弹出的列表中选择页面载入时事件，然后选择设置面板状态动作。
3. 在目标下拉列表中选择动态面板。
4. 在STATE下拉列表中选择值，然后点击出现的fx图标以打开编辑值对话框。
5. 删除对话框顶部文本框中的内容，然后点击插入变量或函数。
6. 在弹出的下拉列表中，选择全局变量下的ColorVar，这时候对话框顶部的文本框中将会显示：[[ColorVar]]。（在Web浏览器中，这个表达式则会被变量值所替代。）

注意：之所以我们能够通过存储在变量中的下拉列表的选项来设置动态面板的状态，是因为动态面板的状态名称和下拉列表的选项名称一致。

1. 点击确定按钮关闭编辑值对话框，然后点击确定按钮保存设置面板状态动作。

5、预览交互

1. 预览Page 1，然后在下拉列表中选择一个颜色。
2. 点击下一页按钮跳转到Page 2，这时候动态面板会显示你刚才在下拉列表中选择的颜色。