案例73. 全選與取消全選效果

案例來源:

百度音樂-音樂盒

案例效果：

初始狀態/取消全選時：(圖5-117)

全選后取消任一選項時：(圖5-118)

全選/單選全部選中時：(圖5-119)

案例描述：

列表中相鄰的行具有交替的背景顏色；點擊列表中復選框時，可以切換復選框的勾選狀態，復選框被勾選時整行變為灰色，取消勾選時恢復默認顏色；列表中的復選框被全部勾選時，列表左下方的全選復選框變為被勾選狀態；列表中的復選框有任何一個取消勾選時，全選復選框都會變為未勾選狀態；全選復選框被主動勾選時，列表中所有的復選框均被勾選，全選復選框被主動取消勾選時，列表中所有的復選框均被取消勾選。

另外，本案例中當列表中某一行被雙擊時，該行為播放狀態，歌曲名之前顯示播放圖標，并且顯示聽相似歌曲與看現場翻唱的按鈕。

元件準備：

頁面中：(圖5-120)

中繼器“PlayList”中：(圖5-121)

中繼器“PlayList”數據集中：(圖5-122)

中繼器“PlayList”樣式設置中：(圖5-123)

包含命名：

復選框(用于全選的復選框)：SelectAll

文本標簽(用于記錄列表中復選框被勾選的數量)：SelectNumber

中繼器(用于歌曲列表)：PlayList

組合(用于歌曲信息部分的同一操作)：InfoGroup

組合(用于其它按鈕部分的同一操作)：ButtonGroup

圖片(用于播放狀態顯示的頻譜圖標)：SpectrumIcon

圖片(用于顯示歌曲MV圖標)：MVIcon

復選框(用于列表中每行的復選框)：SelectItem

文本標簽(用于顯示歌曲名稱)：SongName

文本標簽(用于顯示歌手姓名)：SingerName

文本標簽(用于顯示專輯名稱)：AlbumName

矩形(用于歌曲信息部分的灰色背景)：BackgroundShape

思路分析：

完成歌曲列表的常規信息部分；(操作步驟1)

為播放狀態的歌曲顯示更多的按鈕；顯示頻譜圖標，將歌曲名稱置于頻譜圖標右側，顯示整行灰色的背景；(操作步驟2)

為有MV的歌曲顯示MV的圖標，MV的圖標在歌曲名稱右側間距5像素的位置；(操作步驟3)

雙擊歌曲列表中任何一項時，取消其它歌曲的播放狀態，并將當前歌曲改變為播放狀態；(操作步驟4~5)

勾選歌曲列表中任何一項的復選框時，整行顯示灰色背景，勾選數量記錄增加1；(操作步驟6)

如果勾選數量記錄等于列表項的總和，勾選復選框“SelectAll”；(操作步驟7)

取消勾選歌曲列表中任何一項的復選框時，勾選數量記錄減少1；取消勾選復選框“SelectAll”；(操作步驟8)

如果歌曲列表中取消勾選的項不是播放狀態，取消顯示整行的灰色背景；(操作步驟9)

在單擊復選框“SelectAll”時判斷復選框是否被勾選，如果該復選框被勾選則勾選歌曲列表中所有的復選框；否則，取消勾選歌曲列表中所有的復選框；這里需要注意的是，全選與取消全選只有在主動勾選或取消勾選復選框“SelectAll”時才能夠生效，所以觸發事件要選擇復選框“SelectAll”的【鼠標單擊時】而不是【選中時】和【取消選中時】。(操作步驟10~11)

操作步驟：

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像素”；

事件交互設置：(圖5-124)

4、為組合“InfoGroup”的【鼠標雙擊時】事件添加“用例1”，設置動作為【更新行】于中繼器“PlayList”，勾選【條件】，設置條件為“True”(表示全部符合條件)，【選擇列】為“IsPlay”，設置列的【Value】(值)為“False”；這一步完成了取消列表中所有歌曲的播放狀態；

5、繼續上一步，添加動作【更新行】于中繼器“PlayList”，勾選【This】，【選擇列】為“IsPlay”，設置列的【Value】(值)為“True”；這一步完成了將當前歌曲設置為播放狀態；

事件交互設置：(圖5-125)

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”；

事件交互設置：(圖5-126)

10、為元件“SelectAll”的【鼠標單擊時】事件添加“用例1”，設置條件判斷【選中狀態】于“當前元件”(This)【==】【true】，設置滿足條件時的動作為【選中】元件“SelectItem”；

11、繼續為元件“SelectAll”的【鼠標單擊時】事件添加“用例2”，設置不滿足操作步驟10的條件時，執行動作為【取消選中】元件“SelectItem”。

事件交互設置：(圖5-127)

~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程，以獨有的教學方法與技巧，幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】

喜歡 (51)or分享 (0)

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。