动态面板:能够在一个固定的区域切换显示的内容。能实现很多动态效果。
其本身是一个透明的元件。一个动态面板里有若干个【状态】。“若动态面板是幻灯片的放映机,而状态则是幻灯片。” 打开状态的编辑界面,即可放置各种各样的元件,组成内容。
有几种特性:容器、多状态、拖动、循环、适应宽度、相对固定。
动态面板-多状态: 动态面板里的多个状态。可以通过添加交互,让某个状态的顺序切换到首位。
场景一:搜索栏内容切换(像淘宝)
1. 准备工作
制作搜索框、标签栏(填充为白色或透明,字体为橙色)
2. 设置标签栏
三个标签栏都要设置好【选中】状态的样式(填充为橙色,字体为白色),且其中一个标签栏的默认状态为【选中】;然后【设置选项组名称】为相同的,这里是“SearchTab”
(设置相同的选项组名称: 为了切换标签时,实现唯一选中的效果)
3. 设置动态面板
选中需要变化的区域,右键,转换为动态面板
动态面板命名为SearchPanel,并双击,选中State1,并复制两个
双击每个状态,修改每个状态的内容,这里修改了文本框的提示文字和框框的颜色
为每个标签添加两个用例
一是【鼠标单击时】-【选中】-【当前元件】
二是【设置面板状态】-【动态面板】-【选择对应的状态】
搞定!