使用itemRenderer自定义List元素

发布于，归属于flex实例。 沙发还空着，抢！ 共有447人围观    

效果说明：利用flex的itemRenderer渲染器，自定义List的每条内容，这里加上不同图标。
（由于有用到子组件和图标，这里放出源代码下载）

点此下载

来看源代码：

主程序

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="veiw.*">   
  3.     <mx:Style>
  4.         Application{
  5.             fontSize:12px;
  6.         }       
  7.     </mx:Style>
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.ListEvent;
  11.             import veiw.ListItem;
  12.             import mx.collections.ArrayCollection;
  13.             [Bindable]
  14.             private var db:ArrayCollection = new ArrayCollection([{id:1,name:'jquery教程'},
  15.                                     {id:2,name:'ext教程'},
  16.                                     {id:3,name:'flex教程'},
  17.                                     {id:4,name:'php教程'}]);                                                                                       
  18.         ]]>
  19.     </mx:Script>
  20.     <mx:List id="listTest" itemRenderer="veiw.ListItem" dataProvider="{db}" width="200"/>
  21. </mx:Application>

沿用之前发布的List文章的例子。

关键是增加了itemRenderer这个属性。

关键来看渲染器子组件的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="50" verticalAlign="middle">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             [Bindable]
  6.             private var imageClass:Class;
  7.               
  8.                [Embed(source="assets/jquery.png")]
  9.                private var jqueryIcon:Class;
  10.                [Embed(source="assets/ext.jpg")]
  11.                private var extIcon:Class;
  12.                [Embed(source="assets/flex.jpg")]
  13.                private var flexIcon:Class;
  14.                [Embed(source="assets/php.jpg")]
  15.                private var phpIcon:Class;                                                
  16.             private var typeToImageHash:Object = {1:jqueryIcon, 2:extIcon,
  17.             3:flexIcon, 4:phpIcon};   
  18.            
  19.             override public function set data(value:Object):void{
  20.                 imageClass = typeToImageHash[value.id];
  21.                 nameText.text = value.name;
  22.             }       
  23.            
  24.         ]]>
  25.     </mx:Script>
  26.     <mx:Image source="{imageClass}" />
  27.     <mx:Text id="nameText" />
  28. </mx:HBox>

这里有必要提下Embed这个元标签，这个元标签的作用是将图片、视屏等嵌入到flash。
根据嵌入位置的不同，语法也各不同：
1、[ Embed (parameter1, paramater2, ...)] 元数据标签
这主要在AS文件中，或MXML文件中的 标签中使用。
2、@ Embed (parameter1, paramater2, …) 指令
这主要在MXML标签中使用。
3、 Embed (parameter1, paramater2, …) 指令
这主要在 样式表中使用。根据情况的不同嵌入资源 Embed 的返回类型可以是Class或String。

例子所用的是第一种方式，嵌入图标并赋值给一个变量。

  1. override public function set data(value:Object):void{
  2.                 imageClass = typeToImageHash[value.id];
  3.                 nameText.text = value.name;
  4.             }

这里覆盖读写数据的方法。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类