切换开关 | Toggle Switch

为移动端界面制作两种切换开关。

如果你还没有练习文件，请下载AxureMobile练习文件.rp并在Axure RP中打开它，该文件包含了Axure移动端教程中对应的每个页面。

在移动端练习文件中打开“切换开关”页面，在画布上有两个切换开关，“切换开关1”动态面板和“切换开关2”组合。

“切换开关1”动态面板有两个状态，一个“关”状态和一个“开”状态，每个状态都包含一个名为“手柄”的椭圆形元件（一个处于“关”位置，一个处于“开”位置），位于“背景”矩形框上面（你可以在概要窗格中，将鼠标悬停在状态名称上，来查看每个状态的样子）。

我们将在这两个状态之间来回切换，以模拟切换开关的效果。

在画布上选中“切换开关1”动态面板，在检视窗口中的属性页签下，双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中，点击左侧“配置动作”栏中的“设置面板状态”，在右侧“配置动作”栏中，选择“当前元件”。

在右侧“配置动作”栏的底部，设置“选择状态”的选项为“Next”，然后勾选“向后循环”的复选框，这样可以使动态面板达到最后一个状态后，再回到第一个状态。

点击“确定”按钮关闭用例编辑器。

预览原型，点击第一个切换开关来切换它的开关状态。

（备注：如果你想在“设备框架”页面提供的设备框架中预览页面，打开“设备框架”页面，双击“内容框架”，然后在弹出的对话框中选择“切换开关”。）

“切换开关2”元件组合包含两个元件，一个“手柄”椭圆形元件和一个“背景”矩形元件，“手柄”椭圆形元件设置了“选中”的交互样式。（如果你之前没有使用过交互样式，可以查看我们的交互按钮教程来学习。）

我们将通过左右移动“手柄”椭圆形元件，并切换其选中状态来模拟切换开关。

在画布上选中“切换开关2”组合，在检视窗格中的属性页签下，双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器的顶部，点击“添加条件”按钮来打开条件设立窗口。

在第一个下拉列表中选择“选中状态”，然后将第二个下拉列表中的“==”改为“!=”，其他的字段保持不变，当组合处于未选中状态时，该条件成立。

点击“确定”按钮关闭条件设立窗口。

在用例编辑器中，点击左侧“添加动作”栏中的“选中”（位于“设置选中”下面），在右侧“配置动作”栏中选择“当前元件”，以这种方式将组合设置为选中状态，同时也将组合中的元件设置为选中状态。

在用例编辑器左侧“添加动作”栏中点击“移动”，在右侧“配置动作”栏，选择“切换开关2”组合下的“手柄”椭圆形元件。

在右侧“配置动作”栏的底部，在“x”后面的文本框中输入“20”（这样可以将元件向右移动20个像素），在动画的下拉列表中选择“摇摆”，然后在“时间”后面的文本框中输入“250”。

点击“确定”按钮关闭用例编辑器。

在“切换开关2”被选中的状体下，在检视窗格中的属性页签下双击“鼠标单击时”来添加第二个鼠标单击时用例。

在用例编辑器中，点击左侧“添加动作”栏中的“取消选中”（位于“设置选中”下面），在右侧“配置动作”栏中选择“当前元件”。

回到左侧“添加动作”栏，点击“移动”，在右侧“配置动作”栏中，选择“切换开关2”组合下的“手柄”椭圆形元件。

在右侧“配置动作”栏的底部，在“x”后面的文本框中输入“-20”（这样可将元件向左移动20个像素），在“动画”下拉列表中选择“摇摆”。（注意“时间”字段的值同样是250，就和我们在上一个“移动”动作下设置的一样。）

点击“确定”按钮关闭用例编辑器。

（备注：注意，即使我们没有为当前这个用例设置条件，它也会显示条件“Else If True”，如果第一个用例没有触发，那么就会触发当前这个用例，也就是当“切换开关2”处于选中状态时，触发该用例。）

预览原型，点击第二个切换开关来切换它的开关状态。