多選下拉列表可以用于展示可選標(biāo)簽，并允許用戶選擇多個(gè)標(biāo)簽，那么該如何利用Axure里用中繼器制作一個(gè)多選下拉列表。作者總結(jié)了相關(guān)步驟，希望對(duì)你有所幫助。

多選下拉列表常用于需要用戶從一組選項(xiàng)中選擇多個(gè)選項(xiàng)的情況。它提供了一個(gè)下拉菜單，用戶可以點(diǎn)擊展開并選擇他們感興趣的多個(gè)選項(xiàng)。多選下拉列表可以用于展示可選標(biāo)簽，并允許用戶選擇多個(gè)標(biāo)簽。例如，在一個(gè)博客發(fā)布界面上，可以使用多選下拉列表選擇適用的標(biāo)簽。

所以今天就教大家在Axure里如果用中繼器制作一個(gè)多選下拉列表，并且根據(jù)已選項(xiàng)自動(dòng)生成標(biāo)簽的原型模板。

一、效果展示

1、點(diǎn)擊下拉列表框可以彈出選項(xiàng)，點(diǎn)擊選項(xiàng)可以選中選項(xiàng)或者取消選中

2、根據(jù)已選內(nèi)容自動(dòng)顯示對(duì)應(yīng)的標(biāo)簽，并且根據(jù)標(biāo)簽數(shù)量自動(dòng)調(diào)整下拉框的尺寸

3、取消選中時(shí)，對(duì)應(yīng)標(biāo)簽自動(dòng)刪除，也可以點(diǎn)擊標(biāo)簽里的刪除按鈕刪除并取消選中

4、選項(xiàng)信息可以在中繼器表格里維護(hù)，選項(xiàng)較多時(shí)，可以通過滾動(dòng)條上下查看選項(xiàng)

二、制作教程

1. 用中繼器制作選項(xiàng)

我們新增一個(gè)中繼器，在中繼器里添加文本標(biāo)簽，背景矩形，以及多選按鈕，這里我們因?yàn)橄胱远x多選按鈕的樣式，所以我們沒有用系統(tǒng)多選按鈕，我們用動(dòng)態(tài)面板來制作，增加兩個(gè)狀態(tài)，一個(gè)是未選中狀態(tài)，一個(gè)是選中的狀態(tài)，分別導(dǎo)入選中和未選中的多選按鈕的素材。

當(dāng)然你們也可以用系統(tǒng)的多選按鈕來制作，分別將他們放入兩個(gè)狀態(tài)里，但是需要用個(gè)熱區(qū)擋住他，因?yàn)楹罄m(xù)是否選中是通過中繼器里的值控制的，并不是通過點(diǎn)擊直接改變的。如下圖所示擺放：

中繼器表格里我們?cè)黾觾闪校?/p>

1. text列：在該列添加選項(xiàng)名，有幾個(gè)選項(xiàng)就填寫幾行
2. xuanzhong列：用來控制對(duì)應(yīng)行的選項(xiàng)是否被選擇，一般如果默認(rèn)沒有選中項(xiàng)的話，不填即可，如果項(xiàng)默認(rèn)某個(gè)選項(xiàng)選中，就在該選項(xiàng)xuanzhong列的值填寫1

在中繼器每項(xiàng)載入時(shí)，我們首先用設(shè)置文本的交互，將text列選項(xiàng)的值設(shè)置到文本標(biāo)簽里。

然后我們還要根據(jù)xuanzhong列的值來設(shè)置動(dòng)態(tài)面板是選中還是未選中的狀態(tài)。如果xuanzhong列的值等于1，那么我們用將動(dòng)態(tài)面板設(shè)置到選中狀態(tài)；如果不等于1，我們就設(shè)置到未選中的狀態(tài)，不過這里不等于1的情況可以不用寫，因?yàn)樗J(rèn)就是未選中的狀態(tài)。

2. 鼠標(biāo)單擊選項(xiàng)時(shí)的交互

鼠標(biāo)單擊選項(xiàng)時(shí)，我們要根據(jù)判斷該選項(xiàng)是否已經(jīng)被選中，如果已被選中，我們就將他設(shè)置為未選中，因?yàn)榭刂扑欠襁x中是通過中繼器里選中列的值來控制的，所以我們用更新行的交互，將中繼器里xuanzhong列的值更新為0即可；如果未被選中，我們就將他設(shè)置為選中，用更新行的交互，將中繼器里xuanzhong列的值更新為1即可。

3. 將中繼器轉(zhuǎn)為動(dòng)態(tài)面板

這樣我們就基本完成了下拉選項(xiàng)，如果選項(xiàng)較多，這個(gè)選項(xiàng)就會(huì)很常，所以我們把它轉(zhuǎn)為動(dòng)態(tài)面板，取消面板自適應(yīng)尺寸，并且調(diào)出垂直滾動(dòng)條，這樣就可以控制顯示選項(xiàng)的尺寸，在選項(xiàng)較多時(shí)，還可以上下滾動(dòng)查看更多選項(xiàng)。

如果覺得系統(tǒng)的滾動(dòng)條不太好看的話，我們還可以通過再次轉(zhuǎn)為動(dòng)態(tài)面板，然后用外面板遮擋住大部分或全部?jī)?nèi)面板的滾動(dòng)條，這樣去美化一下。

然后我們?cè)诘撞吭黾右粋€(gè)背景矩形，將他們組合在一起，這樣下拉選項(xiàng)就做好了。

4. 下拉框的制作

下拉框我們需要用到矩形，上下箭頭，以及中繼器標(biāo)簽組。

鼠標(biāo)單擊這個(gè)組合時(shí)，我們用顯示的交互，將下拉選項(xiàng)顯示出來，這個(gè)我們可以選擇燈箱效果，這樣點(diǎn)擊其他空白的地方，下拉選項(xiàng)就可以自動(dòng)收起來。

當(dāng)然我們也可以增加一些交互樣式讓他更加美化，增加矩形選中和禁用樣式，鼠標(biāo)移入移出或者下拉選項(xiàng)顯示隱藏時(shí)，觸發(fā)這些樣式，因?yàn)槊總€(gè)人審美不一樣，這些你們自行處理即可。

4. 中繼器標(biāo)簽組

前面說到下拉框組合里需要有一個(gè)中繼器標(biāo)簽組，我們現(xiàn)在來制作。

需要再中繼器里增加背景矩形，文字標(biāo)簽和刪除按鈕，文字標(biāo)簽我們轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)榭紤]到有些選項(xiàng)太長(zhǎng)，我們就自顯示前面部分即可。如下圖所示擺放即可。

中繼器表格里不需要修改，用自帶的Column0列即可，默認(rèn)中繼器表格為空。中繼器布局為水平，按網(wǎng)格排布，案例中是每行項(xiàng)目數(shù)是2。

在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將Column0列的值設(shè)置到文本標(biāo)簽里。

這樣標(biāo)簽組就只做完成了。

5. 選項(xiàng)和標(biāo)簽的聯(lián)動(dòng)

接下來我們要讓選項(xiàng)和標(biāo)簽進(jìn)行聯(lián)動(dòng)，在選項(xiàng)中繼器里，該選項(xiàng)被選中，我們就用添加行的交互，將該選項(xiàng)的選項(xiàng)值增加的標(biāo)簽中繼器里。這里需要注意的是，因?yàn)橹欣^器每次更新都會(huì)從頭加載，所以在一開始如果直接添加行的話，選第二個(gè)選項(xiàng)之后，就會(huì)發(fā)現(xiàn)之前第一次添加的標(biāo)簽，重復(fù)添加了。

所以我們?cè)谝婚_始的時(shí)候，要對(duì)標(biāo)簽中繼器做一個(gè)還原的操作，我們可以用刪除所有行的方式，讓選中之前的標(biāo)簽中繼器處于一個(gè)原始為空的狀態(tài)。

我們要?jiǎng)h除標(biāo)簽的話，我們也不是用刪除行的方式，刪除標(biāo)簽里對(duì)應(yīng)的行。因?yàn)槲覀兪峭ㄟ^下拉選項(xiàng)中繼器里的值來控制具體顯示的標(biāo)簽，所以如果我們想讓標(biāo)簽刪除，我們就用更新行的交互，將和標(biāo)簽名稱一樣的行的xuanzhong列的值更新為0，這樣就可以把標(biāo)簽刪除。

這樣我們就基本完成了，但是我們還需要考慮標(biāo)簽太多的情況。

6. 設(shè)置下拉框的尺寸

我們可以根據(jù)標(biāo)簽中繼器的尺寸，來設(shè)置外框的尺寸。

當(dāng)所有標(biāo)簽加載完成后，我們用設(shè)置尺寸的交互，首先設(shè)置下拉框的尺寸，寬度保持不變，高度就是標(biāo)簽組的高度+上下的邊距，這樣就可以外框就可以變高。

同事我們還要用移動(dòng)的事件，移動(dòng)下拉選項(xiàng)組合，移動(dòng)到下拉框的底部，這樣就可以根據(jù)標(biāo)簽的多少，自動(dòng)調(diào)整下拉框的尺寸。

這樣我們就完成了多選下拉列表（自動(dòng)生成標(biāo)簽）原型模板的制作了，下次使用也很方便，我們只需要在下拉選項(xiàng)中繼器表格里填寫選項(xiàng)值，即可自動(dòng)生成交互效果。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。