中繼器除了可以做表格的增刪改查，還可以做什么呢？本文作者利用中繼器做了一個(gè)聊天界面，通過展示聊天雙方視角來看其設(shè)計(jì)邏輯，跟著作者的思路一起來看看當(dāng)中的設(shè)計(jì)邏輯吧。

中繼器除了做表格的增刪改查，還能做什么？今天作者給你提供一種新的思路，教你用中繼器來模擬一個(gè)高保真的對(duì)話聊天界面。

你好，我是不務(wù)正業(yè)的產(chǎn)品經(jīng)理，我又帶來了一款最新的“無聊”作品，用中繼器做的一個(gè)高保真的對(duì)話聊天界面。

中繼器是 Axure 中一個(gè)神級(jí)元件，沒有它做不了的設(shè)計(jì)，只怕做設(shè)計(jì)的人缺乏足夠的想象力，今天，我給你帶來這款“無聊”的聊天作品的設(shè)計(jì)教程，先來看看最終效果（體驗(yàn)傳送門>>）：

左邊的界面是小明看到的視角，右邊是小紅看到的視角，從小明視角發(fā)出去的信息，顯示在右側(cè)，而小紅視角收到的同一條信息，是顯示在左側(cè)，注意這里還有個(gè)小細(xì)節(jié)，就是當(dāng)列表消息超過界面高度的時(shí)候，兩個(gè)視角在收發(fā)消息時(shí)，列表會(huì)滑動(dòng)到列表最底部，定位在最新的消息上。

這個(gè)實(shí)現(xiàn)起來非常簡單，但需要你有一些想象力，并且了解中繼器的一些屬性，接下來我們開始動(dòng)手實(shí)現(xiàn)。

一、小明視角

首先我們來畫左邊的界面，也就是小明的視角，聊天窗口的框架基本上都長一個(gè)樣，所以你想自己畫也行，從其他聊天軟件截個(gè)圖來改改也行，總之這個(gè)沒有什么難度，主要是聊天窗體的內(nèi)容值得好好說一說。

首先是下圖框選的地方需要用一個(gè)【動(dòng)態(tài)面板】裝起來，并且動(dòng)態(tài)面板【滾動(dòng)條】設(shè)置為【垂直滾動(dòng)】，這樣當(dāng)聊天列表超過窗口高度時(shí)才能上下滑動(dòng)。

在動(dòng)態(tài)面板內(nèi)，放了兩個(gè)東西，一個(gè)是中繼器，一個(gè)是定位器，定位器的作用是為了實(shí)現(xiàn)上述我說的，在消息列表超過窗口高度時(shí)，列表可以自動(dòng)滑動(dòng)到最底下，定位到最新消息，這里我用的是一個(gè)【熱區(qū)】的組件，可以用動(dòng)態(tài)面板或矩形改一下透明度之類的，確保在前端不會(huì)顯示出來就行，具體這個(gè)定位器怎么用，后續(xù)我會(huì)介紹：

中繼器的數(shù)據(jù)表是這樣設(shè)計(jì)的：

其中【msg】用來存放信息內(nèi)容，【time】用來存放發(fā)送時(shí)間，【send】用來存放發(fā)送人的名字，也就是【xiaoming】或【xiaohong】。

我們?cè)俅蜷_中繼器，里面放了一個(gè)“對(duì)話”，由于我們現(xiàn)在做的是小明的視角，所以上面那條是小紅發(fā)過來的消息，下面是小明發(fā)出去的消息，都各自放在一個(gè)【動(dòng)態(tài)面板】中，對(duì)話內(nèi)容分別是頭像、發(fā)送時(shí)間和發(fā)送內(nèi)容，這里頭像我們是固定的，直接找個(gè)圖片上傳即可，時(shí)間和內(nèi)容隨便寫點(diǎn)文字就行，待會(huì)我們會(huì)從中繼器獲取數(shù)據(jù)：

這樣界面就畫完了，我們接下來寫聊天內(nèi)容的讀取邏輯。

我們先返回找到【中繼器】，然后給中繼器添加【每項(xiàng)加載】事件，如下：

這里需要先做一個(gè)判斷，判斷【send】是【xiaoming】還是【xiaohong】，如果是【xiaoming】，就顯示【xiaoming】的對(duì)話（動(dòng)態(tài)面板），并隱藏【xiaohong】的對(duì)話（動(dòng)態(tài)面板），注意這里的顯示和隱藏需要推動(dòng)和拉動(dòng)元件下方的元件，否則界面會(huì)很難看；如果【send】是【xiaohong】，則是反過來，最后再將時(shí)間和內(nèi)容對(duì)應(yīng)的元件【設(shè)置文本】為【time】和【msg】即可。

這樣我們就可以將聊天列表加載出來，最后的效果就是這樣的：

此時(shí)先不著急寫發(fā)送消息的邏輯，我們先把小紅的視角畫出來。

二、小紅視角

做完了小明的視角，小紅的視角就比較簡單了，可以直接復(fù)制粘貼小明的視角進(jìn)行修改即可，只要要把對(duì)話的視角對(duì)調(diào)一下就可以了，這里的對(duì)調(diào)不是簡單的上下位置對(duì)調(diào)，而是把整體的內(nèi)容對(duì)調(diào)，比如頭像，比如原本綠色消息命名為【ming_msg】，這里應(yīng)該改為【hong_msg】：

這樣我們就得到小紅的視角：

接下來我們要開始寫對(duì)話邏輯了。

三、對(duì)話邏輯

之所以要把對(duì)話邏輯放在最后寫，是因?yàn)槲覀儸F(xiàn)在頁面上有小明和小紅兩個(gè)視角，中繼器也有兩個(gè)，我們要寫對(duì)話，就得同時(shí)更新兩個(gè)中繼器。

我們先寫小明視角的發(fā)送邏輯，首先我們要加一個(gè)判斷，就是當(dāng)輸入框內(nèi)的文字不為空的時(shí)候，才觸發(fā)對(duì)話，觸發(fā)對(duì)話很簡單，就是直接往兩個(gè)中繼器中添加數(shù)據(jù)，然后把輸入框的內(nèi)容清空即可：

這是兩個(gè)中繼器添加行的數(shù)據(jù)：

其中的【msg】直接獲取輸入框的值：

【time】直接按格式拼接一個(gè)時(shí)間：

最后由于我們的消息是通過小明發(fā)出去的，所以【send】直接寫【xiaoming】即可。

小紅視角的發(fā)送按鈕也是復(fù)制小明的改一下即可，注意需要修改兩處地方：

第一處：往中繼器中添加的【msg】應(yīng)改成小紅視角的輸入框的內(nèi)容；

第二處：往中繼器中添加的【send】應(yīng)改成【xiaohong】。

四、定位最新聊天

最后我們?cè)賮碜霭l(fā)送或收到消息后自動(dòng)定位最新消息的功能，這塊無論從小明視角還是小紅視角都是一樣的，因?yàn)槭瞻l(fā)是同時(shí)發(fā)生的，所以需要同時(shí)對(duì)兩個(gè)【定位器】做控制：

首先因?yàn)榱斜碓谑瞻l(fā)消息時(shí)高度是動(dòng)態(tài)的，所以我們?cè)邳c(diǎn)擊發(fā)送的時(shí)候，需要給兩個(gè)定位器重新做一個(gè)定位，直接移動(dòng)到中繼器的下方（y 值移動(dòng)到中繼器的高度下），然后再設(shè)置【滾動(dòng)到元件】的事件，目標(biāo)就是兩個(gè)定位器。這樣就可以了。

這個(gè)例子非常簡單，你不妨也動(dòng)手做一下吧，如果你也跟我一樣不務(wù)正業(yè)的話。