DataGrid 制作经典的排行榜效果

Flex 作出 像迅雷看看 一样的 视频排行效果，要求鼠标移动上去会显示详细信息

效果如图：

说明：使用的空间就是datagrid

要注意的是：1.VBox 是可以自动 布局 产生缩放效果的

                     2· DataGrid 有一个属性 variableRowHeight="true" 可以让DataGrid 的行宽随子组件而改变

                     3·DataGrid 控制单元格最好 单独定义组件 这点 我另写一个帖子介绍

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute" height="349" width="180" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:ArrayCollection id="goodList">
   <mx:Object name="小太阳" singer="五月天" source="1.mp3" special="小太阳" renqi="22"/>
   <mx:Object name="画心" singer="张靓颖" source="2.mp3" special="电影画皮主题曲" renqi="22"/>
   <mx:Object name="曹操" singer="林俊杰" source="3.mp3" special="JJ最新单曲" renqi="22"/>
   <mx:Object name="U And Me" singer="羽泉" source="4.mp3" special="朋友难当" renqi="22"/>
   <mx:Object name="原谅" singer="张玉华" source="5.mp3" special="张玉华同名专辑" renqi="22"/>
   <mx:Object name="勇气" singer="梁静茹" source="6.mp3" special="勇气" renqi="22"/>
</mx:ArrayCollection>
   <mx:Canvas width="179" height="594" verticalScrollPolicy="off" horizontalScrollPolicy="off">
   
    <mx:DataGrid id="secipal" x="0" y="0" dragEnabled="true" height="348" width="100%" selectable="false"
     alternatingItemColors="[#0A0A0A, #0A0A0A]" showHeaders="false" headerColors="#666060" dataProvider="{goodList}"
     horizontalScrollPolicy="off" verticalScrollPolicy="off"
     variableRowHeight="true">
     <mx:columns>
      <mx:DataGridColumn headerText="" dataField="musicName">
       <mx:itemRenderer>
        <mx:Component>
       
        <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" creationComplete="init()"
        autoLayout="true">
        <mx:Script>
         <![CDATA[
          [Bindable]
          private var hid:int;
          [Bindable]
          private var cor:uint;
          private function init():void{
           hid=this.parentDocument.goodList.getItemIndex(data);
           trace(hid);
           if(hid<3){
            cor = 0xfc4a04 as uint;
          
           }else{
            cor = 0x777575 as uint;
           }
          }
          private function showmore():void{
           h1.height = 0;
           h2.height = 103;
           this.height = 103;
          
          }
          private function hidenmore():void{
           h1.height = 25;
           h2.height = 0;
           this.height = 30;         
          }
         ]]>
        </mx:Script>
         <mx:HBox id="h1" verticalAlign="middle" width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"
         mouseOver="showmore()" mouseOut="hidenmore()">
          <mx:Spacer width="30" />
         
          <mx:TextInput width="17" color="#FFFFFF" text="{hid+1}" backgroundColor="{cor}" textAlign="center" editable="false" fontWeight="bold"/>
          <mx:Label color="#9a9a9a" text="{data.name}" height="25" width="100%" fontSize="13" textAlign="center"/>
         
         </mx:HBox>
        
          <mx:Canvas x="206" y="81" width="100%" backgroundColor="#050505" horizontalScrollPolicy="off" verticalScrollPolicy="off"
           id="h2" mouseOver="showmore()" mouseOut="hidenmore()" height="0" backgroundAlpha="1">
           <mx:Image x="0" y="0" width="77" height="103" source="{data.source}"/>
           <mx:TextInput id="tet1" x="85" y="0" width="17" color="#FFFFFF" text="{hid+1}" backgroundColor="{cor}" editable="false" fontWeight="bold"/>
           <mx:Text x="110" y="0" text="{data.name}" color="#FCFCFC" fontWeight="bold" fontSize="12"/>
           <mx:Text x="85" y="28" text="人气：" color="#CF4925" fontSize="11" width="44"/>
           <mx:Text x="120" y="28" text="{data.renqi}" width="97" color="#E5591B" fontSize="11"/>
           <mx:Text x="85" y="55" text="作者：" color="#C3C0BF" fontSize="11" width="44"/>
           <mx:Text x="120" y="55" text="{data.singer}" width="97" color="#BEBAB8" fontSize="11"/>
           <mx:Text x="85" y="75" text="共{data.renqi}集" color="#ACAEAE"/>
          </mx:Canvas>
        
         
        
        </mx:VBox>
        
        </mx:Component>
       </mx:itemRenderer>
      </mx:DataGridColumn>
     </mx:columns>
    </mx:DataGrid>
    
   </mx:Canvas>
  
</mx:Application>