切换开关 | Toggle Switch

在本教程中,你将学习如何制作一个切换开关,当打开或关闭开关时会改变颜色。【原型预览】

1、元件设置

创建切换开关的关闭状态

  1. 打开一个新的RP文件,在画布中打开Page 1
  2. 拖拽一个矩形3元件到画布中,设置它的宽和高分别为50和20,在样式面板中,设置它的圆角半径为25。
  3. 然后,拖拽一个圆形元件到画布中,并将它的宽和高都设置为30。
  4. 将圆形元件放在矩形元件上面,然后使用顶部工具栏中的对齐选项将它们左侧和中部对齐。这组元件将作为切换开关的“关闭”状态。

创建切换开关的开启状态

  1. 选中这两个元件,复制并将它们的副本粘贴在画布上。
  2. 设置副本的圆形元件的填充色为蓝色,并将它和矩形元件的右侧对齐。这组元件将作为切换开关的“开启”状态。
2、将这些元件放入包含两个状态的动态面板中
  1. 选中代表“关闭”的那组元件,然后在软件上点击鼠标右键,在弹出的右键菜单中选择转换为动态面板
  2. 概要面板中,将鼠标悬停在动态面板元件项目上,点击右侧出现的添加状态图标。
  3. 仍然在概要面板中,选中代表“开启”状态的圆形和矩形元件,将它们拖到State 2下面。这样就可以将它们放入动态面板状态中并且在画布中打开状态编辑模式。
  4. 在画布中,将代表“开启”状态的圆形和矩形元件移动到坐标(0,0)的位置。
  5. 点击画布右上角的关闭或按ESC键退出状态编辑模式。
3、当点击动态面板时切换到下一个状态
  1. 选中动态面板元件,点击交互面板中的新建交互
  2. 在弹出的列表中选择单击时事件,然后选择设置面板状态动作。
  3. 目标下拉列表中选择当前元件。    
  4. STATE下拉列表中选择下一项,然后选中向后循环的复选框。这样就可以使动态面板到达最后一个状态后再回到第一个状态。
  5. 点击确定按钮保存操作。
4、预览交互

预览页面,点击切换开关将它开启或关闭。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注