Repeater（中繼器）控制元件的用法

Axure中的Repeater控制元件顧名思義就是可以重複新增內容，而無需逐個進行新增。該控制元件對於以九宮格類、列表類的形式內容時非常有效，且支援使用者新增、修改、刪除控制元件中的內容。
Repeater控制元件的使用步驟為：
定義元素–>新增資料–>繫結資料–>修改樣式–>資料操作
下面以新增列表類內容為例，逐步具體介紹該控制元件的使用方法。本文僅適用於具有一定Axure使用經驗的使用者閱讀。

1 定義Repeater元素

（01）在頁面中新增Repeater控制元件，新增後預設效果如下圖：

（02）雙擊編輯控制元件，並按下圖所示，為Repeater新增內容，併為各個元件命名：

（03）此時，返回到Home頁看到的效果如下（其中的數字1、2、3是預設值，暫時不用理會）：

2 為Repeater新增資料

（01）從上圖可以看到Repeater的框架已經顯示出來了，但裡面的內容還沒有，下面我們開始為中繼器新增內容；開啟中繼器編輯介面，點選頁面下部的小三角，開啟Repeater 屬性視窗，如下圖所示：其中，Repeater Dataset就是中繼器中的資料，這裡預設的1、2、3就是之前預覽介面中出現的數字。

（02）按照上一節對圖片、標籤的定義，為中繼器新增列值（列值最好與之前的定義一致）和資料，新增之後效果如下：注意：由於頭像是圖片格式，但Axure並不支援輸入圖片路徑的方式，因此圖片需要在單元格中點選右鍵選擇“匯入圖片”，只有這樣圖片才能正常顯示。

3 繫結資料

（01）Repeater的資料已經新增完成了，但你會發現此時在Home頁預覽Repeater仍然沒有顯示我們新增的資料，下面將介紹如果將我們新增的資料繫結到Repeater中。在Repeater屬性視窗中，點選“中繼器專案互動”，顯示預設內容：

（02）修改ItemLoad用例的定義，修改參考下圖所示：注意：頭像要選擇“設定影象”動作，其他內容選擇“設定文字”。這一步非常重要，如果設定不對，頭像將不顯示。

（03）此時，返回到Home頁預覽Repeater就可以看到上述步驟中新增的資料內容了：

4 修改樣式

（01）至此，Repeater中最重要的部分已經定義完成，當然還可以對Repeater的樣式進行簡單調整，定義非常簡單，請自行研究。下圖為樣式定義，供參考：

（02）效果圖如下：

5 資料操作

（01）經過上述步驟，你已經可以定義一個完整的Repeater控制元件，通過這種方式可以節省大量樣式重複控制元件的新增工作。不過，這些只是Repeater基本的使用方法，其更大的價值在於可以動態新增、修改、刪除資料。下面的內容屬於Repeater進階用法，供有需要的讀者參考。當然，如果你的原型圖中並不需要動態增刪改資料的效果，那麼有之前的知識也夠用。

5.1 新增資料

（01）接上面的步驟，在Home頁放置一個按鈕，用於為Repeater新增資料：

（02）為該按鈕新增單擊效果，當點選按鈕時為Repeater新增一行資料，如下圖：注意：A. 這裡每次只能新增1行，如果定義了多行資料，則點選按鈕時會一次性新增多行。B. 每次點選按鈕時新增的行資料是相同的，如果想要新增不一樣的資料，則需要配合其他的方法，此處不做說明。

（03）預覽Home頁，每點選1次“新增行”按鈕就可以在Repeater中新增1行：

5.2 修改資料

（01）開啟Repeater編輯介面，定義“修改”按鈕的點選事件，實現點選該按鈕修改該行description欄位的功能，定義如下圖：

（02）預覽Home頁，點選每行後面到“修改”按鈕即可以修改該行description欄位的值：

5.3 刪除單行資料

（01）開啟Repeater編輯介面，定義“刪除”按鈕的點選事件，實現點選該按鈕刪除該行的功能，定義如下圖：

（02）預覽Home頁，點選每行後面到“刪除”按鈕即可以刪除該行資料。

5.4 刪除多行資料

（01）如果需要選擇多行然後批量刪除，可以使用checkbox控制元件，並配合Mark Rows進行刪除，步驟如下。Repeater中行首增加一個checkbox控制元件，並定義該控制元件的狀態改變事件，實現當選中checkbox時標記該行，取消選中時取消標記該行，定義如下圖：

（02）在Home頁中增加“刪除選中行”按鈕，並定義該按鈕的點選事件，實現點選該按鈕可以刪除checkbox被選中的行，定義如下圖：

（03）預覽Home頁，點選“刪除選中行”按鈕即可以刪除多行資料。