教程如何使用中继器元件

　　这是本人在人人都是产品经理发表的第一篇文章，主要目的是教会小白使用Axure7。0新增的组件中继器（Repeater）。才疏学浅，如有纰漏，还请指正。
　　使用之前
　　在使用之前，我们总得搞清楚我们将要使用的元件是什么东西。
　　据Axure官网介绍，中继器是一种用于展示模式重复的文本或图标的元件。没看懂？不急，我们先看一下效果演示，然后再一步步把这个效果做出来，就可以开始使用中继器了
　　一、初识中继器
　　从元件库中找到中继器，按住并拖入中间的操作区，我们可以看到它已经有一列三行，分别写着1、2、3。
　　那么操作区中的1、2、3从哪里来的呢？聪明的同学已经看出来了，在右侧的检视：中继器中继器栏有一个编辑区，里边便有1、2、3。但是这还不够，如果我们把检视：中继器交互每项加载时中的case1删除，那么操作区中1、2、3便消失了。由此可见，还需要case1把操作区和编辑区联系在一起。
　　按CtrlZ撤销删除case1操作，双击case1打开用例编辑amp；lt；每项加载时amp；gt；面板，我们来看看case1究竟做了什么。lt；！每项加载时gt；
　　只见上面写着设置文字于（矩形）〔〔Item。Column0〕〕。顿生疑惑：什么？矩形？什么矩形？Item又是什么？Column0又是什么？Item。Column0又是什么？为什么要用〔〔〕〕包起来？
　　关掉用例编辑amp；lt；每项加载时amp；gt；面板，回到主界面，双击操作区的中继器，打开中继器模式编辑操作区。lt；！每项加载时gt；
　　点击中继器模式编辑操作区中的矩形，可以看到右侧检视：矩形中名称栏显示（矩形名称），这就是上文中的（矩形）。
　　点击检视：矩形中的名称栏，我们给这个矩形取名为动物。
　　选中中继器模式编辑操作区中的矩形，按CtrlC和CtrlV复制粘贴出新的矩形，拖动矩形放置在原矩形的右侧，并在右侧检视：矩形中名称栏将矩形名称改为食物。
　　将操作区切换回index页面，我们可以看到发生了一些变化：中继器变成了两行三列，case1中的矩形也变成了动物。这是我们刚才在中继器模式编辑操作区修改的结果。
　　接下来，我们要做更多的操作。在右侧检视：中继器中继器中，双击Column0，更名为FirstColumn，双击添加列，取名为SecondColumn。让我们看看case1发生了什么变化。
　　我们将Column0改名FirstColumn之后，case1中的Column0也变为FirstColumn，由此我们可以意会他们的关系。
　　二、每项加载时
　　接下来，我们在检视：中继器中继器的编辑区中填入一些动物和食物的对应关系，可以看到，操作区也发生了改变，但是只显示了第一列，第二列却没有显示。
　　这是因为case1只同步了第一列却没有同步第二列。接下来我们试着同步第二列。双击case1打开用例编辑amp；lt；每项加载时amp；gt；面板，可以看到，case1只将动物（矩形）和FirstColumn联系起来。lt；！每项加载时gt；
　　有样学样，我们把食物（矩形）和SecondColumn也联系起来。先勾选食物（矩形），再将右下角的值由默认的〔〔Item。FirstColumn〕〕改为〔〔Item。SecondColumn〕〕。聪明的同学应该可以意识到，这个〔〔Item。xxxxxx〕〕是一种默认格式，代表编辑区中xxxxxx列的值。很正确，Item就代表这个中继器的编辑区，〔〔〕〕则代表取值，取中继器编辑区xxxxxx列的值。
　　点击确定按钮，关闭用例编辑amp；lt；每项加载时amp；gt；面板，回到操作区，我们看到操作区中的中继器的第二列成功地与编辑区中的第二列同步。lt；！每项加载时gt；
　　看到这里，你已经明白了很多。但是依然有疑惑：如果只是静态地展示一个表格那么直接使用表格元件不久可以了？耍我呢？
　　稍安勿躁，学习了以上知识，下面我们可以准备起飞了。
　　三、动态添加
　　首先，我们添加两个文本框分别用于输入动物和食物，再添加个用于提交数据的提交按钮。
　　什么？提交数据？
　　将两个文本框和提交按钮分布在右侧检视的名称栏改名为输入动物、输入食物和提交按钮。
　　点击提交按钮，在右侧检视：提交按钮交互中双击鼠标单击时，打开用例编辑amp；lt；鼠标单击时amp；gt；面板。在左侧添加动作栏双击中继器数据集中的添加行。在右侧配置动作栏勾选（中继器）（因为我们还没给我们的中继器取名，所以显示为（中继器），跟前面提到的（矩形）一个道理）。lt；！鼠标单击时gt；
　　右侧配置动作栏下面点击添加行打开添加行到中继器。
　　点击FirstColumn下方，添加行右侧的fx，打开编辑值面板。点击局部变量中的添加局部变量。
　　将局部变量中的LVAR1改为Animal，右侧输入食物改为输入动物。在上方插入变量或函数下方的输入框输入〔〔Animal〕〕（对应上面的Animal，意为Animal变量的值）。
　　点击确定按钮关闭当前面板。同样操作第二列：点击SecondColumn下方，添加行右侧的fx，打开编辑值面板进行编辑。
　　同样点击确定按钮关闭当前面板。现在添加行到中继器面板变成这个样子，意思是单击提交按钮时，把输入动物文本框的值放在Animal中，把输入食物文本框的值放在Food中，然后将Animal和Food的值分别作为第一列和第二列组成一行，将这一行添加到中继器中。
　　点击确定按钮关闭添加行到中继器面板。点击确定按钮关闭用例编辑amp；lt；鼠标单击时amp；gt；面板。回到主界面。lt；！鼠标单击时gt；
　　点击右上角预览按钮打开浏览器，在两个输入框中分别输入动物和食物，点击提交按钮，即可看到动态添加的效果。
　　四、动态删除
　　那要删除怎么做呢？也很简单。我们关掉浏览器，回到主界面，添加一个用于删除的按钮。
　　点击右侧检视：矩形交互中的鼠标单击时打开用例编辑amp；lt；鼠标单击时amp；gt；面板，在左侧添加动作栏点击中继器数据集中的删除行，右侧配置动作栏勾选（中继器），下方的单选框选择已标记。意思是单击按钮时，删除中继器中已标记的行。什么？已标记？怎么标记？lt；！鼠标单击时gt；
　　点击确认按钮回到主界面。切换到（中继器）index中继器模式编辑操作区，按住Ctrl键点击两个矩形，右键，选择组合。在右侧检视：组合Shapes交互样式设置中点击选中打开交互样式设置面板，找到填充颜色一项，勾选并将颜色改为你喜欢的颜色。按确定键关闭交互样式设置面板。
　　再在右侧检视：组合交互中双击鼠标单击时打开用例编辑amp；lt；鼠标单击amp；gt；面板，在左侧添加动作栏元件设置选中中点击切换选中状态，再勾选右侧配置动作栏中的当前元件一项。这两步操作的目的在于让我们点击某一行时这一行会变色来反馈我们选了该行。lt；！鼠标单击gt；
　　我们还要让我们点击的某一行置为已标记状态，方便我们上文中说到的用于删除的按钮删除已标记的行。在左侧添加动作栏中继器数据集中点击标记行，再勾选右侧配置动作栏中的（中继器）一项。
　　五、大功告成
　　点击确定按钮关闭当前面板回到主界面，点击预览按钮查看效果。