這是本人在“人人都是産品經理”發表的第一篇文章，主要目的是教會小白使用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——交互樣式設置”中點擊“選中”打開交互樣式設置面闆，找到填充顔色一項，勾選并将顔色改為你喜歡的顔色。按确定鍵關閉交互樣式設置面闆。

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

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

五、大功告成

點擊确定按鈕關閉當前面闆回到主界面，點擊預覽按鈕查看效果。

本文由 @許木勝 原創發布于人人都是産品經理。未經許可，禁止轉載。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部