flex动态渲染问题源码。-优快云博客

本文介绍了一种使用 Flex 框架实现列表项渲染器动态切换的方法，通过按钮触发，可在两种不同大小的渲染器间切换，展示了 ClassFactory 的使用及属性赋值技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主程序：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
public function changeRenderer():void{
if(btnChange.label == "change to big"){
list.itemRenderer = new ClassFactory(BigIconRenderer);
//这里正如我在上边所说，这里只要传一个普通类就可以了，但实际开发中我们这里一般都传一个自定义组件，或类似的东西。
btnChange.label = "change to small" ;
}else{
var cf:ClassFactory = new ClassFactory(SmallIconRenderer);
//在下边的代码中我实例大家如何利用ClassFactory的properties属性给新生产的对象赋初值。
var ob:Object = new Object();
ob.xx="赋值方法一";
cf.properties=ob;
//或者直接 cf.properties={xx:"赋值方法二"}；

list.itemRenderer = cf;
btnChange.label = "change to big";
var c:Class = SmallIconRenderer;
var x:Object = new c();
}
}
]]>
</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" width="400" height="300">
<mx:Script>
<![CDATA[
[Bindable]
public var item:Object = new Object();
]]>
</mx:Script>
<mx:Label text="{data.label}" fontSize="20" fontWeight="bold" color="0xff0000"/>
<mx:Text text="大"/>
</mx:HBox>
渲染器二：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[

[Bindable]
public var xx:String;
]]>
</mx:Script>
<mx:Label text="{data.label}"/>
<mx:Text text="小"/>
<mx:Button label="{xx}"/>
</mx:HBox>