在《中继器的应用（2）》中，我们一起学习了如何为中继器列表添加新项。
在CSDN用户个人中心-我的收藏页面中，同时还有删除收藏夹的功能。
地址：https://i.csdn.net/#/user-center/collection-list
我们在画布中放入一个文本标签元件，输入默认文字“删除收藏夹”，并将字色设置为蓝色，颜色代码“108EE9”。
接下来，我们分析一下需要实现的交互。
点击收藏夹列表中的某一项时，列表项中的背景变为灰色，图标变为深色。
这个样式的改变和《中继器的应用（2）》中“鼠标悬停的样式”没有任何区别，所以，我们为中继器模板中的形状与图标元件添加“元件选中的样式”，样式设置参考“鼠标悬停的样式”。
以背景矩形为例，点击“收藏目录”组合后，再点击背景矩形元件，然后添加“元件选中的样式”，设置填充颜色为灰色。
元件选中的样式需要将元件变为选中状态才能呈现。
为“收藏目录”组合添加[单击时][选中][当前]组合的交互。
此时，在浏览器中预览原型的话，所有的收藏夹都能够点击后变为选中的样式。
但是，我们需要的是只有一项被选中。
这需要怎么设置呢？
如果用心按顺序学习本站的教程，此时就该知道这个答案--选项组。
为“收藏目录”组合添加选项组名称“收藏”。
然后你会发现，这个设置没有起到预想的效果，每个收藏夹还是都能够变为选中的样式。
这是因为中继器默认设置中，会隔离列表项之间的选项组。
所以，在中继器“收藏列表”的属性中，我们取消[隔离列表项之间的选项组]的勾选。
这样就实现了单选的效果。
不过，选中颜色的改变只是视觉上的交互，中继器并不能够直接根据是否选中了某个列表项进行删除。
而是要通过[标记行]的动作进行标记后，才能删除已标记的行。
这里我们需要删除的是最后被选中的那个收藏夹。
所以，需要在点击“收藏夹目录”组合时，添加两个动作。
第一个是通过[取消标记]动作取消[全部]的标记。
第二个是通过[标记行]动作标记[当前]被点击列表项对应的数据行。
通过这两个动作，就能够只标记最后被点击列表项所对应的数据行。
至于删除列表项的交互，非常简单。
为“删除收藏夹”按钮，添加[单击时][删除行]的交互，删除[收藏列表][已标记]的数据行，从而删除掉对应的列表项。
到这里，我们就完成了本案例所要实现的内容。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 中继器的应用（3）