中繼器（英文名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”

以上說的是設置文本的方式，如果是圖片，可參見下圖。可直接從電腦里導入，也可設置成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ā)布，轉載請注明出處并保留本文鏈接