如何擴展列表以添加UI組件？

Question

如何擴展火花列表以在其上添加UI組件？

Answer 1

我假設你想要一個UI組件添加到列表本身的項目，在這種情況下，你可以使用的itemRenderer。那裏有severalgoodexamples。

我粘貼從Flex Examples（偉大的網站）相當看中下面的例子。

MyApplication.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ --> 
<s:Application name="Spark_List_itemRenderer_test" 
     xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     xmlns:local="*"> 

    <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 

     s|List { 
      chromeColor: #333333; 
      color: white; 
      contentBackgroundColor: black; 
      fontSize: 24; 
     } 
    </fx:Style> 

    <s:List id="list" 
      itemRenderer="CustomListItemRenderer" 
      labelField="name" 
      width="400" 
      horizontalCenter="0" verticalCenter="0"> 
     <s:layout> 
      <s:VerticalLayout horizontalAlign="justify" gap="0" requestedRowCount="6" /> 
     </s:layout> 
     <s:dataProvider> 
      <s:ArrayList> 
       <local:ProductVO name="Adobe Illustrator CS5" icon="@Embed('ai_appicon-tn.gif')" /> 
       <local:ProductVO name="Adobe AIR 2.0" icon="@Embed('air_appicon-tn.gif')" /> 
       <local:ProductVO name="ColdFusion 9" icon="@Embed('cf_appicon-tn.gif')" /> 
       <local:ProductVO name="Dreamweaver CS5" icon="@Embed('dw_appicon-tn.gif')" /> 
       <local:ProductVO name="Flash Professional CS5" icon="@Embed('fl_appicon-tn.gif')" /> 
       <local:ProductVO name="Adobe Flash Player 10.1" icon="@Embed('fl_player_appicon-tn.gif')" /> 
       <local:ProductVO name="Fireworks CS5" icon="@Embed('fw_appicon-tn.gif')" /> 
       <local:ProductVO name="Flex 4.0" icon="@Embed('fx_appicon-tn.gif')" /> 
       <local:ProductVO name="Lightroom 2.0" icon="@Embed('lr_appicon-tn.gif')" /> 
       <local:ProductVO name="Photoshop CS5" icon="@Embed('ps_appicon-tn.gif')" /> 
      </s:ArrayList> 
     </s:dataProvider> 
    </s:List> 

</s:Application> 

CustomListItemRenderer.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ --> 
<s:ItemRenderer name="CustomListItemRenderer" 
     xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     autoDrawBackground="false"> 
    <s:layout> 
     <s:HorizontalLayout verticalAlign="middle" 
       paddingLeft="5" paddingRight="5" 
       paddingTop="5" paddingBottom="5" /> 
    </s:layout> 
    <s:states> 
     <s:State name="normal" /> 
     <s:State name="hovered" /> 
     <s:State name="selected" /> 
    </s:states> 

    <s:BitmapImage source="{data.icon}" /> 
    <s:Label text="{data.name}" 
      textDecoration.hovered="underline" 
      paddingLeft.selected="5" 
      width="100%" 
      maxDisplayedLines="1" 
      showTruncationTip="true" /> 
    <s:Label text="&#187;" 
      scaleX="2" scaleY="2" /> 

</s:ItemRenderer> 

最後ProductVO.as：

/** http://blog.flexexamples.com/2010/01/27/creating-a-fancy-spark-list-control-item-renderer-in-flex-4/ */ 
package { 
    public class ProductVO extends Object { 

     [Bindable] 
     public var name:String; 

     [Bindable] 
     public var icon:Class; 
    } 
}