本文分享了使用中繼器設(shè)計(jì)小標(biāo)簽，實(shí)現(xiàn)動(dòng)態(tài)添加和刪除的方法。如何快速上手使用中繼器，一起來(lái)看看~

何時(shí)使用標(biāo)簽

• 用于標(biāo)記事物的屬性和維度。
• 進(jìn)行分類。

先上效果：

步驟

第一步

（1）拖入中繼器，并在樣式中將布局選為水平。

（2）雙擊中繼器進(jìn)入編輯，將默認(rèn)矩形進(jìn)行調(diào)整。調(diào)整為圓角矩形，并在在默認(rèn)圖標(biāo)中找到“X”圖標(biāo)拖入進(jìn)去，尺寸顏色自行調(diào)整，這里就不做說(shuō)明。

這里我使用的兩個(gè)矩形，一個(gè)用于呈現(xiàn)文字，調(diào)整左邊為圓角右邊為直角；不顯示右邊線，一個(gè)用于呈現(xiàn)刪除符號(hào)，調(diào)整左邊為直角右邊為圓角，不顯示左邊線。

返回頁(yè)面呈現(xiàn)如下效果：

第二步

（1）選中中繼器，在屬性中第一列輸入想要在標(biāo)簽中展示的文字，刪除多余行，例子如下：

（2）選中中繼器，在屬性的交互中雙擊每項(xiàng)加載時(shí)，可以看到默認(rèn)將呈現(xiàn)文字的矩形的文本進(jìn)行了設(shè)置，值為[[item.Column0]]，以為矩形中顯示的文字即為中繼器第一列的值。

預(yù)覽效果：

第三步

（1）制作添加按鈕，在中繼器下方拖入一個(gè)矩形寫(xiě)入文字標(biāo)簽，拖入“+”圖標(biāo)，設(shè)置樣式如下，尺寸同中繼器中的要素相同，邊線設(shè)為虛線，顏色為灰色，這為幽靈按鈕普遍設(shè)計(jì)方式。

（2）選中添加標(biāo)簽按鈕，轉(zhuǎn)換為動(dòng)態(tài)面板。

在動(dòng)態(tài)面板后點(diǎn)擊“+”增加狀態(tài)state2。

雙擊編輯state2，復(fù)制state1中的圓角矩形，在矩形中拖入文本框，將文本框?qū)傩赃x中隱藏邊框。

（3）選中文本框，在屬性交互中雙擊“按鍵按下時(shí)”。

編輯條件，選中按下的鍵鍵值為回車(chē)鍵“return”，此設(shè)置為當(dāng)輸入結(jié)束時(shí)，點(diǎn)擊回車(chē)鍵退出輸入。

同時(shí)面板狀態(tài)為是state1,即輸入完成后點(diǎn)擊回車(chē)鍵完成輸入，狀態(tài)回到添加狀態(tài)。

此時(shí)，在再添加動(dòng)作中選擇數(shù)據(jù)集下的添加行。

選擇添加行，添加行到中繼器。

點(diǎn)擊column0后的“fx”，編輯值，添加局部變量，選擇元件文字為文本框，此項(xiàng)操作的意思為，設(shè)置增加行要顯示的內(nèi)容為文本框中的文字。

預(yù)覽之后發(fā)現(xiàn)每次添加時(shí)，輸入框中會(huì)保留上一次輸入的文字，因此在添加一個(gè)設(shè)置文字的動(dòng)作，將文本框的值設(shè)置為空。

在state1中選中按鈕，在按鈕屬性交互中雙擊“鼠標(biāo)單擊時(shí)”，設(shè)置面板狀態(tài)為state2，同時(shí)設(shè)置焦點(diǎn)在文本框。

預(yù)覽，這時(shí)就可以正常添加標(biāo)簽了~~~

最后一步

設(shè)計(jì)刪除標(biāo)簽功能，在中繼器編輯中選中“x”圖標(biāo)，在屬性交互中雙擊“鼠標(biāo)單擊時(shí)”，添加動(dòng)作，選擇中繼器-數(shù)據(jù)集-刪除行，然后選擇this。

神功已成，預(yù)覽看看效果吧~

如有不明白之處，或有更好意見(jiàn)，歡迎下方留言討論~

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

題圖來(lái)自 Pexels，基于 CC0 協(xié)議