Axure教程：如何使用Axure中繼器元件？

這是本人在「人人都是產品經理」發表的第一篇文章，主要目的是教會小白使用Axure7.0新增的組件——中繼器（Repeater）。才疏學淺，如有紕漏，還請指正。

使用之前

在使用之前，我們總得搞清楚我們將要使用的元件是什麼東西。

據Axure官網介紹，中繼器是一種用於展示模式重複的文本或圖標的元件。沒看懂？不急，我們先看一下效果演示，然後再一步步把這個效果做出來，就可以開始使用中繼器了~

一、初識中繼器

從元件庫中找到中繼器，按住並拖入中間的操作區，我們可以看到它已經有一列三行，分別寫著1、2、3。

那麼操作區中的1、2、3從哪裡來的呢？聰明的同學已經看出來了，在右側的「檢視：中繼器——中繼器」欄有一個編輯區，裡邊便有1、2、3。但是這還不夠，如果我們把「檢視：中繼器——交互——每項載入時」中的「case1」刪除，那麼操作區中1、2、3便消失了。由此可見，還需要「case1」把操作區和編輯區聯繫在一起。

按「Ctrl+Z」撤銷「刪除case1」操作，雙擊「case1」打開用例編輯<每項載入時>面板，我們來看看「case1」究竟做了什麼。

只見上面寫著 設置文字於（矩形）= 「[[Item.Column0]]」 。頓生疑惑：什麼？矩形？什麼矩形？Item又是什麼？Column0又是什麼？Item.Column0又是什麼？為什麼要用「」包起來？

關掉用例編輯<每項載入時>面板，回到主界面，雙擊操作區的中繼器，打開中繼器模式編輯操作區。

中繼器模式編輯操作區中的矩形，可以看到右側「檢視：矩形」中名稱欄顯示「（矩形名稱）」，這就是上文中的「（矩形）」。

點擊「檢視：矩形」中的名稱欄，我們給這個矩形取名為「動物」。

選中中繼器模式編輯操作區中的矩形，按「Ctrl+C」和「Ctrl+V」複製粘貼出新的矩形，拖動矩形放置在原矩形的右側，並在右側「檢視：矩形」中名稱欄將矩形名稱改為「食物」。

將操作區切換回index頁面，我們可以看到發生了一些變化：中繼器變成了兩行三列，「case1」中的「矩形」也變成了「動物」。這是我們剛才在中繼器模式編輯操作區修改的結果。

接下來，我們要做更多的操作。在右側「檢視：中繼器——中繼器」中，雙擊「Column0」，更名為「FirstColumn」，雙擊「添加列」，取名為「SecondColumn」。讓我們看看「case1」發生了什麼變化。

我們將「Column0」改名「FirstColumn」之後，「case1」中的「Column0」也變為「FirstColumn」，由此我們可以意會他們的關係。

二、每項載入時

接下來，我們在「檢視：中繼器——中繼器」的編輯區中填入一些動物和食物的對應關係，可以看到，操作區也發生了改變，但是只顯示了第一列，第二列卻沒有顯示。

這是因為「case1」只同步了第一列卻沒有同步第二列。接下來我們試著同步第二列。雙擊「case1」打開用例編輯<每項載入時>面板，可以看到，「case1」只將「動物（矩形）」和「FirstColumn」聯繫起來。

有樣學樣，我們把「食物（矩形）」和「SecondColumn」也聯繫起來。先勾選「食物（矩形）」，再將右下角的值由默認的「[[Item.FirstColumn]]」改為「[[Item.SecondColumn]]」。聰明的同學應該可以意識到，這個「[[Item.xxxxxx]]」是一種默認格式，代表編輯區中xxxxxx列的值。很正確，Item就代表這個中繼器的編輯區，「」則代表取值，取中繼器編輯區xxxxxx列的值。

點擊確定按鈕，關閉用例編輯<每項載入時>面板，回到操作區，我們看到操作區中的中繼器的第二列成功地與編輯區中的第二列同步。

看到這裡，你已經明白了很多。但是依然有疑惑：如果只是靜態地展示一個表格那麼直接使用「表格」元件不久可以了？耍我呢？

稍安勿躁，學習了以上知識，下面我們可以準備起飛了。

三、動態添加

首先，我們添加兩個文本框分別用於輸入「動物」和「食物」，再添加個用於提交數據的提交按鈕。

什麼？提交數據？

將兩個文本框和提交按鈕分佈在右側檢視的名稱欄改名為「輸入動物」、「輸入食物」和「提交按鈕」。

提交按鈕，在右側「檢視：提交按鈕——交互」中雙擊「滑鼠單擊時」，打開用例編輯<滑鼠單擊時>面板。在左側添加動作欄雙擊「中繼器——數據集」中的「添加行」。在右側配置動作欄勾選「（中繼器）」（因為我們還沒給我們的中繼器取名，所以顯示為「（中繼器）」，跟前面提到的「（矩形）」一個道理）。

右側

下面點擊

打開

。

點擊「FirstColumn」下方，「添加行」右側的「fx」，打開編輯值面板。點擊「局部變數」中的「添加局部變數」。

將「局部變數」中的「LVAR1」改為「Animal」，右側「輸入食物」改為輸入動物。在上方「插入變數或函數」下方的輸入框輸入「[[Animal]]」（對應上面的「Animal」,意為「Animal」變數的值）。

確定按鈕關閉當前面板。同樣操作第二列：點擊「SecondColumn」下方，「添加行」右側的「fx」，打開編輯值面板進行編輯。

同樣點擊確定按鈕關閉當前面板。現在添加行到中繼器面板變成這個樣子，意思是單擊提交按鈕時，把「輸入動物」文本框的值放在Animal中，把「輸入食物」文本框的值放在Food中，然後將Animal和Food的值分別作為第一列和第二列組成一行，將這一行添加到中繼器中。

確定按鈕關閉添加行到中繼器面板。點擊確定按鈕關閉用例編輯<滑鼠單擊時>面板。回到主界面。

點擊右上角預覽按鈕打開瀏覽器，在兩個輸入框中分別輸入動物和食物，點擊提交按鈕，即可看到動態添加的效果。

四、動態刪除

那要刪除怎麼做呢？也很簡單。我們關掉瀏覽器，回到主界面，添加一個用於刪除的按鈕。

點擊右側「檢視：矩形——交互」中的「滑鼠單擊時」打開用例編輯<滑鼠單擊時>面板，在左側添加動作欄點擊「中繼器——數據集」中的「刪除行」，右側配置動作欄勾選「（中繼器）」，下方的單選框選擇「已標記」。意思是單擊按鈕時，刪除中繼器中已標記的行。什麼？已標記？怎麼標記？

確認按鈕回到主界面。切換到「（中繼器）index」中繼器模式編輯操作區，按住「Ctrl」鍵點擊兩個矩形，右鍵，選擇「組合」。在右側「檢視：組合——Shapes——交互樣式設置」中點擊「選中」打開交互樣式設置面板，找到填充顏色一項，勾選並將顏色改為你喜歡的顏色。按確定鍵關閉交互樣式設置面板。

再在右側「檢視：組合——交互」中雙擊「滑鼠單擊時」打開用例編輯<滑鼠單擊>面板，在左側添加動作欄「元件——設置選中」中點擊「切換選中狀態」，再勾選右側配置動作欄中的「當前元件」一項。這兩步操作的目的在於讓我們點擊某一行時這一行會變色來反饋我們選了該行。

我們還要讓我們點擊的某一行置為「已標記」狀態，方便我們上文中說到的用於刪除的按鈕刪除「已標記的行」。在左側添加動作欄「中繼器——數據集」中點擊「標記行」，再勾選右側配置動作欄中的「（中繼器）」一項。

五、大功告成