最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

中继器的应用(3)

教程 小楼一夜听春语 1124浏览

在《中继器的应用(2)》中,我们一起学习了如何为中继器列表添加新项。

在CSDN用户个人中心-我的收藏页面中,同时还有删除收藏夹的功能。

地址:https://i.csdn.net/#/user-center/collection-list

我们在画布中放入一个文本标签元件,输入默认文字“删除收藏夹”,并将字色设置为蓝色,颜色代码“108EE9”。

接下来,我们分析一下需要实现的交互。

点击收藏夹列表中的某一项时,列表项中的背景变为灰色,图标变为深色。

这个样式的改变和《中继器的应用(2)》中“鼠标悬停的样式”没有任何区别,所以,我们为中继器模板中的形状与图标元件添加“元件选中的样式”,样式设置参考“鼠标悬停的样式”。

以背景矩形为例,点击“收藏目录”组合后,再点击背景矩形元件,然后添加“元件选中的样式”,设置填充颜色为灰色。

元件选中的样式需要将元件变为选中状态才能呈现。

为“收藏目录”组合添加[单击时][选中][当前]组合的交互。

此时,在浏览器中预览原型的话,所有的收藏夹都能够点击后变为选中的样式。

但是,我们需要的是只有一项被选中。

这需要怎么设置呢?

如果用心按顺序学习本站的教程,此时就该知道这个答案--选项组。

为“收藏目录”组合添加选项组名称“收藏”。

然后你会发现,这个设置没有起到预想的效果,每个收藏夹还是都能够变为选中的样式。

这是因为中继器默认设置中,会隔离列表项之间的选项组。

所以,在中继器“收藏列表”的属性中,我们取消[隔离列表项之间的选项组]的勾选。

这样就实现了单选的效果。

不过,选中颜色的改变只是视觉上的交互,中继器并不能够直接根据是否选中了某个列表项进行删除。

而是要通过[标记行]的动作进行标记后,才能删除已标记的行。

这里我们需要删除的是最后被选中的那个收藏夹。

所以,需要在点击“收藏夹目录”组合时,添加两个动作。

第一个是通过[取消标记]动作取消[全部]的标记。

第二个是通过[标记行]动作标记[当前]被点击列表项对应的数据行。

通过这两个动作,就能够只标记最后被点击列表项所对应的数据行。

至于删除列表项的交互,非常简单。

为“删除收藏夹”按钮,添加[单击时][删除行]的交互,删除[收藏列表][已标记]的数据行,从而删除掉对应的列表项。

到这里,我们就完成了本案例所要实现的内容。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 中继器的应用(3)