为列表选中项添加图标

继为List添加序号之后，老总又提出了新的要求：为列表中的当前选中项添加一个指示图标。

在得到正确解决方案之前，我因此苦恼了两天。尝试了许多种方法，都没有得到理想的结果。但是把基本问题搞清楚了，为列表中的当前选项添加指示图标，情况有三种：

1. 列表项之间切换时（鼠标点击列表项，或通过键盘上下选中列表项）

2. 新添加列表项

3. 删除列表项

第一个比较好解决，但是第2个和第3个问题看似简单，但做起来却经常和第一个发生冲突。

 

艰难的求解里程不在此多说了，直接切入主题。

还好感谢《Flex 3 Cookbook中文版》第五章13节所讲解的内容。其实不必自己去想的那么多，List组件中有两个“效果”我们应该能够注意到：一个是当列表项被选中的效果，另一个是当鼠标移到列表项但还未选中（点击）的效果。其中drawHighlightIndicator就是还未选中的效果（高亮效果），drawSelectionIndicator是选中的效果。这两个效果被封装在这两个方法中，代码如下：

<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" selectionColor="#ffcccc">
    <mx:Script>
        <![CDATA[

            import mx.controls.listClasses.IListItemRenderer;

            [Embed("../../assets/outline_arrow.gif")]
            private var img:Class;

            [Embed("../../assets/in_arrow.gif")]
            private var highlight_img:Class;

            override protected function drawHighlightIndicator(indicator:Sprite, 
x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItem
Renderer):void
            {
                var this_img:Object = new highlight_img();
                indicator.addChild((this_img as DisplayObject));
                (this_img as DisplayObject).x = itemRenderer.width - (this_img as Disp
layObject).width
                super.drawHighlightIndicator(indicator, x, y, width, height, 0xff0000,
itemRenderer);
            }

            override protected function drawSelectionIndicator(indicator:Sprite, 
x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:
IListItemRenderer):void
            {
                var this_img:Object = new img();
                indicator.addChild((this_img as DisplayObject));
                (this_img as DisplayObject).x = itemRenderer.width - (this_img as 
DisplayObject).width
                super.drawSelectionIndicator(indicator, x, y, width, height, 0xffcccc,
itemRenderer);
            }

        ]]>
    </mx:Script>
</mx:List>

 indicator.addChild(...)是将图像加入到渲染器中，紧接着的一行是图像的位置，然后通过调用父类方法传递参数并改变选中和高亮颜色。有了这个方法，我的苦思冥想真是不值得。荀子曰：“吾尝终日而思矣，不如须臾之所学也。”，此话是也。

评论

1 楼 svafly 2011-02-17  

每次都会addchild，重叠上去了啊。。。。。