Axure设计:两个中继器的增删改案例(上)
1、因没有现成的控件可用,所以此篇开场,先建控件环境及简单基本操作设计,下一篇,完善改善各个控件操作~
2、新建2个中继器,分别命名为“中继器A”和“中怕购继器B”
3、设置”中继器A“、”中继器B“间没爷芬距为5;

4、设置”中继器A“Column0列内容为:演示案例A、演示案例B、演示案例C……

5、删除”中继器B“的所有行
6、进入“中继器A”编辑,新增“文本标签”及两个按键,如下图所示:

7、“文本标签”设置尺寸为250*40,边框为无,文本内容居左
8、命名两个按键,分别为”add“和”del“
9、”按键:add“设置文本内容为”加入清单“
”按键:del“设置文本内容为”移除“
10、”按键:add“的单击交互动作:
---
1.“中继器B”增加一行
2.隐藏”按键:add“
3.显示”按键:del“
---

11、其中,给”中继器B“新增一行,是把”文本标签“内容添加到”中继器B“中去;
如下图所示:


12、”按键:del“的单击交互动作:
---
1.删除“中继器B”一行
2.隐藏”按键:del“
3.显示”按键:add“
---

13、其中,给”删除”中继器B“一行,需要定位删除”中继器A“相同内容的一行;
所以,设置条件内容为:[[TargetItem.Column0==Item.Column0]]
如下图所示:


14、显示交互动作设置完后,隐藏“按键:del”,并重叠两按键;
如下图所示:
(可以考虑再新增一条水平线,位置随意)

15、进入“中继器B”编辑,新建一“文本标签”及图标;
如下所示
(可以考虑再新增一条水平线,位置随意)

16、“文本标签”设置尺寸为250*40,边框为无,文本内容居左;
图标命名为“del”;
17、这里简单设置”图标:del“的单击交互动作:
---
1.删除本行
---
(下篇,此操作会被常态优化,中继器B删除本行后,“中继器A”同步切换操作按键)


18、”中继器B“内部布局如下图所示:

19、界面优化下,如下图所示:

20、预览,交作业~
(期待下一篇优化吗?哈哈~)

21、觉得不错,对你有帮助的话,请投个票,加个赞哦~