axure版本：8.0
實(shí)現(xiàn)效果：
原型查看：
https://2ooaoe.axshare.com/#c=2
實(shí)現(xiàn)思路：
? ? ? ?使用中繼器來(lái)存儲(chǔ)雙方已經(jīng)發(fā)生的聊天內(nèi)容，并用不同的展現(xiàn)形式顯示雙方的聊天內(nèi)容。點(diǎn)擊發(fā)送聊天內(nèi)容時(shí)针余，將聊天內(nèi)容加入到中繼器中埂伦，并在聊天對(duì)話中顯示澜薄。
制作步驟：
1朝卒、拖入一個(gè)代表屏幕的元件（大家可根據(jù)需要加入一個(gè)手機(jī)或者平板的元件）耍群。
2木西、拖入一個(gè)中繼器畴栖。
3、設(shè)置中繼器的基本樣式八千，布局選為垂直且不進(jìn)行網(wǎng)格排列吗讶，并設(shè)置行間距和列間距。
4恋捆、選中中繼器照皆，在屬性頁(yè)卡里，在中繼器中預(yù)設(shè)好已完成的聊天內(nèi)容沸停。中繼器中的聊天內(nèi)容至少包括兩個(gè)字段膜毁，一個(gè)是消息發(fā)送方，一個(gè)是消息內(nèi)容愤钾。（我在后續(xù)設(shè)置代碼中以我的列名進(jìn)行瘟滨，若各位設(shè)置的不一樣自行參照修改即可）
5、聊天內(nèi)容設(shè)置好后能颁，就設(shè)置聊天樣式杂瘸。雙擊中繼器，進(jìn)入中繼器單元格設(shè)置伙菊。首先制作顯示對(duì)方聊天對(duì)話的樣式败玉，并將其編入一個(gè)組合中重命名敌土。在制作過(guò)程中，為了更好的適應(yīng)第1步添加的屏幕元件运翼，可以添加一條輔助線來(lái)進(jìn)行標(biāo)識(shí)纯赎。
然后在樣式中將該組合設(shè)為隱藏。
6南蹂、還是在中繼器單元格設(shè)置界面犬金，制作己方聊天對(duì)話的樣式，也同樣編入一個(gè)組合并重命名六剥，然后也將該組合設(shè)為隱藏晚顷。
7、現(xiàn)在正式開(kāi)始進(jìn)行中繼器的設(shè)置了疗疟。選中之前拖入的那個(gè)中繼器该默，在屬性中，找到“每項(xiàng)加載時(shí)”事件
8策彤、在Case1后面沒(méi)有設(shè)置任何信息栓袖，表示只要每項(xiàng)加載時(shí)，都會(huì)執(zhí)行店诗。我們雙擊Case1,在彈出的對(duì)話框中設(shè)置Case1生效的條件裹刮，在彈出的對(duì)話框中，點(diǎn)擊“添加條件”
參照下圖進(jìn)行設(shè)置后庞瘸，點(diǎn)擊確定捧弃。
我們能看到Case1下面添加了判斷條件。該條件的意思為：如果中繼器中該條記錄的object那一列的值為you的時(shí)候擦囊，執(zhí)行后面的操作违霞。
我們將它默認(rèn)的操作刪除。然后在動(dòng)作中添加“顯示”和“設(shè)置文本”瞬场。顯示you這個(gè)組合买鸽。
設(shè)置文本選擇you組合下面的用于顯示文本內(nèi)容的元件，文本值選擇fx贯被，并在里面“插入變量或函數(shù)”中選擇item.content眼五，然后點(diǎn)擊確定。
設(shè)置好后如下圖
9刃榨、在屬性中弹砚，雙擊“每項(xiàng)加載時(shí)”，添加一個(gè)條件? if "[[Item.object]]" == "me"
設(shè)置?顯示my組合枢希，并設(shè)置my組合下面的用于顯示文本內(nèi)容的元件的文本值為[[Item.content]]桌吃。
確定后，可以預(yù)覽到如下效果：
10苞轿、消息內(nèi)容顯示出來(lái)了茅诱，接下來(lái)我們做聊天發(fā)送逗物。在底部添加聊天內(nèi)容輸入文本框，發(fā)送按鈕等瑟俭，如下圖翎卓。
11、點(diǎn)擊發(fā)送按鈕摆寄，在屬性中失暴，設(shè)置”鼠標(biāo)單擊時(shí)“事件，動(dòng)作選擇”中繼器“下面”數(shù)據(jù)集“里面的? 添加行
點(diǎn)擊上圖中右側(cè)的”添加行“微饥，在彈出的對(duì)話框中逗扒，object列的值設(shè)為”me“，content中的值點(diǎn)擊fx函數(shù)欠橘。
我們這里需要將用戶輸入的內(nèi)容添加進(jìn)來(lái)矩肩，但是在”插入變量或函數(shù)“中，無(wú)法直接選擇用戶輸入框的值肃续。
為了實(shí)現(xiàn)這一需求黍檩，我們需要增加一個(gè)局部變量來(lái)中轉(zhuǎn)。如上圖始锚，變量名隨便取刽酱，值的類型選擇”元件文字“，然后選擇用戶輸入文本內(nèi)容的文本框疼蛾。
設(shè)置好后就可在”插入變量或函數(shù)“中肛跌，選擇剛才我們定義的那個(gè)局部變量了艺配。
12察郁、在發(fā)送按鈕下面再添加一個(gè)動(dòng)作，設(shè)置消息錄入文本框的內(nèi)容為空转唉。
至此皮钠，相關(guān)原型已制作完畢≡ǎ可以預(yù)覽并發(fā)消息看看制作的效果了麦轰。
