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

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

你好，我是不務正業的產品經理，我又帶來了一款最新的“無聊”作品，用中繼器做的一個高保真的對話聊天界面。

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

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

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

一、小明視角

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

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

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

中繼器的數據表是這樣設計的：

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

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

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

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

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

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

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

二、小紅視角

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

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

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

三、對話邏輯

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

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

這是兩個中繼器添加行的數據：

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

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

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

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

第一處：往中繼器中添加的【msg】應改成小紅視角的輸入框的內容；

第二處：往中繼器中添加的【send】應改成【xiaohong】。

四、定位最新聊天

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

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

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