Flex手机项目继承IconItemRenderer自定义List组件

在学习Flex手机项目的过程中，用到了List组件。系统默认的List有两种形式，一种是只显示一行文件的LabelItemRenderer简单样式，另一种为继承了LabelItemRenderer样式的IconItemRenderer样式。后一种相对比较复杂，在每个item中可以添加图片，图标，多行文件等内容。但是如果认真可以发现，后一种还是不能满足各种项目需求，例如想在每个item里添加一个"修改"或“删除”按钮，就不能做到了。本人花了不少时间查找相关资料，以为可以简单通过设置其属性的方法来添加按钮，但是没有找到，想到就来火，看来网络也不是万能的。写下一笔，以填空白。




认真可以发现，其实第二种就是继承了第一种的LabelItemRenderer重新的定义的组件。既然可以通过继承LabelItemRenderer重写，那么也就可以通过继承IconItemRenderer来自定义自己的组件了。好，行动。在FB4.6里，可以通过两种方法来处定义组件，一种是mxml的设计模式，另一种为as的代码模式。这里讲通过写一个as类来继承。新建一种as类，新建类的时候要继承IconItemRenderer，新建createChildren方法，在createChildren方法里动态添加一个button，设置这个button的各个属性，例如x,y,label等，最后利用this.addChild（）方法把这个自定义组件添加到父类中去。

代码如下：

package common{import flash.events.MouseEvent;import spark.components.Button;import spark.components.IconItemRenderer;public class MyItem2 extends IconItemRenderer{private var delButton:Button;private var editButton:Button;public function MyItem2(){super();}/** * @private *  * Override this method to create children for your item renderer  */override protected function createChildren():void{super.createChildren();// create any additional children for your item renderer heredelButton=new Button();delButton.x=this.parent.width-100;delButton.y=25;delButton.label="删除";delButton.scaleX=0.6;delButton.scaleY=0.6;delButton.height=35;delButton.width=70;delButton.addEventListener(MouseEvent.CLICK,delHandleClick);this.addChild(delButton);editButton=new Button();editButton.x=this.parent.width-50;editButton.y=25;editButton.label="修改";editButton.scaleX=0.6;editButton.scaleY=0.6;editButton.height=35;editButton.width=70;editButton.addEventListener(MouseEvent.CLICK,editHandleClick);this.addChild(editButton);}private function delHandleClick(event:MouseEvent):void{}private function editHandleClick(event:MouseEvent):void{}}}

在上面的类中，每个item添加了一个“修改”及“删除”按钮，接下来，在mxml里引用这个自定义的组件
如下：

<?xml version="1.0" encoding="utf-8"?><s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图" xmlns:common="common.*"><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><s:List width="100%" height="100%"alternatingItemColors="0xE3E3E3"contentBackgroundColor="0xF9F9F9"downColor="0x70B2EE"selectionColor="0x70B2EE"labelField="productName" focusEnabled="false"><s:itemRenderer><fx:Component><common:MyItem2 iconPlaceholder="@Embed('assets/home.png')"iconField="productIcon"iconWidth="50" iconHeight="50"></common:MyItem2></fx:Component></s:itemRenderer><s:dataProvider><s:ArrayList><fx:Object productIcon="assets/fx.jpg" productName="Flex SDK"    productDesc="A highly productive, free, open source framework."/><fx:Object productIcon="assets/fb.jpg" productName="Flash Builder"    productDesc="Designed to help developers rapidly develop RIAs."/><fx:Object productIcon="assets/fc.jpg" productName="Flash Catalyst"    productDesc="An approachable new interaction design tool."/></s:ArrayList></s:dataProvider></s:List></s:View>

效果如下：


怎样，效果还行吧？纠结了两个多星期，终于发现了这个方法，分享下。其实还有另一种方法可以实现，就是添加一个mxml组件，新建的时候要基于IconItemRenderer，然后添加以下代码：

<?xml version="1.0" encoding="utf-8"?><s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"  labelField="title" messageField="message" iconField="ico" iconWidth="64" iconHeight="64"initialize="init()"><fx:Script><![CDATA[import spark.components.Button;private var delButton:Button;private function init():void{if(!delButton){delButton=new Button();delButton.addEventListener(MouseEvent.CLICK,handleClick);delButton.x=this.parent.width-70;delButton.y=20;delButton.height=30;delButton.width=50;delButton.label="aa";this.addChild(delButton);}}private function handleClick(event:MouseEvent):void{}]]></fx:Script></s:IconItemRenderer>

这样同样可以在item里添加一个button按钮。触类旁通，如果想自定义添加一个图片或其它组件，可以通过这两种方法来实现。