Axure 中继器添加数据实战指南
在原型设计中,利用中继器(Repeater)动态展示列表是常见需求。本教程将演示如何通过局部变量获取用户输入,并将其添加到中继器列表中。
1. 规范输入框命名
为了让程序能准确识别数据来源,第一步是对所有输入控件进行命名。不要使用默认的 Text Field 或 Input,建议根据字段含义自定义名称,例如 name_input、email_input 等。清晰的命名能让后续的逻辑配置更直观,减少排查错误的成本。
![输入框命名示意]
2. 配置按钮交互事件
选中页面上的'添加'按钮,进入交互面板。我们需要触发一个动作来响应点击行为:
- 选择 On Click 事件。
- 在动作区域找到 中继器 (Repeater) 相关操作。
- 选择 添加行 (Add Item) 至目标中继器。
这一步建立了用户操作与数据更新的连接。
![添加按钮事件配置]
3. 映射数据:局部变量的运用
这是最关键的一步。我们需要把输入框里的文字'搬运'到中继器的对应列中。Axure 提供了局部变量(Local Variable)机制来实现这一功能。
获取输入值
在添加行的动作设置中,点击参数旁的 fx 函数图标,插入变量:
- 点击 添加局部变量 (Add Local Variable)。
- 系统会生成类似
LVAR1、LVAR2的标识符。 - 将这些变量分别赋值给对应的输入框文本(Widget Text)。例如,将第一个输入框的文字赋值给
LVAR1。
注意:虽然变量名可能重复(如多个 LVAR1),但因为是局部作用域,它们互不干扰。每个输入框独立捕获当前状态下的文本内容。
![局部变量赋值逻辑]
绑定到中继器列
完成变量获取后,在插入变量函数中引用这些 LVAR。当执行添加行时,中继器会根据预设的列结构,自动将 LVAR1 填入第一列,LVAR2 填入第二列,以此类推。
![变量插入示例]
4. 验证与调试
配置完成后,预览原型进行测试:
- 在输入框填写数据。
- 点击添加按钮。
- 观察中继器列表是否即时更新。
如果列表未变化,请检查两点:一是输入框命名是否与变量赋值对象一致;二是中继器的列定义是否已提前创建好。
至此,通过中继器实现动态列表添加的功能已完成。这种基于局部变量的方式既保证了数据的独立性,又简化了交互逻辑,非常适合构建表单录入类的原型场景。


