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頁，點擊“刪除選中行”按鈕即可以刪除多行數據。