利用Axure中继器实现添加删除商品原型

Axure是一款优秀的原型设计工具，扩展性很强。今天跟大家分享下如何利用Axure的中继器来实现动态的添加商品和删除商品的原型。

新建页面，命名为商品管理，拖动如下元件（一个矩形底层，三个文字标签，三个文本框，一个按钮，一个中继器）至页面上，排版。给三个文本框分别命名为add_title,add_price,add_details。

双击中继器，进入中继器编辑页面。删除默认的矩形，拖动添加如下元件（一个图片，三个文本标签，一个删除图标，一条横线）至页面上，排版。给图片、上中下文本标签分别命名为：pic,title,price,details。

点击页面空白处，选择属性，删掉右边默认的三条数据，添加如下四条数据。

双击属性的Case1，勾线title，选择富文本，然后编辑文本为[[Item.title]]。对price和details做相同处理。完成以后，预览文件，即可看到页面默认静态效果。

切换到商品管理页面，选择按钮，鼠标按下效果的填充颜色修改为蓝色。双击鼠标点击时，勾选中继器，点击添加行，点击title的fx，点击下方添加局部变量，做如下图设置。然后对price和details的fx做类似设置。此时预览页面，可以看到已

可以添加商品了。

切换到中继器页面，选择删除图标，双击鼠标点击时，选择左侧中继器下的删除行，勾选默认的This。

点击预览即可查看完整效果啦。

总结一下：

看起来步骤很多，其实根本点就是绑定列表每一列和每个输入框的关系，按钮用来触发关系。