中繼器（英文名Repeater）是Axure RP 7.0推出的新功能,，是目前為止Axure最復雜的功能（沒有之一），學習它的使用有助于我們快速設計一些復雜的交互界面,。下面和大家分享我的使用心得,。

中繼器這個翻譯是讓人費解的，如果直譯成“重復器”雖然不太專業(yè)但是更利于理解,，或者干脆不編譯,，用“Repeater”就行,。用過Asp.Net的人，一定對里面的Repeater很熟悉,，沒錯,，Axure的Repeater與Asp.Net的原理基本上是一樣的。

先來說說Repeater解決什么問題,。

請看以下圖片,。上方是一個表單，有5個表單部件和一個“添加”按鈕,，界面默認顯示下方4個圖文區(qū)域,。點擊“添加”后出現(xiàn)第5個圖文區(qū)域。每點擊一次添加一個新的區(qū)域,。沒有Repeater之前,，要制作這樣的原型是非常困難的。

使用Repeater實現(xiàn)以上效果是比較方便的,。

1,、  在界面中拖入一個Repeater。中文名叫“中繼器”,。

剛拖進來是這個樣子的,。

2、     設置Repeater內部部件

雙擊這個Repeater,，進入Repeater內部界面,。默認它會有一個矩形部件，刪除它,，按自己的需求拖入其他部件,。如下，這個由一張圖片與“活動名稱”,、“活動狀態(tài)”,、“開始時間”、“結束時間”4個Label部件組成的區(qū)域就是要重復顯示的內容,。

注意,，這時要給每個部件命名。從便在Repeater的動作中找到部件,。方法如下：

3,、  設置Repeater的數(shù)據(jù)集(Dataset)

在Repeater編輯界面下方可看到以下界面。Repeater Dataset是數(shù)據(jù)集,，另外兩個一會再說,。

在Dataset中設置要顯示的數(shù)據(jù)的結構，同時可添加默認顯示的數(shù)據(jù),。也就是“Column”與“Row”,。以下”Name”,、”Status”、”Start”,、”End”,、”Image”為添加的Column，注意列名必須為英文,。

4,、  設置Repeater的動作(Item Interactions)

a)        設置文本部件值——“Set Text”

在OnItemLoad（注意不是OnLoad，中文版的同學請自行翻譯）中雙擊Case,。

雙擊后出現(xiàn)以下界面,。根據(jù)業(yè)務需要設置部件值。比如我是要設置一張圖片和四個Label,，于是分別選擇了Set Text與Set Image,。在最右側選擇Repeater內部的部件（注意：必須在第2步時設置部件名稱，否則無法區(qū)分部件,。）,。以下為Set Text的界面。選擇部件后,，在下方選擇Rich Text,，再點擊Edit Text。

點擊Edit Text后出現(xiàn)以下界面,。

點擊Insert Variable of Function,。

在Repeater/Dataset中選擇列的值。如item.Name,item.Status,item.Start等,。然后在左側文本框會出現(xiàn)帶[[]]的值,。[[]]是Axure取值的語法。

b)        設置圖片——“Set Image”

以上說的是設置文本的方式,，如果是圖片，可參見下圖,?？芍苯訌碾娔X里導入，也可設置成Dataset里的值,，當然也可根據(jù)Axure的語法設置成其他值,。

5、  設置Repeater的格式

下圖是設置Repeater格式的界面,?？梢栽O置Wrap（自動換行），并設置每幾個項目開始換行,。背景什么的也可以設置,。

運行一下就可以看到效果了,。

6、  實現(xiàn)點擊“添加”的效果

回到主頁面,，這時變成以下效果了,。Repeater根據(jù)自動計算呈現(xiàn)出所見即所得的效果。接下來,，我們添加幾個表單部件與一個“添加”按鈕,，來實現(xiàn)“添加”功能。

為表單中的部件設置名稱,，如圖,。

為“添加”部件設置OnClick事件，如圖,，雙擊”Case”：

在打開的Case Editor界面中選擇Repeaters-Dataset-Add Rows,，勾選右側復選框，點擊右下方的Add Rows按鈕,。其原理是當點擊“添加”按鈕時向Repeater的Dataset中添加一行,。

彈出以下窗口，點擊Add Row,，在新添的這一行中錄入表單部件值,。可以通過點擊fx按鈕添加,。

點擊fx后進入以下窗口,。點擊Add Local Variable。在第一格錄入變量名稱,，如LVAR_Name,。如果要取文本框的值，第二格可以選text on widget,。第三格選相應的部件,。

再點擊Insert Variable or Function，選擇剛設置的變量LVAR_Name,。點擊OK,。再將另幾個部件值也設置上即可。

這樣,，就完成了點擊“添加”按鈕的效果了,。

本文為作者李蕭泓投稿發(fā)布，轉載請注明出處并保留本文鏈接

AD：【官方推薦】深圳Axure線下培訓招生中 頂級名師小樓授課 贈送教材 價格只要799元

轉載請注明出處：Axure中文網(wǎng) ? Axure7.0中繼器(Repeater)使用教程 教你學會Axure最復雜的功能