4.1 动态面板元件

动态面板元件是在 Axure RP 8 中笔者最钟爱的元件，而且，也是展现 Axure RP 8 强大之处的核心元件，笔者后面给大家讲解的大部分案例或多或少都与动态面板元件有关。

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

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

在 Axure RP 8 的“页面设计”面板中，动态面板元件显示为淡蓝色背景，可双击该元件，在“面板状态管理”对话框，或者在“概要”面板设置它的不同状态，并能对不同状态的内容进行编辑。“面板状态管理”对话框如图4-2所示。

可单击“动态面板管理”对话框的“”（添加）按钮添加新状态，单击“”（上移）按钮将选中的状态上移，单击“”（下移）按钮将选中的状态下移，单击“”（移除状态）按钮删除选中状态。选中某个状态后进行单击，可设置该状态的名称，可将状态更改为容易理解的名称。若想编辑某个状态，如编辑State1状态，可在该处双击State1状态，进入该状态的编辑页面，如图4-3所示。

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

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

图4-2 “面板状态管理”对话框

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

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

图4-3 编辑动态面板元件的State1状态

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

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

图4-5 概要面板动态面板元件快捷菜单