Axure是一款提供了足夠多高階功能，卻又極其極其簡單的軟件。下面文章是筆者整理分享的關(guān)于Axure高保真教程中如何用中繼器制作樹元件的相關(guān)內(nèi)容，有想了解學(xué)習(xí)相關(guān)內(nèi)容的同學(xué)一起來看看吧！

樹元件在計(jì)算機(jī)科學(xué)和軟件工程中常常用于構(gòu)建和操作樹形數(shù)據(jù)結(jié)構(gòu)，提供了一種有效的方式來處理和查詢具有層次性關(guān)系的數(shù)據(jù)，使開發(fā)人員能夠更容易地組織和檢索信息，用于組織和管理數(shù)據(jù)，具有各種應(yīng)用。

那Axure里面也自帶了一個(gè)樹元件，但是比較局限，例如不能在樹里增加圖標(biāo)，不能通過搜索的方式快速找到對應(yīng)的節(jié)點(diǎn)，不能實(shí)現(xiàn)動態(tài)增刪改的效果……而且編輯起來比較麻煩，如果要寫交互的話，每個(gè)節(jié)點(diǎn)都要重新寫……所以我們用中繼器來制作一個(gè)樹元件，從而達(dá)到隨心所欲的操作。

那今天就教大家如何用中繼器制作一個(gè)含圖標(biāo)的樹元件，后續(xù)陸續(xù)更新樹元件增刪改查跳轉(zhuǎn)頁面等效果的教程，大家也可以關(guān)注一下。

一、效果展示

1. 鼠標(biāo)移入對應(yīng)節(jié)點(diǎn)，該節(jié)點(diǎn)會有個(gè)高亮顯示的效果。
2. 點(diǎn)擊箭頭可以展開或者收起子節(jié)點(diǎn)。
3. 不同的節(jié)點(diǎn)可以配置不同的圖標(biāo)。
4. 鼠標(biāo)點(diǎn)擊對應(yīng)節(jié)點(diǎn)，可以選中該節(jié)點(diǎn)（變色效果）。

二、制作教程

1. 材料準(zhǔn)備

我們用到的材料包括中繼器，在中繼器里面還需要一個(gè)透明的背景矩形、箭頭、圖片元件、文本標(biāo)簽、動態(tài)面板、熱區(qū)，如下圖所示擺放：

背景矩形的作用是鼠標(biāo)移入時(shí)變色，和鼠標(biāo)單擊之后選中變色，所以我們要設(shè)置一個(gè)鼠標(biāo)移入的樣式和選中的樣式，具體樣式你們根據(jù)需要設(shè)置就可以了。

動態(tài)面板里面有兩個(gè)狀態(tài)，分別是展開和收起，在里面分別放置向下的箭頭和向右的箭頭。

熱區(qū)的作用是擴(kuò)大箭頭點(diǎn)擊的范圍。

文字標(biāo)簽增加一個(gè)選中樣式，同樣用于選中后變色的交互，具體樣式你們根據(jù)需要設(shè)置就可以了。

我們把所有元件組合，勾選允許內(nèi)部元件觸發(fā)交互效果的多選按鈕，勾選之后鼠標(biāo)移入這個(gè)組合，背景矩形的懸停樣式就可以自動觸發(fā)，而不會被上方元件擋住。

中繼器表格我們需要以下幾列：

1. pic列：鼠標(biāo)右鍵導(dǎo)入該樹節(jié)點(diǎn)對應(yīng)的圖片即可。
2. tree1-tree6列：對應(yīng)樹節(jié)點(diǎn)的內(nèi)容，可參考下方案例按照樹的層級填寫即可。案例中最高是6級的樹，如果需要增加更多層級，也可以自行添加列和后續(xù)交互。
3. jiantou列：控制該節(jié)點(diǎn)是否有箭頭，默認(rèn)有箭頭，如果沒有箭頭就填無箭頭。
4. xianshi列：控制該節(jié)點(diǎn)內(nèi)容是否顯示，默認(rèn)顯示，如果默認(rèn)不顯示就填寫隱藏。
5. xuanzhuan列：控制該節(jié)點(diǎn)箭頭的方向，默認(rèn)向下打開，如果默認(rèn)向右收起就填寫收起。
6. bianse列：控制該節(jié)點(diǎn)是否被選中變色，默認(rèn)未選中，如果需要選中就填寫1。

這樣材料就設(shè)置好了。

2. 設(shè)置交互

在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互將中繼器表格里tree列的內(nèi)容設(shè)置都文本標(biāo)簽里。這里就涉及到一個(gè)條件控制的問題了。

我們要先判斷當(dāng)前行內(nèi)容是在哪個(gè)層級的，所以我們可以根據(jù)tree1-6列的內(nèi)容是否為空來判斷，如果tree6有內(nèi)容，那他就是6級節(jié)點(diǎn)；如果tree6沒有內(nèi)容，tree5有內(nèi)容，那他就是5級節(jié)點(diǎn)；如果tree6和tree5都沒有內(nèi)容，但是tree4有內(nèi)容，那他就是4級節(jié)點(diǎn)……就這樣依次判斷就可以，然后用設(shè)置文本的交互，根據(jù)不同的條件，將tree列的值設(shè)置到文本標(biāo)簽里顯示。

然后我們在用設(shè)置圖片的交互，將pic列的圖片值設(shè)置到圖片元件里。

這樣文本是設(shè)置了，但是層級沒有出來，因?yàn)樗泄?jié)點(diǎn)都在同一個(gè)垂直面上，如下圖所示。

這時(shí)我們可以用移動的交互，如果是1級的話，改變；如果是2級的話就向右移動20個(gè)單位，；如果是3級的話就向右移動40個(gè)單位……依次類推。

這樣就可以將樹結(jié)構(gòu)設(shè)置出來了，設(shè)置完成之后我們要考慮箭頭顯示的問題了。

如果jiantou列的值等于無箭頭，我們用隱藏的交互，將箭頭所在的動態(tài)面板隱藏起來即可。

接下來我們考慮箭頭的方向，箭頭的方向右動態(tài)面板來控制，我們可以通過xuanzhuan列的值控制動態(tài)面板的狀態(tài)，如果xuanzhuan列的值為收起，我們就用設(shè)置面板狀態(tài)的交互，將動態(tài)面板設(shè)置到收起的狀態(tài)。

然后我們考慮折疊的問題，被折疊的節(jié)點(diǎn)需要隱藏，這個(gè)我們通過顯示列來控制，如果顯示列的值等于隱藏，我們就用隱藏的交互，將整個(gè)組合隱藏起來。

最后，我們要控制值哪個(gè)節(jié)點(diǎn)被選中，這里我們用bainse列的值來控制，如果bianse列的值等于1，那么我們用設(shè)置選中的交互，將背景矩形和文本標(biāo)簽選中，就可以實(shí)現(xiàn)變色的效果。

這樣我們就完成了靜態(tài)的樹元件了，下面我們要增加動態(tài)的交互。

首先是鼠標(biāo)點(diǎn)擊箭頭后，展開和收起子節(jié)點(diǎn)的交互，我們將交互寫在對應(yīng)箭頭上方的熱區(qū)里。

如果點(diǎn)擊的是展開箭頭的熱區(qū)，就是當(dāng)前箭頭是展開狀態(tài)，點(diǎn)擊后我們就要將子節(jié)點(diǎn)隱藏起來，這里我們要用更新行的交互，第一個(gè)子節(jié)點(diǎn)將他隱藏，第二個(gè)是更新當(dāng)前節(jié)點(diǎn)的方向。

首先我們要知道當(dāng)前節(jié)點(diǎn)是幾級節(jié)點(diǎn)，這里的判斷方法和上面的一致，我們將符合條件的，例如當(dāng)前是1級節(jié)點(diǎn)，我們把所有tree1的值相等的行將他們更新，xianshi列的值更新為隱藏，箭頭方向更新為收起。

上面的條件也會把當(dāng)前節(jié)點(diǎn)隱藏，所以我們再用更新行的交互，將當(dāng)前行xianshi列的值設(shè)置為顯示，這樣點(diǎn)擊的節(jié)點(diǎn)就不會隱藏，并且xuanzhuan列的值更新為收起，這樣箭頭面板就會進(jìn)入收起的state，就是箭頭向右。

其他層級的節(jié)點(diǎn)也是用同樣的方式依次添加交互即可，寫完展開熱區(qū)的交互，接下來我們寫收起熱區(qū)的交互，其實(shí)思路都是一樣的，方向放過來就可以。

如果點(diǎn)擊的是收起箭頭的熱區(qū)，就是當(dāng)前箭頭是收起狀態(tài)，點(diǎn)擊后我們就要將子節(jié)點(diǎn)顯示起來，這里我們要用更新行的交互，第一個(gè)子節(jié)點(diǎn)將他顯示，第二個(gè)是更新當(dāng)前節(jié)點(diǎn)的方向。

這里需要注意的是，收起的話，我們是收起所有的子節(jié)點(diǎn)，但是展開的話我們只展開下一節(jié)點(diǎn)，例如點(diǎn)擊廣東省，我們只展開到市級的節(jié)點(diǎn)，不可能點(diǎn)廣東省就把廣東省下面所有區(qū)、街道、多少號、幾零幾都展開，這樣成千上萬的數(shù)據(jù)，所以我么只展開下一節(jié)點(diǎn)的。

我們用更新行的交互，將符合條件下一節(jié)點(diǎn)的xianshi列的值更新為顯示，例如所在的是1級節(jié)點(diǎn)，我們的顯示對應(yīng)的二級節(jié)點(diǎn)，條件就是ture1的值相同，并且true3、4、5、6的值為空。

更新完子節(jié)點(diǎn)后，我們再次用更新行的交互將當(dāng)前節(jié)點(diǎn)xuanzhuan列的值更新為展開，這樣箭頭面板就會設(shè)置到展開面板，箭頭向下。

其他層級的節(jié)點(diǎn)也是用同樣的方式依次添加交互即可。

完成了展開收起的效果后，我們還有點(diǎn)擊選中當(dāng)前節(jié)點(diǎn)變色的交互。

鼠標(biāo)單擊文本標(biāo)簽時(shí)，我們用更新行的交互，將bianse列的值設(shè)置為1就可以了。但是這樣會出現(xiàn)一個(gè)問題，可能會出現(xiàn)多個(gè)選中的節(jié)點(diǎn)，如果想只選中1個(gè)節(jié)點(diǎn)變色。在更新當(dāng)前行bianse列的值之前，我們還要做一個(gè)重置的操作。

我們可以先標(biāo)記所有行，然后用更新行的交互，更新已經(jīng)標(biāo)記的行，就是所有的行，更新bianse列的值為0，這樣相當(dāng)于全部都沒有選中，最后在用更新行的交互更新當(dāng)前行的值為1即可。

這樣我們制作完成了，下次使用時(shí)，我們只需要修改中繼器表格里數(shù)據(jù)，就可以生成含交互效果的樹了，后續(xù)我們也可以根據(jù)需要，增加交互效果，例如動態(tài)增加、刪除、修改節(jié)點(diǎn)、搜索節(jié)點(diǎn)、頁面跳轉(zhuǎn)、篩選其他中繼器等內(nèi)容。

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