這次的學習中,，我是用QQ的界面管理器（QQ最小化左邊的按鈕中）作為案例進行教學的，首先我們現(xiàn)需要先明確下交互的內(nèi)容：

然后呢,，需要畫元件：

注意命名,，防你不知道我在說什么,。

• sort：排序用的字段
• selected：復選框的選中狀態(tài)
• icon：每項前面的icon
• name：每項的名字

中繼器右側(cè)的樣式中有背景交替選項，勾選后選2種顏色即可,。

中繼器中的行,，是由復選框btn_select、放文本用的矩形text,，和無填充色的矩形transfer組成,。

transfer不可以填色，不然中繼器交替背景顏色會被蓋住,。給transfer增加交互樣式,，選中時填充色變?yōu)榈仙?/p>

最后將整體選中，右鍵組合,，命名為row,。

最后還要增加1個全局變量“sort”來標記當前選中的項目是第幾項。

在每項載入時,，我們需要做4個事情：

1. 賦值文本。
2. 根據(jù)sort選中當前項的transfer改變背景色,。
3. 根據(jù)selected數(shù)據(jù)選中/取消選中復選框,。
4. 根據(jù)sort啟用/禁用對應按鈕。

講道理,，按照人腦邏輯,，背景色和上下移按鈕的交互分別是在點擊選中和點上下移按鈕時候發(fā)生的事情，不應該做在這里的,，但是為什么我做在這里了呢,？

因為在其他位置對變量改變后會更新每項重新載入，放在這里的話,，更新行的時候順便就把背景色和上下移按鈕的狀態(tài)都更新了,。

改變文本時要選用富文本，為icon和文本設(shè)置不同格式。

icon的字體要選專用的字體,，例如我的icon字體是iconfont，不然在axure里看不到,，后面的文本選普通字體即可,。給二者設(shè)置放在一起協(xié)調(diào)的字號，富文本里看可能會很不協(xié)調(diào),，但在中繼器里看是不一樣的,，以中繼器中顯示的預覽樣式為準。

[[Item.Repeater.itemCount]]代表中繼器中項目的數(shù)量,。

其他的沒什么難點，就不需要詳細解釋了,。注意：哪里應該是if哪里應該是else if,，要看清楚。

下面讓我們鉆到中繼器里面,，看row的交互：

點擊時，要設(shè)置sort為index,，中繼器中的index是數(shù)據(jù)行的索引編號,。這個編號永遠不會變，第1個就是1,，第2個就是2，不隨數(shù)據(jù)內(nèi)容變化而變化,。

改變變量之后再更新一下行,，不修改任何內(nèi)容，單純的更新下,，就會重新載入每項了,，這時點擊改變背景色的效果就出來了。

雖然將選中框也組合在row里面了,，但是點選中框的時候并不會觸發(fā)row的交互,。

在鼠標單擊時,，把sort=index的交互再做一次,。

在選中時，需要更新當前行,，將selected數(shù)據(jù)改為1,，取消選中時嘿將selected數(shù)據(jù)改為0。這樣在更新數(shù)據(jù)后,，選中框的√才會保存下來,，不然就會初始化為默認的狀態(tài),。

下面就是最關(guān)鍵的移動按鈕交互了，先讓我們看上移按鈕,。

點擊后我們需要讓當前行的sort-1，上一行的sort 1,，改完之后再改變sort告知最新的當前sort是幾,，再更新行重新載入每項。

但這樣有些麻煩,，所以讓我們換個思路,，先改變sort！

首先讓sort-1,，就是將sort變?yōu)槲覀儺斍包c擊的這行數(shù)據(jù)的上一項的代號,。

更新→鼠標點擊的行的上一行條件[[TargetItem.index==sort]]

更新sort=[[sort 1]]

更新→鼠標點擊的行

條件[[TargetItem.index==sort 1]]

更新sort=[[sort]]

我知道這很難理解，給你們講這個我也很痛苦的,！所以我畫了一個數(shù)據(jù)變化的圖,，仔細看，你一定能懂,！

最后，按照sort進行升序排序,，就成功把這這2項的順序交換過來啦,。下移呢，也是同樣的思維方法,。

這次課程的理解成本占比非常高，一定要靜下心來,，聰明的你一定可以學會,！