4.1 动态面板元件

动态面板元件之所以强大，是因为它可以定义诸多状态，并可设置默认状态，而且可以通过交互事件动态切换状态和调整大小，所以很多的动态交互效果都可以通过动态面板元件实现。动态面板元件的不同状态可以定义不同内容，默认显示的是动态面板元件的第一个状态的内容，也可在“概要”面板将某个动态面板元件置为不可见。

从“元件库”面板将动态面板元件拖入“页面设计”面板，如图4-1所示。

图4-1 动态面板元件案例（默认）

在Axure RP 9 的“页面设计”面板中，动态面板元件显示为淡蓝色背景，双击该元件，“页面设计”面板所呈现的就是当前动态面板的设计界面，如图4-2所示。

图4-2 动态面板设计界面

可以看到，该编辑界面有一个蓝色虚线方框，表示的是动态面板元件的宽度和高度，即该状态可以显示的区域都在蓝色虚线方框内部。如果该动态面板元件在“样式”面板中选中“自适应内容”属性，此时，蓝色虚线方框将会去掉，而且，动态面板元件的尺寸将自动根据所选择状态内部内容的宽度和高度进行调整。

可单击“添加状态”为元件添加新状态，直接拖动状态可改变其排列顺序。单击状态名后的“”按钮可删除该状态，单击“”则可以复制该状态。单击状态名切换状态，就可进入该状态的设计界面，可在“样式”面板修改动态面板的名称等信息，如图4-3所示。

选择刚创建的动态面板元件，在“样式”面板头部将名称设置为：imgPanel，在“样式”面板将宽度和高度分别设置为370 像素和240 像素。通过双击动态面板元件进入“面板状态管理”对话框，设置img1、img2和img3三个状态，其中img1为第一个状态。接着，在右下方的“概要”面板单击img1状态进入状态编辑界面，在其中复制一张宽度为370像素和240像素的图片，左上角坐标在状态编辑界面为X0:Y0。按照同样的方法将另外两张同样大小的图片复制到img2 和img3状态。

设计完成后，切换到主页面，此时，在“概要”面板该元件信息如图4-4所示。

“样式”面板中该元件的右上角有一个按钮“”，可将imgPanel元件设置为显示或隐藏，默认是显示状态，如果想隐藏，可单击该按钮。也可在“概要”面板中选择某个动态面板元件的某个状态（如State1）后，单击进行重命名操作，或者右击选择快捷菜单中的菜单项，进行添加、复制、删除、上移和下移状态，选中某个状态后右击可选择快捷菜单，如图4-5所示。

图4-3 动态面板“设计”界面

图4-4 设计完成的imgPanel动态面板元件

图4-5 元件快捷菜单