你以为微信聊天界面很难做？其实只要掌握 Axure 中继器的几个关键技巧，就能轻松实现消息流的动态切换。这篇文章用最直白的方式，教你一步步搭出一个“能聊”的原型界面。

学习目标

• 掌握中继器与动态面板的联动方式；
• 理解如何用变量控制动态面板状态；
• 实现点击聊天列表项，动态切换对话内容，无需页面跳转；

核心思路

• 使用中继器构建聊天列表；
• 使用动态面板承载对话界面；
• 根据变量值动态切换动态面板内容。

操作步骤

1.使用中继器搭建聊天列表

1.1 中继器项模板

模版中应包含：

• 矩形（作为可点击区域）
• 图片元件（头像）；
• 文本标签（人名）；
• 文本标签（聊天文字，也可增加聊天时间）；

全部设置好之后给各个部分都命名好。

1.2 填充中继器数据

中继器数据表至少包含以下列：

• 头像；
• 人名；
• 聊天文字；

1.3 设置交互

把中继器数据绑定到中继器内的矩形

2.动态面板实现切换页面

• 搭建好对话界面，复制一份并将其转为动态面板，命名（如「对话面板」），默认隐藏。
• 进入中继器的项模板；拖入一个热区，覆盖整行内容。
• 为热区添加「单击时」事件，如下：

• 切换：添加「单击时」→「显示/隐藏」→「显示」动态面板（对话面板）并设置滑动动画
• 对话页名称对应替换：设置动态面板中的标题文本=中继器聊天界面当前行的名称
• 返回：类似于切换，只需要注意选择「隐藏」动态面板（对话面板）并设置滑动动画

实现效果如下：

中继器使用小结

中继器的英文是「Repeater」，一词由「Repeat」（重复）与「-er」构成，直译为“重复执行者”。这直接揭示了其最重要的功能：重复，根据模板结构，重复生成内容。使用中继器我们可以模拟数据库的操作，进行数据库的增删改查操作，它特别适合处理列表、卡片、表格等重复性内容，避免手动复制与维护的冗余。