Axure RP 9 Mac這款原型設計軟件能讓設計者快速創建應用軟件，或者在web網站的線框圖、流程圖、原型和規格的設計製作，從低到高的視覺和交互保真度的全方位構建，是目前業界首屈一指的交互式產品原型設計軟件！此次小編就帶大家來看看Axure RP如何做全選與取消全選效果。
1、案例效果：
初始狀態/取消全選時：
全選後取消任一選項時：
全選/單選全部選中時：
2、案例描述：
列表中相鄰的行具有交替的背景顏色；點擊列表中複選框時，可以切換複選框的勾選狀態，複選框被勾選時整行變爲灰色，取消勾選時恢復默認顏色；列表中的複選框被全部勾選時，列表左下方的全選複選框變爲被勾選狀態；列表中的複選框有任何一個取消勾選時，全選複選框都會變爲未勾選狀態；全選複選框被主動勾選時，列表中所有的複選框均被勾選，全選複選框被主動取消勾選時，列表中所有的複選框均被取消勾選。
另外，本案例中當列表中某一行被雙擊時，該行爲播放狀態，歌曲名之前顯示播放圖標，並且顯示聽相似歌曲與看現場翻唱的按鈕。
元件準備：
頁面中：
中繼器“PlayList”中：
中繼器“PlayList”數據集中：
中繼器“PlayList”樣式設置中：
包含命名：
複選框（用於全選的複選框）：SelectAll
文本標籤（用於記錄列表中複選框被勾選的數量）：SelectNumber
中繼器（用於歌曲列表）：PlayList
組合（用於歌曲信息部分的同一操作）：InfoGroup
組合（用於其它按鈕部分的同一操作）：ButtonGroup
圖片（用於播放狀態顯示的頻譜圖標）：SpectrumIcon
圖片（用於顯示歌曲MV圖標）：MVIcon
複選框（用於列表中每行的複選框）：SelectItem
文本標籤（用於顯示歌曲名稱）：SongName
文本標籤（用於顯示歌手姓名）：SingerName
文本標籤（用於顯示專輯名稱）：AlbumName
矩形（用於歌曲信息部分的灰色背景）：BackgroundShape
3、思路分析：
完成歌曲列表的常規信息部分；（操作步驟1）
爲播放狀態的歌曲顯示更多的按鈕；顯示頻譜圖標，將歌曲名稱置於頻譜圖標右側，顯示整行灰色的背景；（操作步驟2）
爲有MV的歌曲顯示MV的圖標，MV的圖標在歌曲名稱右側間距5像素的位置；（操作步驟3）
雙擊歌曲列表中任何一項時，取消其它歌曲的播放狀態，並將當前歌曲改變爲播放狀態；（操作步驟4~5）
勾選歌曲列表中任何一項的複選框時，整行顯示灰色背景，勾選數量記錄增加1；（操作步驟6）
如果勾選數量記錄等於列表項的總和，勾選複選框“SelectAll”；（操作步驟7）
取消勾選歌曲列表中任何一項的複選框時，勾選數量記錄減少1；取消勾選複選框“SelectAll”；（操作步驟8）
如果歌曲列表中取消勾選的項不是播放狀態，取消顯示整行的灰色背景；（操作步驟9）
在單擊複選框“SelectAll”時判斷複選框是否被勾選，如果該複選框被勾選則勾選歌曲列表中所有的複選框；否則，取消勾選歌曲列表中所有的複選框；這裏需要注意的是，全選與取消全選只有在主動勾選或取消勾選複選框“SelectAll”時才能夠生效，所以觸發事件要選擇複選框“SelectAll”的【鼠標單擊時】而不是【選中時】和【取消選中時】。（操作步驟10~11）
4、操作步驟：
1、爲中繼器“PlayList”的【每項加載時】事件添加“用例1”，設置動作爲【設置文本】；勾選元件“SongName”，設置文本爲【值】“[[Item. SongName]]”；勾選元件“SingerName”，設置文本爲【值】“[[Item. SingerName]]”；勾選元件“AlbumName”，設置文本爲【值】“[[Item.AlbumName]]”；
2、繼續爲中繼器“PlayList”的【每項加載時】事件添加“用例2”，設置條件判斷【值】“[[Item.IsPlay]]”【==】【值】“True”；設置滿足條件時的動作爲【顯示】組合“ButtonGroup”，【顯示】圖片“SpectrumIcon”，【移動】元件“SongName”【經過】{x}“25”{y}“0”的位置，【選中】元件“BackgroundShape”；
3、繼續爲中繼器“PlayList”的【每項加載時】事件添加“用例3”，設置條件判斷【值】“[[Item.MV]]”【==】【值】“Yes”；設置滿足條件時的動作爲【顯示】圖片 “MVIcon”，【移動】圖片“MVIcon”【到達】{x}“[[s.x+s.text.length*12+5]]”{y}“[[Target.y]]”的位置；公式中“s”爲局部變量，其內容爲元件“SongName”的對象實例；這裏要注意的是：因爲，歌曲名稱長度不一，所以不能移動MV的圖標到固定的位置，在這裏移動公式“[[s.x+s.text.length*12+5]]”的含義爲“歌曲名稱元件的x軸座標值+歌曲名稱字符數量*字符的寬度+5像素”；
事件交互設置：
4、爲組合“InfoGroup”的【鼠標雙擊時】事件添加“用例1”，設置動作爲【更新行】於中繼器“PlayList”，勾選【條件】，設置條件爲“True”（表示全部符合條件），【選擇列】爲“IsPlay”，設置列的【Value】（值）爲“False”；這一步完成了取消列表中所有歌曲的播放狀態；
5、繼續上一步，添加動作【更新行】於中繼器“PlayList”，勾選【This】，【選擇列】爲“IsPlay”，設置列的【Value】（值）爲“True”；這一步完成了將當前歌曲設置爲播放狀態；
事件交互設置：
6、爲複選框“SelectItem”的【選中時】事件添加“用例1”，設置動作爲【選中】元件“BackgroundShape”；【設置文本】於元件“SelectNumber”爲【值】“[[Target.text+1]]”；公式“[[Target.text+1]]”表示目標元件文字加1；
7、爲複選框“SelectItem”的【選中時】事件添加“用例2”，添加條件判斷【元件文字】於“SelectNumber”【==】【值】“[[Item.Repeater.visibleItemCount]]”；設置滿足條件時的動作爲【選中】元件“SelectAll”；公式“[[Item.Repeater.visibleItemCount]]”的返回值爲當前項所在的中繼器的可見項數量；完成動作設置後，在用例名稱上點擊<鼠標右鍵>，選擇菜單中最後一項，將用例的條件判斷由“Else If”轉換爲“If”；
8、爲複選框“SelectItem”的【取消選中時】事件添加“用例1”，設置動作爲【設置文本】於元件“SelectNumber”爲【值】“[[Target.text-1]]”；【取消選中】元件“SelectAll”；公式“[[Target.text-1]]”表示目標元件文字減1；
9、爲複選框“SelectItem”的【取消選中時】事件添加“用例2”，添加條件判斷【值】“[[Item.IsPlay]]”【==】【值】“False”；設置滿足條件時的動作爲【取消選中】元件“BackgroundShape”；完成動作設置後，在用例名稱上點擊<鼠標右鍵>，選擇菜單中最後一項，將用例的條件判斷由“Else If”轉換爲“If”；
事件交互設置：
10、爲元件“SelectAll”的【鼠標單擊時】事件添加“用例1”，設置條件判斷【選中狀態】於“當前元件”（This）【==】【true】，設置滿足條件時的動作爲【選中】元件“SelectItem”；
11、繼續爲元件“SelectAll”的【鼠標單擊時】事件添加“用例2”，設置不滿足操作步驟10的條件時，執行動作爲【取消選中】元件“SelectItem”。
事件交互設置：
以上就是小編爲大家帶來的Axure RP實例教程：全選與取消全選效果。還有更多詳細、實用的功能以及相關軟件Axure RP 9Mac版獲取，大家快來Macdown.com自行探索一番吧。