【Axure实战】15.社交类项目-模拟聊天列表及聊天窗口（二）

接上篇文章，这次主要来讲解一下聊天窗口的制作，首先看一下效果图：

效果图

我们要实现4个部分的功能：

1. 好友聊天内容（关于实现与聊天列表中的内容一一对应本节未进行制作，这部分会在下篇文章中讲解）

2. 我的聊天内容

3. 文字输入框

4. 发送按钮

那么闲话少叙，我们直奔主题

step1:制作好友聊天内容单元，这节中我们将好友聊天的内容直接写死在上面，如图1所示，我们根据需求设计一个聊天内容单元的样式，有头像，聊天内容和时间。

图1

step2:在中继器-数据中根据需求新建列并对应填写数据【如图2.1】，并在使用中继器的交互给好友聊天内容单元初始化，填充内容【如图2.2】。具体初始化方式请参见上篇文章，至此我们得到了一个仅供展示的好友聊天内容单元。

图2.1 图2.2

step3:制作我的聊天内容样式，使用基本元件搭建文本气泡，头像图片和消息发送时间【如图3】。

图3

step4:新建中继器，新建两列内容命名为ChatMessageIsay和MyAvatar并留空【如图4】，其中ChatMessageIsay的作用是为了后面从文本框中获取文字并加入到中继器中进行显示，而MyAvatar则是为了方便后期给中继器添加行的时候预留的（后期我们可以使用全局变量模拟头像URL来模拟换头像的操作），在此步骤中暂时直接将头像选择固定图片。

图4

step5:使用中继器初始化我的聊天内容，分别设置文本气泡中的文本【图5.1】，头像图片【图5.2】和消息发送时间【图5.3】，其中时间我们获取当前时间进行显示，函数写法见图。

图5.1 图5.2 图5.3

step6:将step2和step5中制作好的好友聊天内容单元和我的聊天内容单元根据设计样式组合到一起并全选右键转化为动态面板，之后根据设计需要调整动态面板的尺寸，并将动态面板设置为垂直滚动，方便后面发送多条消息时滚动到最新发送的那条消息。【如图6】

图6

step7:制作文字输入框，因为设计中该框仅为单层设计，故使用元件库中的文本框即可，另外多说一嘴，如果需要文字框随输入文字多少自适应变化的话，需要使用动态面板配合文本域进行制作，可以实现但是制作成本很高，远不及跟开发说一句“这个文本框尺寸需要根据输入内容动态变化，最大高度160pt来的简单高效”。另外此时文本框输入文字时是紧贴着左侧开始的，我们额外嵌套一个矩形元件来实现两边的间距【如图7】

图7

step8:将step6和step7成果按照设计效果拼接，并排布发送键、键盘、顶部用户名，more按钮等元件【如图8】。

图8

step9:点击顶部菜单栏-项目-全局变量>添加并命名一个新的全局变量ChatMyWords用来传递文字输入框(step7）中的内容至我的聊天内容单元(step5)【如图9】

图9

step10:选择发送按钮，右侧交互-新建交互-单击时-下拉找到设置变量值-选择目标为step9中创建的全局变量ChatMyWords-设置为元件文字-元件选择为step7制作的输入框MessageField【如图10】。通过这个交互我们实现了将输入框中的文字存储于全局变量中。

图10

step11:紧接着我们要将这个全局变量中的聊天内容显示在我的聊天内容单元中，做法依旧是在发送按钮上，右侧交互-添加动作-添加行-目标MyChatUnit-添加行【如图11】-在ChatMessageISay列中点击fx-插入变量或函数找到ChatMyWord-确认返回【如图12】。至此当我们点击发送按钮时，文字输入框中的内容就将显示于屏幕中。

图11 图12

step12：此时依然有个问题，当我们点击发送按钮时，文字输入框中的文字不会清空，故我们需要设置当点击发送按钮时-添加动作-设置文本-目标选择文字输入框MessageField-设置为文本-值留空【如图13】。这样当我们点击发送按钮时文本框中的内容就会清空，方便我们继续输入。

图13

step13:已经做的差不多了，但此时当我们连续输入多个内容，到动态面板的尺寸显示不下时，最新的内容会藏在下面，所以我们继续优化每次发送时将动态面板中的内容滚动到最新发送的消息上。做法：点击发送按钮-添加动作-滚动到元件-目标MyChatUnit-垂直滚动-动画留空或自定义【如图14】。这样每次输入的时候都会滚动到最新发送的那条消息啦。

图14

通过在发送按钮上添加以上步骤的交互【如图15】，就实现了我们开头动图中的效果啦，点击预览试一下吧。

图15

OK下一篇文章我们会继续完善这个页面，实现聊天列表和聊天页面的联动。