制作交互式开关，先准备“关”和“开”两个组件变体，再分别添加单击切换到另一状态的事件，最后把组件实例放进画板演示。只连接一个方向，开关通常只能切换一次；组件变体负责外观状态，交互事件负责从一个状态切到另一个状态。
在交互原型设计中，这类组件适合演示开关、复选状态或按钮反馈。先把一个开关的往返切换做好，再决定是否要把周围内容也纳入同一个组件。
下面以 WeUI 浅色组件库中的开关为例，分六步制作。若工作区没有启用该库，也可以先画出灰色关闭、绿色开启两个同尺寸开关，后面的组件与交互设置相同。
步骤一：在Pixso中新建文件
在 Pixso 中新建设计文件，点击左侧的「资源」选项卡，打开已启用的「WeUI浅色组件库」。这里是在文件中调用组件库，不是创建一个名为组件库的新项目。
找到关闭与开启两个状态的开关，分别从左侧拖到画布。让两个状态的外框尺寸一致、图层结构尽量对应，只改变开关的位置与颜色，便于后续比较。
步骤二：创建多个组件
先确认每个开关的底板与圆形滑块位于同一个整体中，再同时选中这两个开关，点击顶部工具栏「组件」右侧的下拉小三角，选择「创建多个组件」，分别转换为本地组件。这里需要两个独立的状态组件，不要把两个开关一起合成一个单独组件；如果已经准备好两个本地组件，可以直接进入下一步。
步骤三：创建组件变体
同时选中两个开关组件，点击右侧的「创建组件变体」，将它们放到一个组件集中。把两个变体清楚地区分为“关”和“开”；组件集用于管理这些状态，本身不是最终放到页面里使用的开关实例。
步骤四：添加交互事件
点击右侧的「原型」选项卡，选中关闭状态的组件，把鼠标移到组件右侧的交互控点。接下来由这个状态发起事件，目标是同一组件集里的开启状态。
步骤五：单击触发变体切换
从关闭状态的控点拖出连线，连接到开启状态。在交互事件中确认触发方式为「单击」，动作为变体切换，目标为“开”。不要把目标选成整个页面跳转，否则演示的就不是组件内部状态变化。
再从开启状态连回关闭状态，同样设置为单击触发变体切换，目标为“关”。两条连接分别负责“关→开”和“开→关”；只有第一条时，首次开启后就没有回到关闭状态的路径。
步骤六：进行演示
从左侧组件面板拖出一个开关实例，放入用于演示的画板，初始状态设为“关”。点击右上角的「演示」，连续点击两次：第一次应由关变开，第二次应由开变关。这里使用的是组件实例，不需要把整个组件集放进画板。
基础切换完成后，可以把开关实例放进个人中心或偏好设置页面。下面的动图展示了页面中的开关效果；标签负责说明控制的功能，开关负责表达当前状态。
开关不能正常切换时，先看哪里
- 只能开启一次：检查开启状态是否有返回关闭状态的事件，再核对触发方式、动作和目标。第一条连线不会自动生成反向连线。
- 点击没有反应：先在演示视图中测试，确认画板里放的是组件实例；再检查开关上方是否有其他图层遮挡点击区域，以及事件是否加在正确的变体上。
- 切换时尺寸或位置跳动：比较两个变体的外框尺寸、内部圆形位置和图层结构。先保持整体尺寸一致，再调整动效，避免用动画掩盖本来就不一致的布局。
开关还要带动地图变化，组件范围怎么划
如果打开“显示充电站”后，地图上还要出现站点标记，可以把地图和开关一起放进卡片，并为整张卡片制作“关”和“开”两个变体。这样切换的是完整卡片的状态，不是让小开关凭空控制卡片外的图层。
先让两张地图的道路、卡片尺寸和文字位置保持一致，只在开启状态中显示站点标记，再为卡片变体添加往返切换。这样可以演示“打开开关后看到了什么”；实际产品中的站点查询和数据更新仍由开发实现，组件变体本身不会获取地图数据。
如果只需要让开关自身改变外观，保留小组件就够了；需要周围内容一起变化时，再按场景确定组件范围。不要为一个开关把所有页面都做进同一个组件集。
可以在 Pixso 中先完成一个能来回切换的开关，再把实例放进自己的页面。演示时请同事连续点几次，观察他是否看得懂当前状态与控制范围；需要调整时回到对应变体和事件，不必重画整套页面。
同样的状态切换还可用于密码输入框的显示与隐藏。这个场景还要保留已输入的内容，并安排好按钮名称与位置；原型中的外观切换不代替真实输入和认证逻辑。
