你以为中继器只是“展示列表”？其实它能模拟完整的交互流程。本文通过微信聊天界面的案例，讲透Axure中继器如何实现信息发送、内容更新与界面响应，是一份可落地的原型设计实操指南。

目标功能概述

• 点击文字输入框→弹出键盘；
• 键盘输入文字→点击发送；
• 发送后键盘自动收回，并将消息显示在聊天列表中。

操作步骤

一、搭建聊天界面框架

1.拖入一个 中继器，编辑中继器项模板，包含：一个 消息气泡；一个 头像；一个 文本标签用于显示消息内容（不要用矩形直接输入文字，不然后面不好给气泡单独设置交互）；

2.为中继器添加示例消息之类的初始数据

3.设置中继器交互（图片、文本）绑定数据

二、构建键盘输入区域

现找一个键盘的素材，键盘主要设置文本框（别用错矩形了，不然不能输入文字）、键盘区的发送键处的交互，主要操作如下：

1.点击文字输入框→ 弹出键盘：设置文本框交互如图上（也可以直接用动态面板做一个整体）

2.发送后键盘自动收回：设置发送按钮交互，如图上（我这直接用的热区其实不太好，这种只能从键盘已经弹出界面开始演示交互，因为热区位置固定）

3.将消息显示在聊天列表中：利用中继器添加行，设置头像、文字，如图上

注意：

1.发送的气泡长度即尺寸长度要和文字贴合，使用函数实现动态变化：

首先中继器交互处设置尺寸宽度，绑定数据，如图上，锚点设置在右边中间。

然后要在发送按钮交互中继器添加行设置长度函数，引入局部变量，input是我的输入框文字命名，函数如图上：[[LVAR1.length*14+13]]

使用用字符数（.length函数获取文本的字符数）*平均宽度（根据字体大小调整，我这里用的14号） 来估算文本宽度。

＋13就是气泡的 padding-left 和 padding-right 各 6px，总共 12px，再加 1px 的缓冲，就是 +13，这个自行调整合适的

2.并设置发送后将输入框文本清空的效果。也就是上面图里面发送按钮的最后一个交互作用。

实现效果：

扩展

1.也可以再加一个 min() 或 max() 限制，比如：[[Min(LVAR1.length*14+13, 300)]]，这样气泡不会太宽（超过 300px 就换行）。

2.如果要实现发送和接收的消息，可以：

• 在数据集中添加一列Type”（比如sent”或received”）；
• 根据这一列的值，动态设置气泡的对齐方式（左对齐或右对齐）；
• 同时可以设置不同的气泡颜色（发送为绿色，接收为白色）。