运行时修改列表项的ItemRenderer(动态更改itemrenderer)

对于列表显示的数据，常常用户需要按不同的方式进行浏览，就像一般的看图软件功能一样，既可以以列表的形式，也可以以大图标、小图标的形式来显示。

但一般情况下设置itemRenderer属性的时候，在写代码时就指定了一个自定义的组件类，如果换成另外一个的话，不能像开发时那样直接给 itemRenderer属性赋一个组件的类型(字符串)就完事，因为itemRenderer是个Class的实例，所以需要通过new一个类的实例来更改，使用的实例化的类叫作ClassFactory，即类工厂。

看看简单的代码，一个列表，一个按钮，按钮事件用来处理更换List的itemRenderer，List的itemRenderer属性默认设置为小图标SmallIconRenderer
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
   <![CDATA[
    function changeRenderer():void{
     if (btnChange.label == "change to big"){
      list.itemRenderer = new ClassFactory(BigIconRenderer);
      btnChange.label = "change to small";
     }else{
      list.itemRenderer = new ClassFactory(SmallIconRenderer);
      btnChange.label = "change to big";
     }
   
    }
   ]]>
</mx:Script>
<mx:List id="list" width="300" height="300"
   itemRenderer="SmallIconRenderer" variableRowHeight="true">
   <mx:dataProvider>
    <mx:Object label="this is item A"/>
    <mx:Object label="this is item B"/>
    <mx:Object label="this is item C"/>
    <mx:Object label="this is item D"/>
   </mx:dataProvider>
</mx:List>
<mx:Button id="btnChange" label="change to big"
   click="changeRenderer()" x="308" y="10"/>
</mx:Application>

下面是小图标形式的自定义组件，其中引入了一张小图标，放一个标签用来显示列表中的数据项：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
   <![CDATA[
    import com.nstar.base.assets.Assets;
    [Bindable]
    public var item:Object = new Object();
  
   ]]>
</mx:Script>
<mx:Image source="{Assets.nav_prev}" />
<mx:Label text="{data.label}"/>
</mx:HBox>

下面是大图标形式的自定义组件：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
   <![CDATA[
    import com.nstar.base.assets.Assets;
    [Bindable]
    public var item:Object = new Object();
   ]]>
</mx:Script>
<mx:Image source="{Assets.iconInfo}"/>
<mx:Label text="{data.label}" fontSize="20" fontWeight="bold" color="0xff0000"/>
</mx:HBox>

这里是演示的例子

转自：http://hi.baidu.com/half_cup_coffee/blog/ite/c6fe90955567950d7af4807f.html