文章分享了關(guān)于利用Axure RP8中繼器實(shí)現(xiàn)表單的增刪改的具體操作過程，一起來學(xué)習(xí)下。

原型演示：

使用場(chǎng)景：適用于模塊內(nèi)增加擴(kuò)展同名稱字段

交互需求：

1. 字段可以輸入并記錄內(nèi)容（字段輸入長度不超過20字）；
2. 單擊添加，增加一個(gè)字段；
3. 單擊字段后面的×，刪除對(duì)應(yīng)字段；
4. 增刪字段，項(xiàng)目序號(hào)自動(dòng)增減；

01 準(zhǔn)備工作

矩形元件一個(gè)，中繼器一個(gè)。

剛從Default元件庫拖出中繼器內(nèi)默認(rèn)有一些默認(rèn)的元件和設(shè)置，我們需要對(duì)中繼器做一些處理，點(diǎn)擊中繼器，右側(cè)它的屬性頁，刪除第一、二行，保留第三行（為什么保留第三行呢，因?yàn)樾枰撁孑d入時(shí)有一個(gè)初始的字段）。

然后雙擊中繼器進(jìn)入中繼器編輯頁面,把矩形框刪掉，在中繼器內(nèi)放入我們需要的元件，做好元件命名。

最后返回原頁面，準(zhǔn)備制作交互了。

02 制作交互

2.1 中繼器加載數(shù)據(jù)集到元件

點(diǎn)擊中繼器，中繼器屬性面板選擇每項(xiàng)載入時(shí)，當(dāng)打開網(wǎng)頁或者添加數(shù)據(jù)時(shí)候，為中繼器加載數(shù)據(jù)集到元件。

為了實(shí)現(xiàn)編號(hào)自增，項(xiàng)目編號(hào)的動(dòng)作設(shè)置為[[item.index]]，[[item.index]]需要手動(dòng)輸入，而內(nèi)容輸入框的動(dòng)作可直接進(jìn)入函數(shù)選框選擇[[item.EditText]]（EditText在元件準(zhǔn)備時(shí)已經(jīng)命名好了，有疑問的同學(xué)們可以翻翻上面圖片）。

2.2 內(nèi)容輸入框設(shè)置

剛剛在準(zhǔn)備基礎(chǔ)元件的時(shí)候已經(jīng)拖出了文本框，此時(shí)為了更直觀地向用戶表達(dá)字段可輸入我們需要設(shè)置一個(gè)提示語和設(shè)置元件最大輸入文字?jǐn)?shù)為20，如下圖。

2.3 添加行

在元件準(zhǔn)備的時(shí)候，我們已經(jīng)準(zhǔn)備了一個(gè)添加按鈕，也在中繼器屬性面板為中繼器數(shù)據(jù)集添加命名了EditText列，現(xiàn)在我們就要為添加按鈕配置點(diǎn)擊動(dòng)作，為中繼器“添加行”。

新增行-選中中繼器-點(diǎn)擊新增行-選中中繼器數(shù)據(jù)集-點(diǎn)擊新增行-點(diǎn)擊確定。

2.4 刪除行

單擊字段后面的×，刪除對(duì)應(yīng)字段，我們這個(gè)案例不需要用到標(biāo)記行這個(gè)功能，直接為刪除按鈕配置點(diǎn)擊動(dòng)作就可以了。

到了這一步我們以為已經(jīng)基本完成了，預(yù)覽一下，咦，我們發(fā)現(xiàn)，每次添加行或者刪除行，都會(huì)清空我們已輸入的內(nèi)容，這個(gè)怎么呢？為了讓中繼器的數(shù)據(jù)集記錄下我們已輸入的內(nèi)容，我們還需要做“更新行”的操作。

2.5 更新行

字段編輯后需要記錄編輯內(nèi)容就是需將用戶輸入內(nèi)容記錄到中繼器中，此時(shí)我們只需要把用戶輸入的內(nèi)容獲取到并通過某個(gè)交互動(dòng)作傳給“EditText”列就可以了。下面我用到的是“失去焦點(diǎn)時(shí)”這個(gè)交互，選擇的動(dòng)作是“更新行”。

到這里就真的完成了，大家可以預(yù)覽一下！

回顧：

（1）增刪行，序號(hào)是如何實(shí)現(xiàn)自增的呢？

回答：項(xiàng)目編號(hào)的動(dòng)作設(shè)置為[[item.index]]。

（2）增刪行后，清空已輸入內(nèi)容怎么辦？

回答：需要更新行。

本文由 @茗一 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。