classification: 實戰(zhàn)axure
title: 在axure中使用兩種不同的方法實現(xiàn)toggle組件
tag: toggle dynamic panel move by 方法
author: 嘟嘟寶嘟
Date: 2020年12月4日
在axure中使用兩種不同的方法實現(xiàn)toggle組件
在實際原型設計中渠鸽，一般都使用動態(tài)面板實現(xiàn)toggle組件的動態(tài)效果妹笆，其實還可以使用組件的move by 方法實現(xiàn)toggle組件的動態(tài)效果捶索。
兩種方法各有優(yōu)缺點：
動態(tài)面板事件的邏輯簡單胸哥，代碼少溃斋，但是需要使用的組件較多馍佑，幾乎沒有動態(tài)效果（開關(guān)動作）酒甸；
使用組件的move by方法堆巧，基礎組件較少（是動態(tài)面板方式的一半）礁叔，可以做出開關(guān)移動的效果牍颈，但是對基礎組件的樣式效果設置和事件的代碼邏輯比較復雜。
今天就介紹用這兩種方法實現(xiàn)toggle組件的案例琅关。
1. 使用動態(tài)面板實現(xiàn)toggle組件
使用動態(tài)面板實現(xiàn)toggle組件需要一個動態(tài)面板組件煮岁，為動態(tài)面板組件設置兩個狀態(tài)：開和關(guān)，每個狀態(tài)內(nèi)包含三個基礎組件涣易，兩個shape組件畫出toggle開關(guān)的基礎樣式画机，一個label組件表明當前開關(guān)的狀態(tài)。
動態(tài)面板的on狀態(tài):
動態(tài)面板的off狀態(tài)：
然后設置動態(tài)面板的click or tap 事件：
運行這個組件新症，我們看到當點擊toggle組件的時候步氏，開關(guān)實現(xiàn)了打開和關(guān)閉的效果。
但是當點擊中間的滑塊或開關(guān)狀態(tài)文字的時候徒爹，組件狀態(tài)也發(fā)生了改變荚醒，而實際系統(tǒng)的toggle組件這個時候的狀態(tài)不會發(fā)生，只會在點擊滑塊的旁邊顏色區(qū)域時隆嗅，滑塊才會滑動改變狀態(tài)腌且。
2. 使用組件的move by方法，實現(xiàn)toggle組件
這種方法只需要定義三個基礎組件榛瓮，兩個shape組件和一個label組件：
一個帶有顏色改變的大的shape組件作為toggle的滑軌铺董，一個圓形shape組件作為toggle的滑塊，label組件表明當前開關(guān)的狀態(tài)。
- 首先設置作為
滑軌的shape組件的顏色和樣式效果精续，我把基本效果設置為紅色關(guān)閉狀態(tài)（這是因為selceted效果對應on狀態(tài)比較符合語義邏輯）坝锰，selected style設置為綠色，默認展示selected style重付。
- 然后定義
滑軌shape組件的click or tap事件：
在move方法中使用的是相對位置by而不是絕對位置to顷级，橫向移動距離只要大于滑軌組件的尺寸就可以，設置移動的邊界滑塊就不會滑出滑軌組件确垫。500ms的滑動時間只是為了看到滑動效果弓颈，實際設置時可以設為100ms。
運行這個組件删掀，當我們點擊滑塊或者滑軌之外時翔冀，toggle組件不會有反應，當點擊滑軌時披泪，滑塊會有明顯的滑動開關(guān)效果纤子。
