Axure RP 9 中繼器原理——添加行

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

每提交一次數(shù)據(jù),每增加一行

步驟:

1、打開Axure RP 9,新建文件。

2、在元件庫中,拖動“文本框文件”

拖入文本框

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

拖入文本標簽、水平線

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

設置相關(guān)屬性
組合

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,

添加行
選擇fx

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

添加局部變量

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

插入變量或函數(shù)

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

確定

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


設置fx

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

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

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

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

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

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

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

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

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

全部設置完成,如下圖:

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容