在本教程中,你将学习如何通过下拉列表中的选项来动态设置元件上的文字。【原型预览】
1、元件设置
- 打开一个新的RP文件,并在画布中打开Page 1。
- 从元件面板中拖拽一个矩形元件和一个下拉列表元件到画布中。
- 设置矩形元件上的文字为“我最喜欢的颜色是红色”。
- 双击下拉列表元件编辑选项,点击对话框顶部的编辑多项,在弹出的窗口中,输入如下的选项,通过换行来分割选项:
红色
橙色
黄色
绿色
蓝色
紫色
- 点击确定按钮关闭编辑多项窗口,再次点击确定按钮关闭编辑下拉列表对话框。
2、当下拉列表选项改变时更改矩形元件上的文字
- 选中下拉列表,点击交互面板中的新建交互。
- 在弹出的列表中选择选项改变时事件,然后选择设置文本动作。
- 在目标下拉列表中选择矩形元件。
- 点击值文本框右侧的fx图标以打开编辑文本对话框。
- 在对话框顶部的区域中,选中句子中的“红色”。
- 点击上面的插入变量或函数,在弹出的下拉列表中,选择元件标题下的text。
这时候对话框顶部的文本区域中显示“我最喜欢的颜色是[[This.text]]”。(在Web浏览器中,括号内的表达式就会被下拉列表当前选中的选项所替代。)
- 点击确定按钮关闭编辑文本对话框,再次点击确定按钮保存设置文本动作。
3、预览交互
预览页面,在下拉列表中选择不同的颜色,矩形元件上的句子则会根据你的选项改变。
附加信息和提示
使用单选按钮赋值
如果你的当前选项是单选按钮而不是下拉列表,你也可以构建与上述教程描述的类似的交互。同样使用设置文本动作,将其添加在单选按钮组中每个按钮的选中时事件中。