2:子非鱼系列案例图文教程之【伸缩效果】
在产品设计时，很多情况下需要使用到列表的撑开及收缩效果。。撑开时，下文所有布局均需要根据撑开内容的高度向下移动，而收缩时，下文所有布局需又需要根据收缩内容的高度进行向上移动。本案例将分步介绍如何达到上述效果。
收缩后效果：
伸展后效果：
【第一步：绘制界面布局】
在工具栏内选择“动态面板”，拖动到编辑区后设置其布局样式为“垂直居中”。
【 第二步：绘制界面布局】
在工具栏内选择“形状-->矩形”，拖动到编辑区后调整好格式。此处我引用了一个矩形，且将第一个矩形背景色设置成红色，当然标题，其它四个进行合并，合并后设置默认为不可见。
【第三步：加入伸缩切换按钮】
在做切换按钮前先准备好两张图片，首先将默认显示的图片拖动到编辑区合适位置，再点击该图片元件为其添加"切换(事件执行和还原)"事件，该事件交互窗 口内点击“设置值”为该图片元件设置切换后的显示图片。
【第四步：加入切换伸缩显示效果】
伸缩切换按钮，点击“事件”中原切换事件下的“执行”后的下拉框。再次为切换按钮新增新执行“显示/隐藏”事件。如下图所示：
至此，伸缩效果就制作完成了，运行演示效果如下图所示：
案例源文件：
页:
[1]