让中继器可以动态变变列数-最InのAxure

引言：

中继器在Axure的使用中已经非常普遍了，全是很多人都困惑于不能动太更改列的数量。比如：

从4行3列

动态变成3行4列

截至到当前的版本，官方还没有发布相关设置，但是我们可以通过更改坐标的方式来实现。

下面，我就来教大家实现方法：

首先，我们需要一个中继器，布局设置为“垂直”（Vertical），并且不要选择“网格分布”（Wrap(Grid)）：

此外，还需要设置一个变量，为了方便显示，我们使用一个叫columns的全局变量，默认值为3，表示初始列数：

双击中继器，进入到修改模式，在组件上新建交互事件。

注意：是中继器行内部组件的“载入时（Loaded）”，事件为移动：

目标为：“到达（To）“

x坐标为：[[This.width*((Item.index-1)%columns)]]

y坐标为：[[-This.Height*(Math.ceil(((Item.index-1)%columns)/columns))]]

想看动画效果的可以自定义Animate，等会儿在变换时会很炫酷。

这时“预览（Preview）”一下就可以发现我们要的4行3列效果已经完成了。

接下来我们新建一个按钮，按钮的文字为“变为4列”，新建交互“单击时（Click or Tap”），内容有两步：

第一步就是“设置变量值（Set Variable Value）”，选择变量columns的”值（value）“为4。

第二步就是“触发事件（Fire Event）”，“添加事件（Add Action）”，目标为中继器内组件的“载入时（Loaded）”事件。

再次预览页面，点击“变为4列”的按钮，你会发现中继器已经由3列变为4列了。

只要先改变columns的值，再去触发移动坐标的事件，就可以实现动态改变列数了。

更多Axure教程请访问：http://axure.in/ 这里有最InのAxure资料站。

如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。