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

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

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

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

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

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

一、小明視角

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

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

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

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

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

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

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

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

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

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

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

二、小紅視角

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

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

接下來我們要開始寫對話邏輯了。

三、對話邏輯

之所以要把對話邏輯放在最后寫，是因為我們現(xiàn)在頁面上有小明和小紅兩個視角，中繼器也有兩個，我們要寫對話，就得同時更新兩個中繼器。

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

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

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

【time】直接按格式拼接一個時間：

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

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

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

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

四、定位最新聊天

最后我們再來做發(fā)送或收到消息后自動定位最新消息的功能，這塊無論從小明視角還是小紅視角都是一樣的，因為收發(fā)是同時發(fā)生的，所以需要同時對兩個【定位器】做控制：

首先因為列表在收發(fā)消息時高度是動態(tài)的，所以我們在點擊發(fā)送的時候，需要給兩個定位器重新做一個定位，直接移動到中繼器的下方（y 值移動到中繼器的高度下），然后再設(shè)置【滾動到元件】的事件，目標就是兩個定位器。這樣就可以了。

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