模仿QQ农场好友列表

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
 <![CDATA[
  
  [Embed(source="images/DateChooser_nextMonthUpSkin.png")]
  public var friendIconLeft:Class;
  [Embed(source="images/DateChooser_prevMonthUpSkin.png")]
  public var friendIconRight:Class;
  public function sizeLeftPanel():void
        {
         if (leftPanel.width<=0) {
          leftPanel.width=246;
          friendId.setStyle("icon",friendIconLeft);
         }else if (leftPanel.width>=0){
          leftPanel.width=0;
          friendId.setStyle("icon",friendIconRight);
         }
        }
  
  
 ]]>
</mx:Script>
 
<mx:HBox horizontalGap="0" horizontalCenter="0" verticalCenter="0" backgroundColor="#000000" verticalGap="0" paddingTop="2" borderStyle="solid" borderThickness="0" dropShadowEnabled="true" shadowDirection="center" width="100%" height="100%">
  <mx:VBox width="14" height="100%" verticalAlign="middle" paddingLeft="2">
   <mx:Button id="friendId" label="好友" icon="{friendIconLeft}" width="10" height="20" click="sizeLeftPanel();" />
  </mx:VBox>
  
  <mx:HBox id="leftPanel" backgroundColor="#00FFFF" width="246" height="100%" horizontalGap="0" resizeEffect="Resize">
   <!--<mx:VBox width="100%" height="100%" styleName="darkGreyShadowBg" paddingBottom="0" paddingLeft="6" paddingRight="6" paddingTop="6" borderStyle="none" borderThickness="2" verticalGap="0">
   </mx:VBox>-->
  </mx:HBox>
</mx:HBox>
 
</mx:Application>