中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、效果展示

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

原型地址：https://l8erum.axshare.com/#g=1p=結(jié)構(gòu)樹_圖標(biāo)版

二、制作教程

1. 材料準備

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

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

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

熱區(qū)的作用是擴大箭頭點擊的范圍。

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

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

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

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

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

2. 設(shè)置交互

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

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

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

這樣文本是設(shè)置了，但是層級沒有出來，因為所有節(jié)點都在同一個垂直面上，如下圖所示。

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

這樣就可以將樹結(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é)點需要隱藏，這個我們通過顯示列來控制，如果顯示列的值等于隱藏，我們就用隱藏的交互，將整個組合隱藏起來。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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