我們在畫原型圖的時候,前面有幾個輸入框,下方有個表格,輸入框輸入數(shù)據(jù),點擊提交,表格就會添加一行,那么如何實現(xiàn)中繼器添加行呢?

步驟:
1、打開Axure RP 9,新建文件。
2、在元件庫中,拖動“文本框文件”

3、拖入“文本標簽”,并將文字改為“商品名稱:”;拖入“水平線”,對齊“文本框”底部。

4、選中“文本框”,將字號設置為14,線段設置為0,“交互”下面的“提示文本”輸入“輸入商品名稱”。設置好后,選中全部CTRL+G,組合。


5、選中該組合。CTRL+C、CTRL+V復制粘貼兩次,將文本標簽分別修改為“商品數(shù)量:”、“商品價格”,提示文本分別修改為“輸入商品數(shù)量”、“輸入商品價格”。

6、拖入一個“按鈕”,并將文字改為“提交”。

7、拖入一個矩形,盡量覆蓋所有的元件,如下圖。選中矩形,移動左上角的倒三角,可以將直角改為圓角,點擊上方的“底層”,將矩形置于底層。

8、拖入一個中繼器,選中該中繼器,在右邊“樣式”下方添加列,并修改列名稱:name、sale、number,如下圖:

9、選中中繼器,鼠標定位到中繼器的行,點擊鼠標右鍵,選擇“刪除行”,

10、雙擊中繼器,選中中間的矩形,按Delete刪除;拖入“三級標題”元件,并復制粘貼兩次,分別將“樣式”下面的名稱命名為“名稱”、“數(shù)量”、“價格”,同時單擊“價格”三級標題,將字體顏色改為紅色,如下圖。最后,點擊“關(guān)閉”。


11、點擊關(guān)閉后,拖入“文本標簽”元件,復制粘貼兩次,將文字分別改為“商品名稱”、“商品數(shù)量”、“商品價格”,同時,拖入一條直線,放在這三個標簽下方,調(diào)整合適的長度,將旋轉(zhuǎn)角度設置為0。調(diào)整元件的位置,使之與中繼器協(xié)調(diào)。

12、選中“提交”按鈕,“新建交互”——>“單擊時”,在“中繼器動作”下面找到“添加行”,選擇我們剛剛建立的中繼器


13、點擊“添加行”,點擊“name”下面的fx,


跳出的文本框中,點擊“添加局部變量”,“當前替換為“組合”下邊商品名稱的“(文本框)”,

點擊“插入變量或函數(shù)”,選擇“LVAR1”,

最后的結(jié)果,如圖所以。然后點擊“確定”。

14、同樣的方法,依次設置“sale”、“number”下面的fx。

“sale”的局部變量選擇“組合”下商品價格的“文本框”,“插入變量或函數(shù)”選擇“LVAR1”;

“number”的局部變量選擇“組合”下商品數(shù)量的“文本框”,“插入變量或函數(shù)”選擇“LVAR1”;

全部設置好后,是這個亞子,如下圖。點擊“確定”。

15、選中中繼器,在右邊“交互”下面點擊“未選擇任何目標”,

將“目標”選擇中繼器下面的“名稱”,

“值”選擇“插入變量或函數(shù)”,選擇“Item.name”,將“三級標題”刪去,點擊“完成”;

繼續(xù)“添加動作”,選擇“設置文本”,

如下圖,同樣的方法設置商品數(shù)量;

同樣的方法,設置商品價格。

全部設置完成,如下圖:

預覽效果,每提交一次,增加一行,效果實現(xiàn),完結(jié),撒花!
