显示时的效果图:
隐藏时的效果图:
主要思想就是:利用flex的状态切换来控制,菜单的显示和隐藏
部分代码:
<s:states>
<s:State name="show">
</s:State>
<s:State name="hide">
</s:State>
</s:states>
<s:Group width="100%">
<s:BorderContainer width="100%" height.show="60" height.hide="0" includeInLayout.hide="false" backgroundColor="#ffffff">
<s:HGroup width.show="100%" height.show="60" width.hide="0" height.hide="0" verticalAlign="middle" horizontalAlign="center" gap="50">
<s:Button id="btn_phoneMeeting" label="电话会议" buttonMode="true" useHandCursor="true" />
<s:Button id="btn_boradMeeting" label="白板会议" buttonMode="true" useHandCursor="true" />
<s:Button id="btn_position" label="地图定位" buttonMode="true" useHandCursor="true" />
<s:Button id="btn_groupSendMsg" label="群发短信" buttonMode="true" useHandCursor="true"/>
</s:HGroup>
</s:BorderContainer>
<s:Image id="btnShowMune"
source.hide="{spanImg}"
source.show="{colImg}" horizontalCenter="0" height="10" width="100" buttonMode="true" useHandCursor="true"/>
</s:Group>
/**点击事件*/
private function colSpanClickHandler(event:MouseEvent):void{
if(view.currentState=="show"){
view.currentState="hide";
}else{
view.currentState="show";
}
}