对于列表显示的数据,常常用户需要按不同的方式进行浏览,就像一般的看图软件功能一样,既可以以列表的形式,也可以以大图标、小图标的形式来显示。
但一般情况下设置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